/*
 * Murex Resorts — homepage sections 4-9 (HOMEPAGE-SPEC §3.4-§3.9)
 * Two resorts · Beyond the Reef · Conservation · Excellence (inverse) · Testimonials · FAQ.
 * Loads after home.css. Semantic tokens and the spacing / type / radius scales only — no literal colours,
 * no arbitrary lengths. Breakpoints follow RESPONSIVE.md (768 md, 1024 lg).
 */

/* Inside these sections WordPress flow-layout margins are reset; spacing is owned by the gaps below (as home.css). */
:is(.c-resorts, .c-reef, .c-conservation, .c-excellence, .c-testimonials, .c-faq) .wp-block-group > *,
:is(.c-resorts, .c-reef, .c-conservation, .c-excellence, .c-testimonials, .c-faq) .wp-block-buttons > * {
	margin-block: 0;
}

:is(.c-resorts, .c-reef, .c-conservation, .c-excellence, .c-testimonials, .c-faq) :is(h1, h2, h3, p, ul, blockquote, figure) {
	margin-block: 0;
}

:is(.c-resorts, .c-reef, .c-conservation, .c-excellence, .c-testimonials, .c-faq) .wp-block-image {
	margin: 0;
}

/* Centred section head (Beyond the Reef, Excellence, Testimonials). */
.c-section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-base);
	text-align: center;
}

.c-section-head p {
	margin-inline: auto;
}

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

/* ================================================================ 4. Two resorts */
.c-resorts__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
}

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

/* The two cards are one flush unit (Figma 10924:20675): no gap, rounded on the outside only. */
.c-resorts__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-none);
}

/* Image card: radius/base, text on the scrim. Below lg the card is taller and a flat scrim is added so the copy never sits on bare photography. */
.c-resort-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-base);
	background-color: var(--color-surface-subtle);
	color: var(--color-text-on-brand);
}

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

/* Per-card corners — rounded on the outside of the pair, square where the two meet.
   Logical properties so the pair mirrors correctly under RTL. */
.c-resort-card:first-child {
	border-start-start-radius: var(--radius-base);
	border-start-end-radius: var(--radius-base);
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.c-resort-card:last-child {
	border-start-start-radius: 0;
	border-start-end-radius: 0;
	border-end-start-radius: var(--radius-base);
	border-end-end-radius: var(--radius-base);
}

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

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

.c-resort-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);
}

/* Body groups (Figma 10924:20675). Below lg they stack in one column; the gaps reproduce the
   single-column rhythm that the flat body used before the groups were introduced. */
.c-resort-card__lede,
.c-resort-card__side {
	display: flex;
	flex-direction: column;
}

.c-resort-card__lede {
	gap: var(--space-md);
}

.c-resort-card__side {
	gap: var(--space-md);
}

.c-resort-card .c-resort-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-resort-card .c-resort-card__text {
	color: inherit;
}

/* Price line: Roboto, never uppercased (TYPOGRAPHY.md §4.4). The figure uses the `price` text style. */
.c-resort-card .c-resort-card__price {
	color: inherit;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-price);
}

.c-resort-card__price strong {
	font-size: var(--fs-price);
	font-weight: 700;
}

.c-resort-card .wp-block-buttons {
	margin-block-start: var(--space-sm);
}

@media (min-width: 1024px) {
	/* Native sticky only — no scroll-jacking (same precedent as the Passport-to-Paradise map).
	   The later card paints over the earlier one; a focused card is lifted so keyboard users
	   always see the link they are focusing. */
	.c-resort-card {
		position: sticky;
		top: 0;
		aspect-ratio: 1280 / 638;
	}

	.c-resort-card:first-child {
		z-index: 1;
	}

	.c-resort-card:last-child {
		z-index: 2;
	}

	.c-resort-card:focus-within {
		z-index: 3;
	}

	.c-resort-card::after {
		background: var(--scrim-bottom);
	}

	/* Two-column body (Figma 10924:20675): lede 580 + gap 157 + side 497 = 1234, i.e. 47.0% / 12.72% /
	   40.28% of the body. Expressed as ratios so they scale with the card. Children align to the bottom
	   (counterAxisAlignItems: MAX). The old `max-inline-size` half-container cap is removed here — it is
	   what held the body to one 640px column. */
	.c-resort-card__body {
		display: grid;
		grid-template-columns: 47% 40.28%;
		column-gap: 12.72%;
		align-items: end;
		padding: var(--space-xl);
	}

	.c-resort-card__lede {
		gap: var(--space-md);
	}

	/* Right column: children flush right (boxes), 16px gap; the price text inside its box stays left-aligned. */
	.c-resort-card__side {
		gap: var(--space-base);
		align-items: flex-end;
	}

	.c-resort-card__side .c-resort-card__price {
		text-align: left;
	}

	/* The 8px button offset must not add to the 16px column gap at lg+. */
	.c-resort-card .c-resort-card__side .wp-block-buttons {
		margin-block-start: 0;
	}

	.c-resort-card .c-resort-card__title {
		font-size: var(--fs-h2);
	}
}

/* ================================================================ 5. Beyond the Reef */
/* Card image and text column are one third of the 1140 content width (= 380, the Figma tile size). */
.c-reef {
	--reef-size: calc(var(--content-desktop) / 3);
	/*
	 * Inactive tile size. Owner instruction for this phase (2026-10-08): the active image is
	 * 380x380 and the inactive images are 300x300 at >=1024. 300 exists in neither the SPACING.md
	 * scale nor HOMEPAGE-SPEC.md §3.5 (which lists all three tiles as 380x380); the owner's value
	 * is authoritative here and the §3.5 conflict is logged in docs/ai/AI-INSTRUCTIONS.md. Named
	 * once so no raw 300 is scattered through the rules.
	 */
	--reef-size-inactive: 300px;
	--carousel-inset: max(var(--page-gutter), calc((100% - var(--container-max)) / 2));
}

.c-reef__head {
	margin-block-end: var(--space-2xl);
}

/* Horizontal overflow track: scroll-snap, swipe / trackpad / keyboard scroll natively. No autoplay. */
.c-carousel__track {
	display: flex;
	gap: var(--grid-gutter);
	padding-inline: var(--carousel-inset);
	scroll-padding-inline: var(--carousel-inset);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
}

.c-carousel.is-enhanced .c-carousel__track {
	scrollbar-width: none;
}

.c-carousel.is-enhanced .c-carousel__track::-webkit-scrollbar {
	display: none;
}

/* Mobile: one card at a time. */
.c-reef-card {
	flex: 0 0 100%;
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	scroll-snap-align: start;
}

.c-reef-card__img img {
	inline-size: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-base);
}

.c-reef-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-md);
}

/* The title style must survive the DOM move into the fixed panel (>=1024), where the card is no longer its
   ancestor, so the panel is added to the selector. */
:is(.c-reef-card, .c-reef__panel) .c-reef-card__title {
	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;
}

@media (min-width: 768px) {
	.c-reef-card {
		flex-basis: var(--reef-size);
	}
}

/* The fixed text panel exists only when JS has enhanced the carousel at >=1024. With JS off (or below
   1024) it is unused and hidden, so it takes no space and every card keeps its own body — the no-JS
   rendering is unchanged. */
.c-reef__panel {
	display: none;
}

/* lg+: the text column is a separate, fixed slot beside the images, and the track becomes a single
   transform-driven strip (sections.js). At this breakpoint the track is no longer a scroll container. */
@media (min-width: 1024px) {
	.c-reef-card {
		flex-direction: row-reverse;
		align-items: center;
		flex-basis: auto;
	}

	/* The body column keeps the 380 tile width; only the image changes size, so the text column
	   never shrinks with the inactive image. */
	.c-reef-card__body {
		flex: none;
		inline-size: var(--reef-size);
	}

	.c-reef-card__img {
		flex: none;
		inline-size: var(--reef-size);
	}

	/* The fixed slot: a 380x380 box at the container's left inset, level with the image row (its vertical
	   centre equals the images' vertical centre). It stays in flow so it can carry `position: relative` and
	   an opaque page-surface background; the track is pulled back up over its band by a negative block-start
	   margin, and the track's larger start padding keeps the images clear of it. The opaque background also
	   hides the outgoing active card as it slides out to the left. */
	.c-carousel.is-enhanced .c-reef__panel {
		display: block;
		position: relative;
		z-index: 1;
		inline-size: var(--reef-size);
		block-size: var(--reef-size);
		margin-inline-start: var(--carousel-inset);
		background-color: var(--color-surface-page);
	}

	/*
	 * Single-track geometry (enhanced only). Every card is laid out at the inactive width (300) on a uniform
	 * pitch of 300 + gutter; the active card's 380 and the extra 80px it takes are realised by transforms,
	 * never by a layout property. `--reef-lift` (380 − 300) shifts every card after the active one so the
	 * visual gaps stay exactly one gutter; `--reef-scale` (380/300) grows the active card about its left edge
	 * so the following cards do not move. Both rest states live here; sections.js writes the same two values
	 * as inline transforms during travel, so the resting and animating geometry cannot drift.
	 */
	.c-carousel.is-enhanced {
		--reef-lift: calc(var(--reef-size) - var(--reef-size-inactive));
		--reef-scale: calc(var(--reef-size) / var(--reef-size-inactive));
	}

	.c-carousel.is-enhanced .c-reef-card {
		flex: 0 0 var(--reef-size-inactive);
		transform-origin: left center;
		transform: translateX(var(--reef-lift)) scale(1);
	}

	.c-carousel.is-enhanced .c-reef-card.is-active {
		transform: translateX(0) scale(var(--reef-scale));
	}

	.c-carousel.is-enhanced .c-reef-card__img {
		inline-size: 100%;
	}

	/* The strip: the track itself is the moving unit, so it is no longer a scroll container here. The
	   `scroll-snap` / `overscroll-behavior` / `scroll-padding` that only existed to drive the native
	   scroller are dropped at this breakpoint; below 1024 they still apply. */
	.c-carousel.is-enhanced .c-carousel__track {
		margin-block-start: calc(-1 * var(--reef-size));
		block-size: var(--reef-size);
		align-items: center;
		padding-inline-start: calc(var(--carousel-inset) + var(--reef-size) + var(--grid-gutter));
		overflow: hidden;
		overscroll-behavior-x: auto;
		scroll-snap-type: none;
		scroll-padding-inline-start: 0;
	}

	/* Bodies are stacked at the same position in the slot. Inactive ones are hidden (`visibility`, so they
	   are neither focusable nor in the accessibility tree); only the active one is visible. The three
	   elements inside it animate individually (below); the boxes never move. `sections.js` moves each card's
	   own body here. */
	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__body {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		justify-content: center;
		visibility: hidden;
	}

	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__body.is-active {
		visibility: visible;
	}
}

/* Single-track motion (>=1024, motion allowed): the track and every card share one 700ms curve, so the whole
   strip travels as a unit while the active card grows and the compensation that made room for it is released.
   Below 1024, and under reduced motion, there is no transition: the rotation is the one-step behaviour. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.c-carousel.is-enhanced .c-carousel__track {
		transition: transform var(--transition-reef) var(--ease-reef);
	}

	.c-carousel.is-enhanced .c-reef-card {
		transition: transform var(--transition-reef) var(--ease-reef);
	}

	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__title,
	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__text,
	.c-carousel.is-enhanced .c-reef__panel .c-link-arrow {
		transition: opacity var(--transition-reef-in) var(--ease-reef),
			transform var(--transition-reef-in) var(--ease-reef);
	}

	/* Outgoing: title / description / CTA leave upward, staggered 0/60/120ms. The last one to finish swaps
	   the active body (driven by `transitionend`, never a timer). */
	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__body.is-leaving .c-reef-card__title,
	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__body.is-leaving .c-reef-card__text,
	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__body.is-leaving .c-link-arrow {
		opacity: 0;
		transform: translateY(-12px);
		transition-duration: var(--transition-reef-out);
	}

	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__body.is-leaving .c-reef-card__title {
		transition-delay: 0ms;
	}

	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__body.is-leaving .c-reef-card__text {
		transition-delay: var(--reef-stagger);
	}

	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__body.is-leaving .c-link-arrow {
		transition-delay: calc(var(--reef-stagger) * 2);
	}

	/* Incoming start: the new body waits just below, hidden, with no transition so the start state is atomic. */
	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__body.is-entering .c-reef-card__title,
	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__body.is-entering .c-reef-card__text,
	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__body.is-entering .c-link-arrow {
		opacity: 0;
		transform: translateY(12px);
		transition-duration: 0ms;
		transition-delay: 0ms;
	}

	/* Incoming run: rise into place, staggered 0/60/120ms. */
	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__body.is-entering.is-entering-run .c-reef-card__title,
	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__body.is-entering.is-entering-run .c-reef-card__text,
	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__body.is-entering.is-entering-run .c-link-arrow {
		opacity: 1;
		transform: translateY(0);
		transition-duration: var(--transition-reef-in);
	}

	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__body.is-entering.is-entering-run .c-reef-card__title {
		transition-delay: 0ms;
	}

	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__body.is-entering.is-entering-run .c-reef-card__text {
		transition-delay: var(--reef-stagger);
	}

	.c-carousel.is-enhanced .c-reef__panel .c-reef-card__body.is-entering.is-entering-run .c-link-arrow {
		transition-delay: calc(var(--reef-stagger) * 2);
	}
}

/* The reorder after the travel must be invisible: this transient class removes the strip transitions for the
   one frame in which sections.js rotates the DOM and clears the inline transforms, so nothing can
   interpolate across the swap. It is deliberately limited to the track and the cards — the element-level
   text sequence runs on its own timeline and must not be disturbed. */
.c-carousel.is-reef-snap .c-carousel__track,
.c-carousel.is-reef-snap .c-reef-card {
	transition: none !important;
}

/* Prev / next: Button blocks made circular (56px). Shown only once sections.js has enhanced the carousel. */
.c-carousel__controls {
	display: none;
	margin-block-start: var(--space-xl);
}

.c-carousel.is-enhanced .c-carousel__controls {
	display: flex;
}

.c-carousel__btn .wp-block-button__link {
	inline-size: var(--touch-target);
	block-size: var(--touch-target);
	padding: 0;
	border: 1px solid var(--color-border-strong);
	background-color: transparent;
	color: var(--color-text-link);
	font-size: 0;
}

.c-carousel__btn .wp-block-button__link::before {
	content: "";
	inline-size: var(--space-xl);
	block-size: var(--space-xl);
	background-color: currentColor;
	-webkit-mask: url('../svg/icon-arrow-down.svg') center / contain no-repeat;
	mask: url('../svg/icon-arrow-down.svg') center / contain no-repeat;
}

.c-carousel__btn--prev .wp-block-button__link::before {
	transform: rotate(90deg);
}

.c-carousel__btn--next .wp-block-button__link::before {
	transform: rotate(-90deg);
}

.c-carousel__btn .wp-block-button__link:hover {
	background-color: var(--color-surface-brand);
	border-color: var(--color-surface-brand);
	color: var(--color-text-on-brand);
}

/* ================================================================ 6. Conservation */
.c-conservation__inner {
	row-gap: var(--space-2xl);
	align-items: center;
}

.c-conservation__img,
.c-conservation__copy {
	grid-column: 1 / -1;
}

.c-conservation__img img {
	inline-size: 100%;
	aspect-ratio: 610 / 512;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

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

/* Icon list: semantic <ul>; each item leads with a 56px circle filled with neutral-50 and no border. Each
   conservation icon is wired as a --icon background on its item modifier — a background, not a mask, so the exported
   #005CA2 stroke colour is preserved. background-color must be declared AFTER the background shorthand, which resets
   it; folded in, the fill would be discarded. An item with no modifier still renders, with an empty neutral-50 circle. */
.c-icon-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-base);
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-icon-list__item {
	display: flex;
	align-items: center;
	gap: var(--space-base);
	min-block-size: var(--touch-target);
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.c-icon-list__item::before {
	content: "";
	flex: none;
	inline-size: var(--touch-target);
	block-size: var(--touch-target);
	border-radius: var(--radius-full);
	background: var(--icon, none) center / 50% no-repeat;
	background-color: var(--color-neutral-50);
}

.c-icon-list__item--gardener  { --icon: url('../svg/ic-gardener.svg'); }
.c-icon-list__item--ntti      { --icon: url('../svg/ic-ntti.svg'); }
.c-icon-list__item--practices { --icon: url('../svg/ic-practices.svg'); }

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

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

/* ================================================================ 7. Excellence (inverse — colours come from [data-mode="inverse"]) */
.c-excellence__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
}

.c-excellence__body {
	row-gap: var(--space-2xl);
	align-items: center;
}

.c-excellence__media,
.c-excellence__stats {
	grid-column: 1 / -1;
}

.c-excellence__media {
	position: relative;
}

.c-excellence__img img {
	inline-size: 100%;
	aspect-ratio: 704 / 416;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

/* The play control reuses the hero's .c-play (white ic-play-button.svg on the flat scrim), centred on the still. */
.c-excellence__play {
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.c-excellence__play .wp-block-button {
	pointer-events: auto;
}

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

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

.c-fact .c-fact__value {
	color: var(--color-text-primary);
	font-family: var(--font-josefin);
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-heading);
}

.c-fact .c-fact__label {
	color: var(--color-text-primary);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
}

.c-fact .c-fact__text {
	color: var(--color-text-muted);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
}

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

	.c-excellence__stats {
		grid-column: 9 / -1;
	}
}

/* Editor parity only: the front end gets data-mode="inverse" from murex_resorts_inverse_mode_attr() (functions.php). */
.editor-styles-wrapper .is-mode-inverse {
	--color-surface-page: var(--color-brand-primary-dark);
	--color-text-primary: var(--color-white);
	--color-text-secondary: var(--color-white);
	--color-text-muted: var(--color-neutral-200);
	--color-text-link: var(--color-brand-secondary);
	--color-border-subtle: var(--color-neutral-400);
	--color-border-strong: var(--color-neutral-300);
	--color-border-focus: var(--color-white);
	background-color: var(--color-surface-page);
	color: var(--color-text-primary);
}

/* ================================================================ 8. Testimonials */
.c-testimonials__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
}

.c-testimonials__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--grid-gutter);
}

.c-testimonial {
	display: flex;
	flex-direction: column;
	gap: var(--space-base);
	padding: var(--space-xl);
	border: 0;
	border-radius: var(--radius-lg);
	background-color: var(--color-surface-subtle);
}

/* Five stars: decorative graphic in brand/accent (COLORS.md §3.1 allows accent for graphics); the rating is read by the screen-reader text. */
.c-testimonial .c-testimonial__stars {
	color: var(--color-surface-accent);
	font-size: var(--fs-h3);
	line-height: 1;
	letter-spacing: var(--space-xs);
}

.c-testimonial .c-testimonial__quote {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	border: 0;
}

.c-testimonial__quote p {
	max-inline-size: none;
}

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

.c-testimonial .c-testimonial__name {
	color: var(--color-text-link);
	font-family: var(--font-josefin);
	font-size: var(--fs-button);
	font-weight: 700;
	line-height: var(--lh-eyebrow);
	letter-spacing: var(--ls-button);
	text-transform: uppercase;
}

.c-testimonial .c-testimonial__location {
	color: var(--color-text-muted);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	letter-spacing: var(--ls-label);
}

@media (min-width: 1024px) {
	.c-testimonials__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ================================================================ 9. FAQ */
.c-faq__inner {
	row-gap: var(--space-2xl);
	align-items: start;
}

.c-faq__intro,
.c-faq__list {
	grid-column: 1 / -1;
}

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

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

/* Accordion card: native <details>/<summary>, border/subtle + radius/base. Focus ring comes from the global :focus-visible rule. */
.c-faq__item {
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-base);
	background-color: var(--color-surface-page);
}

.c-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-base);
	min-block-size: var(--touch-target);
	padding: var(--space-base) var(--space-lg);
	border-radius: var(--radius-base);
	color: var(--color-text-primary);
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: var(--lh-h4);
	list-style: none;
	cursor: pointer;
}

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

.c-faq__item > summary::after {
	content: "";
	flex: none;
	inline-size: var(--space-lg);
	block-size: var(--space-lg);
	background-color: currentColor;
	-webkit-mask: url('../svg/icon-arrow-down.svg') center / contain no-repeat;
	mask: url('../svg/icon-arrow-down.svg') center / contain no-repeat;
	transition: transform var(--duration-fast);
}

.c-faq__item[open] > summary::after {
	transform: rotate(180deg);
}

.c-faq__item > :not(summary) {
	padding-inline: var(--space-lg);
	padding-block-end: var(--space-lg);
}

/* An unanswered slot (Open Question — copy) collapses instead of leaving a blank panel. */
.c-faq__item > p:empty {
	display: none;
}

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

	.c-faq__intro .t-h1 {
		inline-size: calc(100% + var(--space-md));
	}

	.c-faq__list {
		grid-column: 7 / -1;
	}
}