/* ═════════════════════════════════════════════════════════════════
   SECTION 4 — STATS
   2×2 grid with left columns transparent (video shows through) and
   right columns rendered as frosted glass over the background video.
   ═════════════════════════════════════════════════════════════════ */

.stats {
	background: var(--cream);
	padding-top: clamp(64px, 7vw, 120px);
	padding-bottom: clamp(64px, 7vw, 120px);
	position: relative;
	overflow: hidden;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	position: relative; z-index: 1;
}

/* Single full-height frosted-glass strip that spans the right column
   from the grid midline all the way to the viewport's right edge.
   Replaces the per-cell backdrop-filter so the blur reads as one
   continuous pane across both right-column stats. */
.stats-grid::before {
	content: '';
	position: absolute;
	top: -130px;
	bottom: 0;
	left: 50%;
	/* Negative `right` extends the strip past .section-wrap's padding
	   and any outside margin beyond the 1440px cap, reaching the
	   viewport's right edge on any width. */
	right: calc(-1 * (var(--container-x) + max(0px, (100vw - 1440px) / 2)));
	background: rgba(245, 243, 239, 0.08);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	z-index: 0;
	pointer-events: none;
}

/* Horizontal divider across the row midline, drawn above the blur strip
   so the border colour reads identically on both sides (otherwise the
   frosted glass visually lightens the border on the right column).
   Two segments with an 82px gap centred on the column midline.
   Bounded by the 1440px content container — does NOT extend to the
   viewport edge like the blur strip does. */
.stats-grid::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	background:
		/* left segment: from 0 → (50% − 41px) */
		linear-gradient(rgba(26,26,26,0.3), rgba(26,26,26,0.3)) no-repeat,
		/* right segment: from (50% + 41px) → right edge of grid */
		linear-gradient(rgba(26,26,26,0.3), rgba(26,26,26,0.3)) no-repeat;
	background-size:
		calc(50% - 41px) 1px,
		calc(50% - 41px) 1px;
	background-position:
		0 50%,
		100% 50%;
}

/* Keep stat-item content above the blur strip and the dividers layer. */
.stat-item { position: relative; z-index: 3; }

/* Left column — transparent so video + cream overlay shows through */
.stat-item:nth-child(odd) {
	padding: clamp(40px, 4vw, 72px) clamp(24px, 3vw, 60px) clamp(40px, 4vw, 72px) 0;
	background: transparent;
}
/* Right column — transparent; the .stats-grid::before strip is the blur. */
.stat-item:nth-child(even) {
	padding: clamp(40px, 4vw, 72px) clamp(20px, 3vw, 48px) clamp(40px, 4vw, 72px) clamp(24px, 3vw, 60px);
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* ── Stat display values ── */
.stat-value {
	font-size: var(--fs-stat);
	font-weight: 500;
	line-height: 1;
	color: var(--ink);
	letter-spacing: -.01em;
	margin-bottom: .75rem;
	font-family: var(--f-sans);
	white-space: nowrap;
}
/* Green weight 500 (SVG: Urbanist 500) — stats 1 & 4 */
.stat-value.green {
	color: var(--green);
	font-weight: 500;
}
/* Orange bold (plain) */
.stat-value.orange {
	color: var(--orange);
}
/* Orange italic serif (stats 2 & 3: 94%, Just a few wks) */
.stat-value.orange-italic {
	color: var(--orange);
	font-family: var(--f-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -.01em;
	line-height: 1.05;
	white-space: nowrap;
}
/* Green italic serif (kept for backwards compat) */
.stat-value.italic {
	color: var(--green);
	font-family: var(--f-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -.01em;
	line-height: 1.05;
}

.stat-body {
	font-size: var(--fs-body);
	color: var(--ink-soft);
	line-height: 1.55;
	margin-top: 1rem;
	max-width: 500px;
}

/* ── Responsive ── */
@media (max-width: 767px) {
	.stats { padding-top: 0; }

	.stat-item:first-child {
		padding-top: 60px;
	}

	.stats-grid {
		grid-template-columns: 1fr;
		gap: 0;
		/* Break out of .section-wrap padding so cards span full viewport width */
		margin-left: calc(-1 * var(--container-x));
		margin-right: calc(-1 * var(--container-x));
	}
	.stats-grid::before,
	.stats-grid::after { display: none; }

	.stat-item,
	.stat-item:nth-child(odd),
	.stat-item:nth-child(even) {
		padding: clamp(32px, 4vw, 48px) var(--container-x);
		background: rgba(245, 243, 239, 0.08);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border-top: none;
	}
	.stat-item:not(:last-child)::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: var(--container-x);
		right: var(--container-x);
		height: 1px;
		background: rgba(26, 26, 26, 0.3);
	}

	.stat-value,
	.stat-body {
		text-align: center;
		max-width: none;
	}
}