/*
 * stats.css — S4, the credibility band.
 *
 * An editorial row separated by hairlines, never boxed cards: one column on
 * phones (rules between rows), 2x2 on tablet, 4 across on desktop (vertical
 * rules between columns). Values are set in Fraunces.
 */

.stats__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
}

.stats__item {
	padding-block: var(--s-6);
}

/* Phones: horizontal hairlines between rows. */
.stats__item + .stats__item {
	border-top: 1px solid var(--line);
}

.stats__value {
	display: flex;
	align-items: flex-end; /* years and word values share one baseline */
	margin: 0 0 var(--s-2);
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	font-weight: 500;
	line-height: var(--lh-tight);
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--ink);
}

/* Word values sit a step down so they do not shout over the years. */
.stats__value--text {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: var(--lh-heading);
	text-wrap: balance;
}

.stats__label {
	margin: 0;
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--muted);
}

@media (min-width: 768px) {
	.stats__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--s-12);
	}

	.stats__item {
		padding-block: var(--s-8);
	}

	/* Reserve one common block for the value (tallest case = two lines of a
	   word value) so every label starts on the same line across the row. */
	.stats__value {
		min-height: 5rem;
	}

	/* Reset the phone rules, then draw the 2x2 grid's own. */
	.stats__item + .stats__item {
		border-top: 0;
	}

	.stats__item:nth-child(n + 3) {
		border-top: 1px solid var(--line);
	}

	.stats__item:nth-child(even) {
		padding-left: var(--s-12);
		border-left: 1px solid var(--line);
	}
}

@media (min-width: 1024px) {
	.stats__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: var(--s-8);
	}

	.stats__item:nth-child(n + 3) {
		border-top: 0;
	}

	.stats__item + .stats__item {
		padding-left: var(--s-8);
		border-left: 1px solid var(--line);
	}

	.stats__item:nth-child(even) {
		padding-left: var(--s-8);
	}
}