/* ==========================================================================
   Listing detail — the panel, and the modal that carries it
   Figma node 177:488 (Directory Listing Modal).

   Two blocks in one file because they are one design and always ship
   together:

     .o-listing        the panel itself — photograph beside a white column.
                       Cloned into the modal from a card, and rendered on its
                       own by single-directory_listing.php.
     .o-listing-modal  the overlay chrome — the blurred scrim, the dialog it
                       floats in, and the close control.

   The comp draws the modal edge to edge at 1920x1080. It is inset here so the
   blurred page reads as background rather than as a seam, and the dialog keeps
   the comp's 16:9 and its 720:1200 split exactly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared measurements
   The white column's inset is a single number because two things depend on
   it: the copy, and the close button, whose right edge lines up with the end
   of the copy rather than with the corner of the dialog. That alignment is
   the point of the control's placement in the comp, so it is expressed once
   here and read by both.
   -------------------------------------------------------------------------- */
:where(.o-listing, .o-listing-modal) {
	--o-listing-pad-x: clamp(1.5rem, 6.5vw, 6.5rem);   /* 104 at 1600, 128 in the comp's wider panel */
	--o-listing-pad-y: clamp(2rem, 5vw, 5rem);
	--o-listing-close-y: clamp(0.75rem, 2.5vw, 3.5rem); /* 56 in the comp */
}

/* --------------------------------------------------------------------------
   The panel
   -------------------------------------------------------------------------- */
.o-listing {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);   /* 720 : 1200 */
	background-color: var(--o-white);
	color: var(--o-ink);
}

.o-listing__media {
	position: relative;
	min-height: 0;
	overflow: hidden;
	background-color: var(--o-ice);
}

.o-listing__img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

/* Only one photo shows at a time; the arrows swap which. */
.o-listing__img[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Step to the previous / next photo
   White discs centred on the photograph, 32px in from each edge. Only printed
   when the listing has more than one photo.
   -------------------------------------------------------------------------- */
.o-listing__nav {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--o-white);
	color: var(--o-navy);
	box-shadow: var(--o-shadow-float);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color var(--o-transition), color var(--o-transition);
}

.o-listing__nav--prev {
	left: 2rem;
}

.o-listing__nav--next {
	right: 2rem;
}

.o-listing__nav-glyph {
	display: block;
	width: 24px;   /* Draws a 14px arrow at a 2px stroke, as the comp does */
	height: 24px;
}

.o-listing__nav:hover,
.o-listing__nav:focus-visible {
	background-color: var(--o-navy);
	color: var(--o-white);
}

/* --------------------------------------------------------------------------
   The white column
   Centred with auto margins rather than justify-content, which would clip the
   top of the copy once it is tall enough to scroll.
   -------------------------------------------------------------------------- */
.o-listing__detail {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow-y: auto;
	padding: var(--o-listing-pad-y) var(--o-listing-pad-x);
	background-color: var(--o-white);
}

.o-listing__content {
	width: 100%;
	margin-block: auto;
}

.o-listing__eyebrow {
	margin: 0;
	color: var(--o-teal);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-body);
	letter-spacing: 0.156em;   /* 2.5px at 16px */
	line-height: 1.2;
	text-transform: uppercase;
}

.o-listing__title {
	margin: 1.5rem 0 0;
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: clamp(2rem, 1.1rem + 3vw, 4.25rem);   /* 32 -> 68 */
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

.o-listing__text {
	margin-top: 2rem;
	color: var(--o-ink-mist);
	font-size: var(--o-fs-body-lg);
	line-height: var(--o-lh-loose);
}

.o-listing__text p {
	margin: 0 0 1em;
}

.o-listing__text > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   The two links, between their hairlines
   The rules belong to this row, so a listing with neither link loses both of
   them rather than leaving a pair of lines around nothing.
   -------------------------------------------------------------------------- */
.o-listing__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 3rem;
	margin: 3rem 0;
	padding: 2.5rem 0;
	border-top: 1px solid var(--o-rule-cool);
	border-bottom: 1px solid var(--o-rule-cool);
	color: var(--o-accent);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.o-listing__contact {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.o-listing__contact p {
	margin: 0;
}

.o-listing__contact-name {
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-body-lg);
	line-height: 1.45;
}

.o-listing__address,
.o-listing__phone {
	color: var(--o-ink-mist);
	font-size: var(--o-fs-body-lg);
	line-height: 1.55;
}

.o-listing__phone a {
	color: inherit;
	text-decoration: none;
	transition: color var(--o-transition);
}

.o-listing__phone a:hover,
.o-listing__phone a:focus-visible {
	color: var(--o-accent);
}

/* --------------------------------------------------------------------------
   The same panel as a page
   single-directory_listing.php renders it inside the theme's container, so it
   carries its own gutter already and the inset comes in.
   -------------------------------------------------------------------------- */
.o-listing--page {
	--o-listing-pad-x: clamp(1.5rem, 4vw, 4rem);
	--o-listing-pad-y: clamp(2rem, 4vw, 4rem);

	min-height: 34rem;
	box-shadow: var(--o-shadow-card);
}

.o-listing-page__back {
	margin: 0 0 var(--o-space-lg);
	color: var(--o-accent);
}

/* The chevrons point back the way the link goes. */
.o-listing-page__back .o-textlink:hover .o-textlink__chevrons,
.o-listing-page__back .o-textlink:focus-visible .o-textlink__chevrons {
	transform: translateX(-0.25em);
}

/* --------------------------------------------------------------------------
   The modal
   -------------------------------------------------------------------------- */
.o-listing-modal {
	position: fixed;
	inset: 0;
	z-index: var(--o-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.75rem, 3vw, 3rem);
}

/*
 * The blur is the scrim's job, not the dialog's: the dialog is a sibling
 * painted over it, so it stays sharp while everything behind goes soft.
 * Browsers without backdrop-filter simply get the tint.
 */
.o-listing-modal__scrim {
	position: absolute;
	inset: 0;
	background-color: var(--o-scrim);
	backdrop-filter: blur(14px) saturate(120%);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	opacity: 0;
	transition: opacity var(--o-transition-slow);
}

.o-listing-modal__dialog {
	position: relative;
	width: min(1600px, 100%);
	height: min(700px, 100%);   /* 16:9, as the comp draws it */
	overflow: hidden;
	background-color: var(--o-white);
	box-shadow: var(--o-shadow-modal);
	opacity: 0;
	transform: translateY(1.5rem) scale(0.985);
	transition: opacity var(--o-transition-slow), transform var(--o-transition-slow);
}

.o-listing-modal.is-open .o-listing-modal__scrim {
	opacity: 1;
}

.o-listing-modal.is-open .o-listing-modal__dialog {
	opacity: 1;
	transform: none;
}

.o-listing-modal__stage,
.o-listing-modal .o-listing {
	height: 100%;
}

/* --------------------------------------------------------------------------
   Close
   Its right edge sits on the end of the copy, not in the corner of the
   dialog - which is why it reads as belonging to the white column rather than
   floating over the whole thing. See --o-listing-pad-x above.
   -------------------------------------------------------------------------- */
.o-listing-modal__close {
	position: absolute;
	top: var(--o-listing-close-y);
	right: var(--o-listing-pad-x);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--o-navy);
	cursor: pointer;
	transition: color var(--o-transition), background-color var(--o-transition);
}

.o-listing-modal__close:hover,
.o-listing-modal__close:focus-visible {
	color: var(--o-accent);
}

.o-listing-modal__close-glyph {
	display: block;
	width: 32px;
	height: 32px;
}

/* The shared glyph is drawn heavier than this one; thin it back to the 2px
   the comp uses at this size. */
.o-listing-modal__close-glyph path {
	stroke-width: 1.5;
}

/* --------------------------------------------------------------------------
   Stacked
   Below the split the photograph sits above the copy, the panel itself takes
   over the scrolling, and the close control moves onto the photograph - so it
   stops being navy on white and becomes a disc, like the arrows.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.o-listing {
		display: block;
	}

	.o-listing__media {
		aspect-ratio: 3 / 2;
	}

	.o-listing__detail {
		overflow: visible;
	}

	.o-listing__nav {
		width: 48px;
		height: 48px;
	}

	.o-listing__nav--prev {
		left: 1rem;
	}

	.o-listing__nav--next {
		right: 1rem;
	}

	.o-listing-modal .o-listing {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.o-listing-modal__close {
		top: 1rem;
		right: 1rem;
		background-color: var(--o-white);
		box-shadow: var(--o-shadow-float);
	}

	.o-listing--page {
		min-height: 0;
	}
}