/* =========================================================================
 * Stats Grid 002 — Statement over Four Figures
 *
 * On the paper. The introduction: the eyebrow in the left quarter, and at
 * the right a statement in the display face, a muted paragraph and a button.
 * Below, across the full width, four figures divided by upright hairlines:
 * the number large in the display face, its suffix small and in the accent,
 * the label under it; the first figure held to the left, the last to the
 * right, the two between centred in their cells. A tablet and a phone: two
 * figures a row, each held to the left.
 *
 * The grids are on the blocks (pattern.php); this file sets the
 * introduction's tracks (a quarter and three quarters: asymmetric, so CSS),
 * the hairlines, the type and the breakpoints. Three classes where it meets
 * a grid: core's generated grid class is (0,1,0).
 * ========================================================================= */

.stats-grid-002 .stats-grid-002__intro.stats-grid-002__intro {
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	column-gap: var(--space-md);
	row-gap: var(--space-sm);
	align-items: start;
}

.stats-grid-002 .stats-grid-002__label {
	margin: 0;
	/* Level with the statement's first line. */
	padding-top: var(--space-xs);
}

.stats-grid-002 .stats-grid-002__body > * {
	margin-block: 0;
}

/* The statement: the third heading step, in the display face, across the
   whole right column (no measure of its own; "pretty" only keeps a word
   from ending up alone on the last line). */
.stats-grid-002 .stats-grid-002__statement {
	font-size: var(--heading-3);
	text-wrap: pretty;
}

.stats-grid-002 .stats-grid-002__body > .stats-grid-002__text {
	margin-top: var(--space-md);
	text-wrap: pretty;
}

.stats-grid-002 .stats-grid-002__body > .stats-grid-002__actions {
	margin-top: var(--space-md);
}

/* The figures, a section's step under the introduction. */
.stats-grid-002 .stats-grid-002__stats.stats-grid-002__stats {
	gap: 0;
	margin-top: var(--space-xl);
}

/* Each figure in its cell, an upright hairline before every one but the
   first. The middle ones centred, the first to the left, the last to the
   right. */
.stats-grid-002 .stats-grid-002__stat.stats-grid-002__stat {
	gap: var(--space-sm);
	align-items: center;
	padding: var(--space-xs) var(--space-md);
	text-align: center;
}

.stats-grid-002 .stats-grid-002__stat.stats-grid-002__stat + .stats-grid-002__stat {
	border-left: var(--border);
}

.stats-grid-002 .stats-grid-002__stat.stats-grid-002__stat:first-child {
	align-items: flex-start;
	padding-left: 0;
	text-align: left;
}

.stats-grid-002 .stats-grid-002__stat.stats-grid-002__stat:last-child {
	align-items: flex-end;
	padding-right: 0;
	text-align: right;
}

.stats-grid-002 .stats-grid-002__stat > * {
	margin: 0;
}

/* The number: the hero line's size, in the display face. */
.stats-grid-002 .stats-grid-002__number {
	font-family: var(--font-display);
	font-size: var(--heading-1);
	line-height: 1;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

/* The suffix: a share of the number it rides on, not a step of the type
   scale (a glyph's proportion, like a superscript's). */
.stats-grid-002__number sup {
	margin-left: 0.06em;
	font-size: 0.4em;
	line-height: 0;
	vertical-align: 0.95em;
	color: var(--color-accent);
}

.stats-grid-002 .stats-grid-002__key {
	font-size: var(--wp--preset--font-size--base);
	color: var(--color-muted);
}

/* A tablet and a phone: the introduction in one column; two figures a row,
   each held to the left, a hairline before the second of each pair, and a
   step between the rows. */
@media (max-width: 48rem) {
	.stats-grid-002 .stats-grid-002__intro.stats-grid-002__intro {
		grid-template-columns: minmax(0, 1fr);
	}

	.stats-grid-002 .stats-grid-002__label {
		padding-top: 0;
	}

	.stats-grid-002 .stats-grid-002__stats.stats-grid-002__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--space-lg);
	}

	.stats-grid-002 .stats-grid-002__stat.stats-grid-002__stat:nth-child(n) {
		align-items: flex-start;
		padding-inline: var(--space-md) 0;
		text-align: left;
		border-left: var(--border);
	}

	.stats-grid-002 .stats-grid-002__stat.stats-grid-002__stat:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.stats-grid-002 .stats-grid-002__number {
		font-size: var(--heading-2);
	}
}