/* ==========================================================================
   Stats & images — Option 1. Reference frame 1600 wide:
   grid y=1481 h=621, x=200 w=1200, 3 equal columns, gap 39.
   Middle column puts its image on top; the outer two put it below.
   Watermark band y=2301 h=127.
   ========================================================================== */

.section--stats {
	background: var(--color-bg);
	/* 1481 - 1316 (intro description bottom). */
	padding-top: clamp(2.5rem, 10.3vw, 165px);
	/* 2437 (kitchens) - 2428 (watermark bottom). */
	padding-bottom: 9px;
	overflow: hidden;
}

.stats__grid {
	max-width: calc(1200px + 2 * var(--container-pad));
}

/* The row itself. On desktop it is the 3-column grid; on mobile it becomes a
   horizontal track wider than its window (see the mobile block below). */
.stats__track {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 39px;
	align-items: start;
}

.stat {
	display: flex;
	flex-direction: column;
}

.stat__text {
	display: flex;
	flex-direction: column;
	gap: 29px;
	color: var(--white);
}

.stat--image-bottom .stat__text {
	padding: 29px 0 32px;
}

.stat--image-top .stat__text {
	padding: 32px 0 29px;
	order: 2;
}

.stat--image-top .stat__image {
	order: 1;
}

/* Figma trims these line boxes to cap height (text-box-trim), which is what
   makes a column 621 tall rather than 664. Explicit cap-height line-heights
   reproduce that in every browser, not just the ones supporting text-box. */
.stat__value {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: clamp(2rem, 3.27vw, 52.34px);
	line-height: 0.7em;
	letter-spacing: -0.04em;
}

.stat__label {
	margin: 0;
	font-family: var(--font-alt);
	font-weight: 400;
	font-size: clamp(0.95rem, 1.125vw, 18px);
	line-height: 0.727em;
}

.stat__image {
	position: relative;
	/* 481 tall in a 374-wide column, in the reference frame. */
	aspect-ratio: 374 / 481;
	border: 1px solid #0d0d0d;
	box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.14);
}

.stat__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Deliberately wider than the viewport (2918 at 1600) — the section clips it,
   showing the MIDDLE of the string. text-align:center can't do this: the
   section is a scroll container (overflow:hidden), so Chrome pins inline-start
   overflow and you'd see the start of the string instead. Centre it
   geometrically with max-content + translate so both ends clip equally. */
.stats__watermark {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	margin-top: clamp(3rem, 12.4vw, 199px);
	font-family: var(--font-body);
	font-weight: 300;
	font-size: clamp(3.5rem, 8.125vw, 130px);
	line-height: 0.977;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.08);
	opacity: 0.7;
	pointer-events: none;
	user-select: none;
}

/* ==========================================================================
   Small screens — horizontal track. Reference frame 440 wide: cards 244 in a
   400 window with a 24 gap, so the 780 track overflows and only ~1.6 cards are
   ever on screen. Stacking these vertically instead made the section 2126 tall
   against the design's 405.

   Two behaviours, in this order:
     1. no JS / reduced motion — the window scrolls natively (swipe), so every
        card stays reachable;
     2. .is-scrub (added by assets/js/stats.js) — the window stops scrolling and
        the track is translated by --stats-x, which the script scrubs from the
        page's vertical scroll. Cards travel right to left as the user scrolls.
   The alternating image-top/image-bottom rhythm is KEPT here; the design uses
   it on mobile too, and side by side it reads as intended rather than as an
   inconsistency (which is why the old stacked layout reset it).
   ========================================================================== */
@media (max-width: 900px) {
	.stats__grid {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.stats__grid::-webkit-scrollbar {
		display: none;
	}

	.stats__track {
		display: flex;
		/* 24 of the 440 frame. */
		gap: 5.4545vw;
		width: max-content;
		align-items: start;
	}

	.stat {
		/* 244 of the 440 frame — just over half the viewport, so the next card
		   is always partly visible and the row reads as scrollable. */
		flex: none;
		width: 55.4545vw;
	}

	/* JS is driving it: kill the native scroll so the two cannot fight. */
	.stats__grid.is-scrub {
		overflow-x: hidden;
	}

	.stats__grid.is-scrub .stats__track {
		transform: translate3d(var(--stats-x, 0px), 0, 0);
		will-change: transform;
	}
}