/* ── Stats band — CD-treu variant (light bg, primary numerals) ──────────────── */

.stats {
	background: var(--c-bg);
	padding-block: 2rem;
	border-top: 0.0625rem solid var(--c-divider);
	border-bottom: 0.0625rem solid var(--c-divider);
}

.stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1rem 1.5rem;
	gap: 0.25rem;
}

/* Dividers between stat items — left border, removed on the first item per row */
.stat + .stat {
	border-left: 0.0625rem solid var(--c-border-light);
}

.stat__n {
	display: block;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--c-primary);
	letter-spacing: -0.01em;
}

.stat__l {
	display: block;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--c-text);
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Responsive */

/* Tablet — 2 columns, dividers between both columns and rows */
@media (max-width: 64rem) {
	.stats__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* First item of each row starts a new row → no left divider */
	.stat:nth-child(odd) {
		border-left: none;
	}

	/* Second row gets a top divider */
	.stat:nth-child(n + 3) {
		border-top: 0.0625rem solid var(--c-border-light);
	}
}

/* Mobile — single column, stacked with top dividers */
@media (max-width: 48rem) {
	.stats__grid {
		grid-template-columns: 1fr;
	}

	.stat {
		border-left: none;
	}

	.stat + .stat {
		border-left: none;
		border-top: 0.0625rem solid var(--c-border-light);
	}

	.stat__n {
		font-size: 1.5rem;
	}
}