/* ==========================================================================
   Widget — Directory (Search + Filter Grid)
   Figma nodes 54:25 (search band) and 55:25 (card grid).

   Two bands in one section, because they are one experience: the pale blue
   band on the foam field carries the search and the pills, the white band
   below carries the results. The section itself is full bleed with no padding
   so each band can own its own background and its own container.

   Everything the filter animation touches is listed under "Filtering" at the
   bottom. The rest of this file is the static design.
   ========================================================================== */

.o-directory {
	--o-directory-save: var(--o-red);   /* The red chip behind the heart. */
	--o-directory-anim: 380ms;

	position: relative;
}

/* --------------------------------------------------------------------------
   The search band
   -------------------------------------------------------------------------- */
.o-directory__band {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 2rem + 3vw, 6.5rem) clamp(2.5rem, 1.75rem + 2.5vw, 6rem);
}

.o-directory__band-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

/*
 * The wave pattern: the shared .o-pattern (components.css) across the right
 * of the band, strongest in the lower corner, at 35%.
 */
.o-directory__pattern {
	left: 45%;
	opacity: 0.35;
}

/* --------------------------------------------------------------------------
   Title lockup
   -------------------------------------------------------------------------- */
.o-directory__lockup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--o-space-md);
	max-width: 42rem;
	text-align: center;
}

.o-directory__title {
	margin: 0;
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-bold);
	font-size: clamp(2rem, 1.2rem + 3.4vw, 3.375rem); /* 32 -> 54, per the comp */
	line-height: 1.05;
	letter-spacing: 0;
	text-transform: uppercase;
}

.o-directory__intro {
	margin: 0;
	color: var(--o-text-soft);
	font-size: var(--o-fs-body-lg);
	line-height: var(--o-lh-body);
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Search bar
   A borderless white box with the field flush inside it and the orange button
   inset by 8px. 760 wide at desktop, full width below.
   -------------------------------------------------------------------------- */
.o-directory__search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: min(100%, 760px);
	/* 64 tall overall: 8px inset, the 48px button, 8px. No border - the white
	   box sits straight on the pale blue band. */
	padding: 8px 8px 8px 1.5rem;
	border: 0;
	background-color: var(--o-white);
}

/* With no border to recolour, focus shows as an orange ring instead. */
.o-directory__search:focus-within {
	outline: 2px solid var(--o-orange);
	outline-offset: 0;
}

.o-directory__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--o-navy);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body-lg);
	line-height: 1.4;
}

.o-directory__field::placeholder {
	color: #8c94a3;
	opacity: 1;
}

.o-directory__field:focus {
	outline: none;
}

/* The native clear affordance, so it does not inherit the navy field colour. */
.o-directory__field::-webkit-search-cancel-button {
	cursor: pointer;
}

.o-directory__submit {
	flex: 0 0 auto;
	min-width: 120px;
	height: 48px;
	padding-inline: 1.25rem;
	border: 0;
	background-color: var(--o-orange);
	color: var(--o-white);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-body-lg);
	letter-spacing: 0.025em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--o-transition);
}

.o-directory__submit:hover,
.o-directory__submit:focus-visible {
	background-color: var(--o-orange-dark);
}

/* --------------------------------------------------------------------------
   Filter pills
   They wrap on narrow screens rather than scrolling: a directory can grow a
   dozen categories and a hidden pill is a hidden category.
   -------------------------------------------------------------------------- */
.o-directory__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	max-width: 100%;
}

.o-directory__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.5rem;
	border: 2px solid var(--o-navy);
	border-radius: var(--o-radius-pill);
	background-color: var(--o-white);
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-body);
	letter-spacing: 0.05em;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--o-transition),
		border-color var(--o-transition),
		color var(--o-transition);
		cursor: pointer;
}

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

.o-directory__pill.is-active {
	background-color: var(--o-navy);
	color: var(--o-white);
}

/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */
.o-directory__results {
	padding-block: clamp(2.5rem, 1.75rem + 2.5vw, 6rem);
	background-color: var(--o-white);
	color: var(--o-ink);
}

.o-directory__status {
	margin: 0 0 var(--o-space-md);
	color: var(--o-ink-soft);
	font-family: var(--o-font-ui);
	font-size: var(--o-fs-small);
	letter-spacing: var(--o-label-tracking-tight);
	text-transform: uppercase;
}

.o-directory__empty {
	margin: var(--o-space-lg) 0 0;
	max-width: 34rem;
	color: var(--o-ink-soft);
	font-size: var(--o-fs-body-lg);
	line-height: var(--o-lh-body);
}

.o-directory__grid {
	/* Fallbacks; Elementor writes both per breakpoint from the Grid controls. */
	--o-directory-cols: 1;
	--o-directory-gap: 48px;

	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--o-directory-cols), minmax(0, 1fr));
	align-items: start;
	gap: var(--o-directory-gap);
}

@media (min-width: 700px) {
	.o-directory__grid {
		--o-directory-cols: 2;
	}
}

@media (min-width: 1100px) {
	.o-directory__grid {
		--o-directory-cols: 3;
	}
}

/* --------------------------------------------------------------------------
   The card
   Not itself a link: it holds a save button and two links, so the name carries
   a stretched pseudo-element instead and the controls sit above it.
   -------------------------------------------------------------------------- */
.o-directory__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.o-directory__card[hidden] {
	display: none;
}

.o-directory__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;   /* 452 x 300 in the comp */
	background-color: var(--o-ice);
}

.o-directory__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--o-transition-slow);
}

.o-directory__card:hover .o-directory__img,
.o-directory__card:focus-within .o-directory__img {
	transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   Save button
   The red chip in the bottom corner of the photograph, with the tooltip the
   comp hides underneath it.
   -------------------------------------------------------------------------- */
.o-directory__save {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 85px;
	height: 76px;
	padding: 0;
	border: 0;
	background-color: var(--o-directory-save);
	color: var(--o-white);
	cursor: pointer;
	transition: background-color var(--o-transition);
}

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

.o-directory__save-glyph {
	display: block;
	width: 42px;
	height: 39px;
	transition: transform var(--o-transition);
}

/* Saved: the chip stays red and the heart fills in (components.css). */
.o-directory__save[aria-pressed="true"] .o-directory__save-glyph {
	transform: scale(1.12);
}

/*
 * The comp hangs the tooltip below the chip, where the media box would clip
 * it - which is why the comp only ever shows it at zero opacity. It sits above
 * the chip here instead, pointing down, so it is actually readable.
 */
.o-directory__save-tip {
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	max-width: 120px;
	padding: 0.5rem;
	background-color: var(--o-teal);
	color: var(--o-white);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body-lg);
	line-height: 1;
	opacity: 0;
	transform: translateX(-50%);
	pointer-events: none;
	transition: opacity var(--o-transition);
}

.o-directory__save-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 8px;
	height: 4px;
	background-color: var(--o-teal);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform: translateX(-50%);
}

.o-directory__save:hover .o-directory__save-tip,
.o-directory__save:focus-visible .o-directory__save-tip {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Card copy
   -------------------------------------------------------------------------- */
.o-directory__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-top: 1.5rem;
}

.o-directory__eyebrow {
	margin: 0;
	color: var(--o-teal);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-small);
	letter-spacing: 0.143em; /* 2px at 14px */
	line-height: 1.2;
	text-transform: uppercase;
}

.o-directory__name {
	margin: 0;
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.625rem); /* 22 -> 26 */
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

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

/*
 * The stretched link. It covers the whole card, so the two links below and the
 * save button raise themselves above it rather than being nested inside it.
 */
.o-directory__name-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/*
 * Once listing-modal.js has taken their hrefs away these are buttons, and an
 * anchor with no href stops looking like anything you can click.
 */
.o-directory__name-link[role="button"],
.o-directory__link[role="button"] {
	cursor: pointer;
}

.o-directory__card:hover .o-directory__name-link,
.o-directory__name-link:focus-visible {
	color: var(--o-orange);
}

.o-directory__name-link:focus-visible {
	outline: none;
}

/* The whole card is the target, so show the focus ring on the whole card. */
.o-directory__card:focus-within {
	outline: 3px solid var(--o-focus);
	outline-offset: 4px;
}

.o-directory__excerpt {
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	color: var(--o-navy);
	font-size: var(--o-fs-body);
	line-height: 1.5;
}

.o-directory__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding-top: 0.5rem;
}

.o-directory__link {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-body);
	letter-spacing: 0.028em; /* 0.45px at 16px */
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
}

.o-directory__link--details {
	color: var(--o-orange);
}

.o-directory__link--map {
	color: var(--o-teal);
}

.o-directory__chevrons {
	display: inline-block;
	transition: transform var(--o-transition);
}

.o-directory__link:hover .o-directory__chevrons,
.o-directory__link:focus-visible .o-directory__chevrons,
.o-directory__card:hover .o-directory__link--details .o-directory__chevrons {
	transform: translateX(0.25em);
}

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

/* --------------------------------------------------------------------------
   Filtering
   The script measures the grid before and after a filter change and animates
   the difference (a FLIP). It sets inline transform / height / transition
   values; everything here is the resting state those animate from and to.

   Cards on their way out are pulled out of flow and positioned where they
   already were, so the survivors can reflow underneath them immediately and
   the two movements happen at once instead of in sequence.
   -------------------------------------------------------------------------- */
.o-directory__card {
	transition:
		opacity var(--o-directory-anim) cubic-bezier(0.4, 0, 0.2, 1),
		transform var(--o-directory-anim) cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Nothing is clipped while the grid resizes - a card fading out below the new
 * height reads better than one sliced by a hard edge - but the grid stops
 * taking clicks, so a card sliding out from under the pointer cannot be hit.
 */
.o-directory__grid.is-animating {
	pointer-events: none;
}

.o-directory__card.is-leaving {
	z-index: 0;
	pointer-events: none;
}

.o-directory__card.is-gone {
	opacity: 0;
	transform: scale(0.96);
}

.o-directory__card.is-entering {
	opacity: 0;
	transform: translateY(10px) scale(0.98);
}

.o-directory__empty {
	transition: opacity var(--o-transition);
}

.o-directory__empty[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.o-directory__card,
	.o-directory__img,
	.o-directory__chevrons,
	.o-directory__save-glyph {
		transition: none;
	}

	.o-directory__card:hover .o-directory__img,
	.o-directory__card:focus-within .o-directory__img {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.o-directory__search {
		flex-wrap: wrap;
		min-height: 0;
		padding: 0.5rem;
	}

	.o-directory__field {
		flex: 1 0 100%;
		padding: 0.75rem 1rem;
	}

	.o-directory__submit {
		flex: 1 0 100%;
	}

	.o-directory__save {
		width: 64px;
		height: 58px;
	}

	.o-directory__save-glyph {
		width: 32px;
		height: 30px;
	}
}