/*
 * Murex Resorts — homepage sections 1-3 (HOMEPAGE-SPEC §3.1-§3.3)
 * Hero · Passport to Paradise band · Explore the ocean.
 * Semantic tokens and the spacing / type / radius scales only; no literal colours or arbitrary lengths.
 */

/* Sections own their vertical rhythm; the constrained layout's block gap between them is reset. */
.wp-site-blocks main.is-flush > * {
	margin-block: 0;
}

/* Inside our sections WordPress flow-layout margins are reset; spacing is owned by the gaps below. */
:is(.c-hero, .c-passport, .c-ocean) .wp-block-group > *,
:is(.c-hero, .c-passport, .c-ocean) .wp-block-buttons > * {
	margin-block: 0;
}

:is(.c-hero, .c-passport, .c-ocean) :is(h1, h2, h3, p) {
	margin-block: 0;
}

:is(.c-hero, .c-passport, .c-ocean) .wp-block-image {
	margin: 0;
}

/* ================================================================ 1. Hero */
.c-hero {
	padding-block: var(--space-2xl) var(--space-lg);
	/*
	 * Measured from Figma frame 10924:20615: the hero copy column is ~907px — wider than the 68ch
	 * body measure (--body-measure, ≈688px) that applies to body copy everywhere else. The browser's
	 * 3-line display headline ("Dive. Snorkel. Explore.") measures 908.9px at 64px, so the measure is
	 * nudged to 909px to keep the headline on its three authored lines. Scoped to the hero intro only;
	 * the 68ch rule is untouched globally. See the Open Question in docs/ai/AI-INSTRUCTIONS.md.
	 */
	--hero-copy-measure: 909px;
}

.c-hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
}

.c-hero__intro {
	align-items: center;
}

.c-hero__copy {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.c-hero__copy.u-text-center {
	align-items: center;
	text-align: center;
}

.c-hero__copy.u-text-center .c-hero__cta {
	justify-content: center;
}

/* display / Josefin 700 / uppercase (base.css h1 rule) — extra class keeps this above the theme.json h1 element style. */
.c-hero .c-hero__copy .t-display {
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-heading);
}

/* Award marks (PADI 66x74 + Tripadvisor 80x80): a 162x80 group with a 16px gap, bottom-aligned.
   The artwork is already the reference grey, so it renders at full opacity — no grey filter or
   reduced opacity is stacked on top of it. */
.c-hero__awards {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-base);
}

.c-award img {
	inline-size: auto;
	block-size: auto;
}

/* Media block: radius/xl, scrim/bottom, stats card bottom-left, play control. */
.c-hero__media {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-xl);
	background-color: var(--color-surface-subtle);
}

.c-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--scrim-bottom);
	pointer-events: none;
}

.c-hero__img {
	position: absolute;
	inset: 0;
}

.c-hero__img img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.c-hero__stats {
	position: absolute;
	z-index: 2;
	inset-inline: var(--space-base);
	inset-block-end: var(--space-base);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-base) var(--space-xl);
	padding: var(--space-base) var(--space-lg);
	border-radius: var(--radius-base);
	background-color: var(--scrim-flat);
	color: var(--color-text-on-brand);
}

.c-stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.c-stat .c-stat__value {
	font-family: var(--font-josefin);
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-heading);
}

.c-stat .c-stat__label {
	font-family: var(--font-josefin);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	line-height: var(--lh-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}

/* Play control: a Button block whose label is hidden and replaced by ic-play-button.svg. */
.c-hero__play {
	position: absolute;
	z-index: 2;
	inset-block-start: var(--space-base);
	inset-inline-end: var(--space-base);
}

.c-play .wp-block-button__link {
	inline-size: var(--space-3xl);
	block-size: var(--space-3xl);
	padding: 0;
	border-color: transparent;
	background: var(--scrim-flat) url('../svg/ic-play-button.svg') center / 80% no-repeat;
	color: transparent;
	font-size: 0;
}

.c-play .wp-block-button__link:hover {
	background-color: var(--color-surface-brand);
	color: transparent;
}

@media (min-width: 768px) {
	.c-hero__media {
		aspect-ratio: 32 / 15; /* 1280 x 600 */
	}

	.c-hero__stats {
		inset-inline: auto;
		inset-inline-start: var(--space-lg);
		inset-block-end: var(--space-lg);
	}

	.c-hero__play {
		inset-block: auto var(--space-lg);
		inset-inline-end: var(--space-lg);
	}
}

@media (min-width: 1024px) {
	.c-hero__copy {
		grid-column: 1 / span 9;
		max-inline-size: var(--hero-copy-measure);
	}

	/* Figma renders the intro across the whole copy column, not the 68ch cap; lifting the cap here
	   is scoped to the hero (see the Open Question in AI-INSTRUCTIONS.md). */
	.c-hero .c-hero__copy p {
		max-inline-size: 100%;
	}

	/* Higher specificity than the flow-layout margin reset above (which zeroes every group child). */
	.c-hero .c-hero__awards {
		grid-column: 10 / -1;
		justify-self: end;
		align-self: start;
		/* Figma 10924:20615: the two marks are level with the headline's lower line — the group's
		   bottom sits on the H1's bottom. The H1 is a fixed 3-line display block at lg, so offset the
		   group by its height and pull it back up by its own height, keeping the bottom on that line. */
		margin-block-start: calc(3 * var(--fs-display) * var(--lh-display));
		transform: translateY(-100%);
	}
}

/* ================================================================ 2. Passport to Paradise */
.c-passport {
	/* Positioning context for the boat geometry: home.js reads map.offsetTop from here, which stays
	   stable while the map is stuck (position: sticky). */
	position: relative;
	overflow-x: clip;
	/*
	 * Figma frame 1229: the section is 949 tall — 48px top, the 167px head, the 646px map, then a
	 * 48px bottom rhythm. The head-to-map gap is 40px in the frame (head bottom 215 -> map top 255),
	 * i.e. space/2xl minus space/sm. The map is the last child, so this gap only applies there.
	 */
	--passport-head-gap: calc(var(--space-2xl) - var(--space-sm));
	/*
	 * Map Animation tunables (owner-defined; see HOMEPAGE-SPEC §3.2 and the Map Animation decision in
	 * ARCHITECTURE.md). home.js reads them from this section, so each has a single source.
	 *  - --p2p-runway: the pinned scroll runway; 0 until the pin breakpoint below meets the JS-added
	 *    `.is-p2p-pinned` class, which turns it into one-and-a-half viewports. The runway is the
	 *    SECTION's generated ::after, a sibling of the sticky `.c-passport__inner`, so the whole
	 *    visible block is frozen while the scroll input drives the boat.
	 *  - --p2p-depart: the dwell, now 0 — the normal scrolling that brings the map to the centre of the
	 *    view replaces it, so scroll during the freeze moves the boat immediately and one-to-one.
	 *  - --p2p-pin-top: set by home.js from a measurement; it places the map's centre on the viewport's
	 *    centre when the pin engages. Defined here only as a pre-JS default (the class is what enables it).
	 */
	--p2p-runway: 0px;
	--p2p-depart: 0;
	--p2p-pin-top: 0px;
	padding-block: var(--space-2xl);
}

.c-passport__inner {
	display: flex;
	flex-direction: column;
	gap: var(--passport-head-gap);
}

.c-passport__title,
.c-passport__aside {
	grid-column: 1 / -1;
}

.c-passport__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-lg);
}

@media (min-width: 1024px) {
	.c-passport__title {
		grid-column: 1 / span 7;
	}

	.c-passport__aside {
		grid-column: 8 / -1;
	}
}

/*
 * Map: the 1281x646 artwork at full content width, left-aligned (Figma frame 1229: x80 y255, 1281x646).
 * The boat overlay and the stamp share this box, so both stay registered to the artwork at every width.
 * The intrinsic dimensions are the asset's, so the artwork is never distorted; there is no radius — the
 * artwork is a white rectangle on the white page and COMPONENTS.md defines no map radius.
 */
.c-map {
	--map-w: 1281;
	--map-h: 646;
	--stamp-w: 332;
	/* The stamp sits 26px above the map's top edge (frame: stamp y229, map y255) = space/lg + space/xs/2. */
	--stamp-overlap: calc(var(--space-lg) + (var(--space-xs) / 2));
	position: relative;
	inline-size: 100%;
	max-inline-size: 100%;
	/* Inline-size query container: the hotspot popups use cqw to clamp themselves to this box. */
	container-type: inline-size;
}

.c-map__img img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: var(--map-w) / var(--map-h); /* reserves the box before load — no layout shift */
}

/* Boat overlay: one coordinate space with the map (same viewBox), absolutely positioned over the image. */
.c-map__boat {
	position: absolute;
	inset: 0;
	z-index: 2;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
	pointer-events: none;
}

/* The sprite is centred on its transform origin by the -17/-25 offsets in the markup; home.js only moves it. */

/* Passport stamp: overlaps the map's top-left corner, 332x192, painted above the map (frame x80 y229). */
.c-map__stamp {
	position: absolute;
	z-index: 3;
	inset-block-start: calc(-1 * var(--stamp-overlap));
	inset-inline-start: 0;
	inline-size: calc(var(--stamp-w) / var(--map-w) * 100%);
	pointer-events: none;
}

.c-map__stamp img {
	inline-size: 100%;
	block-size: auto;
}

/*
 * Pinned scroll runway — only where the map actually fits below the stuck header, and only once
 * home.js has measured and added `.is-p2p-pinned`. The whole visible block (head + map) is frozen by
 * making `.c-passport__inner` sticky and giving the SECTION a generated runway after it, so scrolling
 * stops moving the page while the scroll input drives the boat. Native `position: sticky` only — no
 * scroll-jacking, so keyboard, trackpad, touch and assistive-tech scrolling keep working (the
 * scrollbar advances during the freeze; that is expected). Without JS the class is absent, so there
 * is no pin, no runway and no freeze.
 *
 * `--p2p-pin-top` is negative in practice: `(100vh − mapH) / 2 − (map offset inside __inner)`. The
 * head's height is not knowable in CSS, so home.js measures it once at init and on resize and sets
 * the property; the rules below are gated on the class JS adds after that measurement.
 */
@media (min-width: 1024px) and (min-height: 820px) {
	.c-passport.is-p2p-pinned {
		--p2p-runway: 150vh;
	}

	.c-passport.is-p2p-pinned .c-passport__inner {
		position: sticky;
		top: var(--p2p-pin-top);
	}

	.c-passport.is-p2p-pinned::after {
		content: "";
		display: block;
		block-size: var(--p2p-runway);
	}
}

/* Reduced motion: no pin and no runway at any width; the boat is parked at the route start by home.js. */
@media (prefers-reduced-motion: reduce) {
	.c-passport {
		--p2p-runway: 0px;
	}

	.c-passport::after {
		content: none;
	}

	.c-passport__inner {
		position: relative;
		top: auto;
	}
}

/*
 * Hotspots — <details>/<summary>: focusable, Enter/Space toggles, expanded state exposed natively. Static
 * composition only: no transitions. Marker positions come from the `pins` in inc/p2p-route.json (the 1281x646
 * artwork space): manado 385,576 · bangka 774,117 · lembeh 898,560.
 */
.c-hotspot {
	/*
	 * Marker position, as a percentage number (not a percentage string) so the popup can do
	 * arithmetic on it: `calc(var(--y) * 1%)` places the marker, and `--y` also drives the
	 * below/above decision (see .c-hotspot__popup at md+) without any per-slug exception.
	 */
	--x: 50;
	--y: 50;
	/* Intrinsic width of the map-card artwork (212px, HOMEPAGE-SPEC §3.2). Sizes the card and,
	 * with the popup's --space-sm padding, gives the exact width the horizontal clamp uses. */
	--hotspot-img-w: 212px;
	--hotspot-w: calc(var(--hotspot-img-w) + 2 * var(--space-sm));
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.c-hotspot--manado {
	--x: 30.05;
	--y: 89.16;
}

.c-hotspot--bangka {
	--x: 60.42;
	--y: 18.11;
}

.c-hotspot--lembeh {
	--x: 70.10;
	--y: 86.69;
}

/*
 * The map artwork already paints the destination pin (a solid brand/primary donut, ~26px, white centre,
 * no shadow, no chip). The marker must NOT paint over it: at rest it is a transparent, focusable
 * hit area centred on the pin. The label text stays in the DOM as the accessible name but is not
 * rendered visually. The visible focus ring comes from the global :focus-visible rule (border/focus,
 * 2px, offset 2px) and is never removed.
 */
.c-hotspot > summary {
	position: absolute;
	z-index: 3;
	inset-inline-start: calc(var(--x) * 1%);
	inset-block-start: calc(var(--y) * 1%);
	translate: -50% -50%;
	display: block;
	inline-size: var(--touch-target);
	block-size: var(--touch-target);
	min-block-size: var(--touch-target);
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--radius-full);
	background: none;
	box-shadow: none;
	color: transparent;
	list-style: none;
	cursor: pointer;
}

.c-hotspot > summary::-webkit-details-marker {
	display: none;
}

/*
 * The open state is carried by the popup card (image + title + text + Explore), which appears on
 * toggle; the marker itself stays transparent. The frame defines no open-state pin, so no marker
 * open-state visual is invented here — logged as an Open Question in AI-INSTRUCTIONS.md.
 */

/* Popup card: below md it is a bottom sheet over the map (no image); md+ it anchors to the marker. */
.c-hotspot__popup {
	position: absolute;
	z-index: 4;
	inset-inline: var(--space-sm);
	inset-block-end: var(--space-sm);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-base);
	border-radius: var(--radius-base);
	background-color: var(--color-surface-page);
	box-shadow: var(--elevation-3);
	color: var(--color-text-primary);
}

.c-hotspot__img {
	display: none;
}

.c-hotspot__popup .c-hotspot__title {
	font-family: var(--font-roboto);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
}

.c-hotspot__popup .c-hotspot__text {
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
}

@media (min-width: 768px) {
	.c-hotspot {
		position: absolute;
		z-index: 3;
		inset-inline-start: calc(var(--x) * 1%);
		inset-block-start: calc(var(--y) * 1%);
		inline-size: 0;
		block-size: 0;
	}

	.c-hotspot > summary {
		inset: 0;
	}

	.c-hotspot__popup {
		/*
		 * Position-aware anchoring, derived from --y alone (no JS, no per-slug exception):
		 *  - a pin in the LOWER half (--y > 50: Manado, Lembeh) opens its card ABOVE the pin;
		 *    a pin in the UPPER half (Bangka) opens it below. `--anchor-above` is 1 for the
		 *    lower half and 0 otherwise. The card starts --space-2xl below the pin and, when
		 *    the flag is set, is translated up by its own height plus two gaps, landing a gap
		 *    above the pin.
		 *  - the card is clamped to the map's horizontal box so it can never overhang the left
		 *    or right edge. `--pin-x` is the pin's x in cqw (`.c-map` is the inline-size query
		 *    container), and the clamp keeps the card's left edge within
		 *    [0, map width − card width].
		 */
		--anchor-above: clamp(0, (var(--y) - 50) * 999, 1);
		--pin-x: calc(var(--x) * 1cqw);
		inset: calc(100% + var(--space-2xl)) auto auto 0;
		translate:
			clamp(
				calc(-1 * var(--pin-x)),
				calc(-0.5 * var(--hotspot-w)),
				calc(100cqw - var(--hotspot-w) - var(--pin-x))
			)
			calc(var(--anchor-above) * (-100% - 2 * var(--space-2xl)));
		inline-size: var(--hotspot-w);
		padding: var(--space-sm);
		gap: var(--space-md);
	}

	.c-hotspot__popup > :not(.c-hotspot__img) {
		padding-inline: var(--space-sm);
	}

	.c-hotspot__img {
		display: block;
	}

	/* Popup image keeps its 212 x 162 intrinsic size; the card width is --hotspot-w for the clamp. */
	.c-hotspot__img img {
		max-inline-size: none;
		border-radius: var(--radius-sm);
	}
}

/* ================================================================ 3. Explore the ocean */
.c-ocean__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-base);
	margin-block-end: var(--space-xl);
}

.c-tabs {
	flex-wrap: wrap;
	margin-block-start: var(--space-base);
}

/* Inactive tab = outline pill; active tab = solid brand pill (the default core button). */
.c-tab:not(.is-active) > .wp-block-button__link {
	background-color: transparent;
	border-color: var(--color-border-strong);
	color: var(--color-text-link);
}

.c-tab:not(.is-active) > .wp-block-button__link:hover {
	background-color: color-mix(in srgb, currentColor 10%, transparent);
	color: var(--color-text-link);
}

/* Card row: full-bleed, no gutter. Below lg the cards stack; lg+ the expanded card takes ~2.58x a collapsed one (663 : 257). */
.c-ocean__row {
	display: flex;
	flex-direction: column;
}

.c-tour-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 669 / 705;
	background-color: var(--color-surface-subtle);
	color: var(--color-text-on-brand);
}

.c-tour-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--scrim-bottom);
	pointer-events: none;
}

.c-tour-card__img {
	position: absolute;
	inset: 0;
}

.c-tour-card__img img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.c-tour-card__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-md);
	inline-size: 100%;
	padding: var(--space-lg);
}

.c-tour-card .c-tour-card__title {
	color: inherit;
	font-family: var(--font-josefin);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-heading);
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.c-tour-card .c-tour-card__text {
	display: none;
	color: inherit;
}

/* Explore link sits on the scrim: brand/accent is legible there (graphic/background rule in COLORS.md §3.3 — see deviation log). */
.c-tour-card .c-link-arrow a {
	color: var(--color-surface-accent);
}

@media (min-width: 1024px) {
	.c-ocean__row {
		flex-direction: row;
		/*
		 * Pin the row's height to the expanded card's height so the row never shifts while the
		 * expanded card changes on hover/focus. For a fixed set of visible cards the expanded track is
		 * always 2.58 grow and the rest 1 grow, so its width — and therefore its height via 669/705 —
		 * is constant whether the default, the hovered or a focused card is the expanded one. The ratio
		 * below is derived from those same numbers. Visible-card counts: 4 -> 2.0525, 3 -> 1.6847,
		 * 2 -> 1.3169, 1 -> 0.9490; the :has() rules switch it for a filtered row.
		 */
		aspect-ratio: calc( ( 2.58 + 3 ) / ( 2.58 * 705 / 669 ) );
	}

	.c-ocean__row:has(.c-tour-card[hidden]) {
		aspect-ratio: calc( ( 2.58 + 2 ) / ( 2.58 * 705 / 669 ) );
	}

	.c-ocean__row:has(.c-tour-card[hidden] ~ .c-tour-card[hidden]) {
		aspect-ratio: calc( ( 2.58 + 1 ) / ( 2.58 * 705 / 669 ) );
	}

	.c-ocean__row:has(.c-tour-card[hidden] ~ .c-tour-card[hidden] ~ .c-tour-card[hidden]) {
		aspect-ratio: calc( ( 2.58 + 0 ) / ( 2.58 * 705 / 669 ) );
	}

	/*
	 * Every card hidden (a tab that matches no card, e.g. the Other catch-all with no such labels):
	 * collapse the row so it leaves no stray gap and no collapsed leftover width. `aspect-ratio: auto`
	 * plus all children `display:none` gives the row zero height.
	 */
	.c-ocean__row:has(.c-tour-card[hidden] ~ .c-tour-card[hidden] ~ .c-tour-card[hidden] ~ .c-tour-card[hidden]) {
		aspect-ratio: auto;
	}

	.c-tour-card {
		/*
		 * Text stagger: the description + Explore link wait --hover-delay (the hover-intent pause)
		 * plus one faster step — by then the slow width change is mostly done, so the copy does not
		 * pop out of a narrow card. Exit has no delay, so the text leaves first.
		 */
		--card-text-delay: calc(var(--hover-delay) + var(--transition-base));
		flex: 1 1 0;
		min-inline-size: 0;
		aspect-ratio: auto;
		/* The width change is the slow, deliberate rebalance; the title/text use the faster step. */
		transition: flex-grow var(--transition-slow) var(--ease-out);
	}

	.c-tour-card .c-tour-card__title {
		transition: font-size var(--transition-base) var(--ease-out);
	}

	/*
	 * Collapsed description: kept in the DOM — so its opacity can transition — but out of flow,
	 * transparent and non-interactive, so it neither shifts the collapsed card's layout nor
	 * intercepts the Explore link.
	 */
	.c-tour-card .c-tour-card__text {
		display: block;
		position: absolute;
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--transition-fast) var(--ease-out);
	}

	/* Collapsed Explore link: still in the DOM/focusable (clip rules below), but faded out. */
	.c-tour-card .c-tour-card__more {
		opacity: 0;
		transition: opacity var(--transition-fast) var(--ease-out);
	}
}

/*
 * Hover / focus expansion — hover-capable devices only. Hovering a card expands it exactly like the
 * authored `is-expanded` card (same flex-grow, title size, revealed text + Explore link). A card that
 * holds keyboard focus (`:focus-within`) expands the same way, and focus wins over hover. When any
 * card is hovered or focused the default expanded card collapses, so the row always shows exactly one
 * expanded card. On devices without hover none of this applies (see the no-hover block below).
 */
@media (min-width: 1024px) and (hover: hover) {
	.c-tour-card:focus-within,
	.c-ocean__row:not(:has(.c-tour-card:focus-within)) .c-tour-card:hover,
	.c-ocean__row:not(:has(.c-tour-card:focus-within)):not(:has(.c-tour-card:hover)) .c-tour-card.is-expanded {
		flex-grow: 2.58;
		aspect-ratio: 669 / 705;
	}

	:is(
		.c-tour-card:focus-within,
		.c-ocean__row:not(:has(.c-tour-card:focus-within)) .c-tour-card:hover,
		.c-ocean__row:not(:has(.c-tour-card:focus-within)):not(:has(.c-tour-card:hover)) .c-tour-card.is-expanded
	) .c-tour-card__title {
		font-size: var(--fs-h2);
	}

	:is(
		.c-tour-card:focus-within,
		.c-ocean__row:not(:has(.c-tour-card:focus-within)) .c-tour-card:hover,
		.c-ocean__row:not(:has(.c-tour-card:focus-within)):not(:has(.c-tour-card:hover)) .c-tour-card.is-expanded
	) .c-tour-card__text {
		position: static;
		max-inline-size: var(--body-measure);
		opacity: 1;
		pointer-events: auto;
	}

	:is(
		.c-tour-card:focus-within,
		.c-ocean__row:not(:has(.c-tour-card:focus-within)) .c-tour-card:hover,
		.c-ocean__row:not(:has(.c-tour-card:focus-within)):not(:has(.c-tour-card:hover)) .c-tour-card.is-expanded
	) .c-tour-card__more {
		opacity: 1;
	}

	/*
	 * Hover intent — the width and the title wait --hover-delay before starting. Only the hover
	 * ENTRY is delayed: the collapsed rules above are the exit target and carry no delay, and
	 * `:focus-within` is excluded, so a collapse and keyboard focus both start at once.
	 */
	.c-ocean__row:not(:has(.c-tour-card:focus-within)) .c-tour-card:hover {
		transition-delay: var(--hover-delay);
	}

	.c-ocean__row:not(:has(.c-tour-card:focus-within)) .c-tour-card:hover .c-tour-card__title {
		transition-delay: var(--hover-delay);
	}

	/*
	 * Text stagger — the description and the Explore link fade in only after the card has mostly
	 * finished growing. On leave there is no delay, so the copy is gone before the card finishes
	 * narrowing. Focus is excluded, so keyboard activation reveals the copy immediately.
	 */
	.c-ocean__row:not(:has(.c-tour-card:focus-within)) .c-tour-card:hover .c-tour-card__text,
	.c-ocean__row:not(:has(.c-tour-card:focus-within)) .c-tour-card:hover .c-tour-card__more {
		transition-delay: var(--card-text-delay);
	}

	/*
	 * While a card in the row is hovered, every other card waits the same intent pause before it
	 * collapses. Without this, flexbox redistributes the outgoing card's shrinking space into the
	 * incoming card immediately, so the ~140ms settle would not be visible on the entered card.
	 * Leaving the row entirely (no row `:hover`) still collapses promptly, and `:focus-within` is
	 * excluded, so keyboard focus is never delayed.
	 */
	.c-ocean__row:not(:has(.c-tour-card:focus-within)):hover .c-tour-card:not(:hover) {
		transition-delay: var(--hover-delay);
	}

	/*
	 * Collapsed cards show badge + title only. The Explore link stays in the tab order — visually
	 * clipped, never `display:none` / `visibility:hidden`, either of which would remove it — so a
	 * keyboard user can tab to it; focusing it expands the card and reveals it.
	 */
	.c-ocean__row:has(.c-tour-card:focus-within) .c-tour-card:not(:focus-within) .c-tour-card__more a,
	.c-ocean__row:not(:has(.c-tour-card:focus-within)):has(.c-tour-card:hover) .c-tour-card:not(:hover) .c-tour-card__more a,
	.c-ocean__row:not(:has(.c-tour-card:focus-within)):not(:has(.c-tour-card:hover)) .c-tour-card:not(.is-expanded) .c-tour-card__more a {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		min-block-size: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/*
 * No-hover devices (`@media not (hover: hover)` — touch / coarse pointer): nothing may sit behind a
 * hover. Extend the existing stacked layout — one full-width column with badge + title + text +
 * Explore always visible on every card. Documented deviation from Figma 10924:20658, which only draws
 * the collapsed/expanded pair.
 */
@media not (hover: hover) {
	.c-ocean__row,
	.c-ocean__row:has(.c-tour-card[hidden]),
	.c-ocean__row:has(.c-tour-card[hidden] ~ .c-tour-card[hidden]),
	.c-ocean__row:has(.c-tour-card[hidden] ~ .c-tour-card[hidden] ~ .c-tour-card[hidden]) {
		flex-direction: column;
		aspect-ratio: auto;
	}

	.c-tour-card {
		flex: 0 0 auto;
		aspect-ratio: 669 / 705;
		transition: none;
	}

	.c-tour-card .c-tour-card__title {
		transition: none;
	}

	.c-tour-card .c-tour-card__text {
		display: block;
		position: static;
		max-inline-size: var(--body-measure);
		opacity: 1;
		pointer-events: auto;
		transition: none;
	}

	.c-tour-card .c-tour-card__more {
		opacity: 1;
		transition: none;
	}

	.c-tour-card .c-tour-card__more a {
		position: static;
		inline-size: auto;
		block-size: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}
}

.c-ocean__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-lg);
	margin-block-start: var(--space-2xl);
}

.c-ocean__foot .wp-block-buttons {
	justify-content: center;
}

/* Shown by home.js only when the selected tab has no cards. */
.c-ocean__empty {
	display: none;
	text-align: center;
	color: var(--color-text-muted);
}

.c-ocean__empty.is-visible {
	display: block;
}