/**
 * Flamingo Marine — Performance Stats, paged (V4 strip-5 bottom).
 *
 * Two big performance figures on a deep-navy ground, separated by a thin vertical
 * rule, with a circular pink chevron at the far right to page between stat pairs.
 * Numbers are very large and THIN (IBM Plex Sans 300); units are smaller and
 * baseline-aligned; captions are small and muted. Numbers count up from 0 when
 * the section scrolls into view (driven in JS); paging cross-fades the active
 * page in/out (~280ms) and re-runs the count-up.
 *
 * Layout: a fixed-height viewport stacks all pages absolutely; only the active
 * page is visible (opacity + visibility), so paging is a pure cross-fade with no
 * reflow. prefers-reduced-motion removes the fade transition.
 */

.flm-perf-stats {
	/* Match the page rhythm (~80px like flm-blogstrip/flm-cta-left; the old
	   7.5rem cap made the band around this section read extra-wide, BugHerd #137). */
	padding-block: clamp(3rem, 6vw, 5rem);
}

.flm-perf-stats__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xl);
	max-width: var(--wp--style--global--wide-size, 1180px);
	margin-inline: auto;
}

/* --- Viewport + pages ---------------------------------------------------- */

.flm-perf-stats__viewport {
	position: relative;
	flex: 1 1 auto;
	/* Fits the single row of three figures; section height comes from its own
	   block padding (no fixed viewport height now that paging is gone). */
	min-height: 0;
}

/* Single proof-point set now, so the page flows in-place (no absolute stacking
   for a cross-fade) — this lets the section grow to fit three stacked stats on
   mobile instead of overflowing a fixed-height viewport. */
.flm-perf-stats__page {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
	align-items: center;
	align-content: center;
	column-gap: 0;

	opacity: 0;
	visibility: hidden;
	transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stat video (V4 mockup): rounded media under the right-hand stat, cycling with
   the pager. Only the active page is visible, so only its video plays (JS). */
.flm-perf-stats__video {
	grid-column: 2;
	grid-row: 2;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 14px;
	display: block;
	background: var(--wp--preset--color--surface-base);
}

.flm-perf-stats__page.is-active {
	opacity: 1;
	visibility: visible;
}

/* --- Individual stat ----------------------------------------------------- */

.flm-perf-stats__stat {
	min-width: 0;
	padding-right: clamp(1.5rem, 4vw, 4rem);
}

/* Thin vertical rule between each proof-point column (V4 used one centre rule;
   with three stats there's one between each). */
.flm-perf-stats__stat + .flm-perf-stats__stat {
	border-left: 1px solid var(--wp--preset--color--surface-elev-3);
	padding-left: clamp(1.5rem, 4vw, 4rem);
}

.flm-perf-stats__stat:last-child {
	padding-right: 0;
}

.flm-perf-stats__figure {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.15em;
	color: var(--wp--preset--color--text-primary);
	font-weight: 300;
	line-height: 0.95;
	font-size: clamp(4.75rem, 11vw, 9.25rem);
	letter-spacing: -0.02em;
	/* Tabular figures keep width stable while the counter ticks. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.flm-perf-stats__number {
	display: inline-block;
}

.flm-perf-stats__unit {
	font-size: clamp(1.75rem, 3.4vw, 3rem);
	font-weight: 300;
	letter-spacing: 0;
}

.flm-perf-stats__caption {
	margin: var(--wp--preset--spacing--sm) 0 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 400;
}

/* --- Chevron paging button ---------------------------------------------- */

/* With a single stat set the pattern renders the button [hidden]; that must
   beat the display:inline-flex below or the dead pager still shows. */
.flm-perf-stats__chevron[hidden] {
	display: none;
}

.flm-perf-stats__chevron {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--accent-pink);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--accent-pink);
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.flm-perf-stats__chevron:hover {
	background: var(--wp--preset--color--accent-pink);
	color: var(--wp--preset--color--surface-deep);
}

.flm-perf-stats__chevron:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 3px;
}

.flm-perf-stats__chevron:active {
	transform: scale(0.94);
}

.flm-perf-stats__chevron svg {
	display: block;
}

/* --- Responsive ---------------------------------------------------------- */

/* Mobile: two figures side-by-side overflow once the numbers can't shrink
   further, so stack to a single column with a horizontal divider. */
@media (max-width: 767px) {
	.flm-perf-stats__inner {
		gap: var(--wp--preset--spacing--lg);
	}

	.flm-perf-stats__page {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 0;
	}

	/* Stacked: the rules run horizontally between the three stats. */
	.flm-perf-stats__stat {
		padding-right: 0;
	}
	.flm-perf-stats__stat + .flm-perf-stats__stat {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--surface-elev-3);
		padding-left: 0;
		margin-top: clamp(1.5rem, 7vw, 2.25rem);
		padding-top: clamp(1.5rem, 7vw, 2.25rem);
	}

	/* Reel the giant figure in a touch so a long number + unit never pushes
	   past the narrow column. */
	.flm-perf-stats__figure {
		font-size: clamp(3.75rem, 16vw, 5.75rem);
	}

	.flm-perf-stats__unit {
		font-size: clamp(1.5rem, 6vw, 2.25rem);
	}

	.flm-perf-stats__caption {
		font-size: var(--wp--preset--font-size--body);
	}
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.flm-perf-stats__page,
	.flm-perf-stats__chevron {
		transition: none;
	}
}