/**
 * Stats Row — Figma section 09 (node 1092:19219), and the upper half of the
 * CTA band on every service page (StatsSection 1092:19741).
 *
 * Measured off the .fig and confirmed against the 1:1 export: the pale band is
 * 330 tall (0..330, #F2FAF5) with its content on y=80..245. The row itself is
 * 1504 wide starting at x=208 — 32px OUTSIDE the 1440 container on each side,
 * which is why the outer two figures sit ~21px further out than a container-
 * width grid puts them. Ink centres in the export: 441 / 959 / 1477.
 * Icons are Figma VECTOR nodes and come from the inline icon library.
 */

.stats-row {
	/* 80 + 161 of content + 89 = 330, the pale band's rendered height both as the
	 * top half of a CTA section and standing alone on the homepage (332 there).
	 * Roof Replacement section 12 is the one instance the design draws at 320 —
	 * identical node tree, 10px less under it — so it opts into --tight. */
	padding-block: 80px 89px;
}

.stats-row--tight {
	padding-bottom: 79px;
}

.stats-row__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 208..1712, so 469.33 per column once the two 48px gaps are removed.
	 * Clamped to the container's own padding so the outdent never runs past the
	 * viewport: at 1199 the padding is 30, and a flat -32 overflowed by 2. */
	margin-inline: max(-32px, calc(-1 * var(--container-pad)));
	gap: var(--space-48);
}

.stats-row__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Spacing is per-element, not one flex gap: the design packs the label only
	 * 18px under the figure's INK, which is less than the figure's own line box,
	 * so the two gaps are 22 and -5. Design ink: icon 80..128, figure 149..198,
	 * label 216..235 — so the two gaps are 22 and -5 against the browser's own
	 * box for Anek at 64px. */
	gap: 0;
	text-align: center;
}

.stats-row__icon {
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	height: 48px;
	color: var(--primary-green);
}

/* The three marks are 40x44, 44x40 and 28x44 in the design. Capping both axes
 * at 44 reproduces all three from their own aspect ratios — a bare
 * `height: 44px` would render the middle one 48 wide. */
.stats-row__icon svg,
.stats-row__icon-img {
	max-width: 44px;
	max-height: 44px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.stats-row__value {
	color: var(--primary-black);
	font-family: var(--font-heading);
	margin-top: 22px;
	font-size: var(--fs-64);
	font-weight: 700;
	/* The 72px line box, at the developer's instruction, expressed on --fs-64's
	 * own fluid ramp (4.384vw is 64/1460, the reference this scale is built on)
	 * with the ceiling raised from 64 to 72 and the same 28px floor — so the
	 * leading tracks the size all the way down and collapses to 1 at the floor.
	 *
	 * This replaces a `line-height: 1` that was chosen deliberately: the figure
	 * is always a single line, and the design packs the label against the glyphs
	 * rather than against the 72px box. Restoring the box adds 4px of half-
	 * leading under the digits, so the label sits 4px lower and the band grows
	 * from 330 to 338 against a drawn 327. */
	line-height: clamp(28px, 4.384vw, 72px);
	/* Proportional figures, at the developer's instruction — the design renders
	 * with the face's default digits. The tabular pair that was here kept the
	 * number from jittering as it counts up; the counter still reserves the
	 * final WIDTH in JS, so the row cannot reflow, but individual digits do
	 * shift within it now. */
}

.stats-row__label {
	margin-top: -5px;
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	font-weight: 400;
	line-height: var(--lh-body);
}

@media (max-width: 991px) {

	.stats-row {
		padding-block: var(--space-60);
	}

	.stats-row__list {
		gap: var(--space-30);
	}
}

/* 10 at the developer's instruction. The value and its label are one unit, and
 * the desktop leading between them is too much air once the tiles narrow. */
@media (max-width: 767px) {

	.stats-row__value {
		margin-bottom: 10px;
	}
}

@media (max-width: 567px) {

	.stats-row__list {
		grid-template-columns: 1fr;
		gap: var(--space-40);
	}
}