/**
 * Credibility stat strip.
 *
 * A centred row of figures closing the page intro — currently a single card.
 *
 * An earlier version had these straddle the hero's angled edge, floating half over
 * the photograph. That was dropped in favour of sitting them below the intro copy,
 * where they read as evidence for the claim just made rather than as decoration on
 * the header. Two things went with the overlap: the negative margin, and the very
 * deep shadow it needed to look lifted off a photo.
 *
 * Written generically (.pd-stats / .pd-stat) rather than about-specific, because
 * the same strip suits the Services and Careers pages.
 */

.pd-stats__grid {
	display: grid;

	/* auto-fit + a max track width, rather than a fixed three columns.
	 *
	 * The strip is down to one figure, and a single card in a `repeat(3, 1fr)` grid
	 * stretches to a third of the section and sits hard left. This lays out however
	 * many cards exist, caps each at a sensible reading width, and centres the row —
	 * so one card is centred and three would still sit as a row. */
	grid-template-columns: repeat( auto-fit, minmax( min( 280px, 100% ), 380px ) );
	justify-content: center;
	gap: var( --wp--preset--spacing--40 );
}

.pd-stats__grid > .pd-stat {
	/* Kill core's flow-layout block margin — the grid gap owns spacing. */
	margin-top: 0;

	padding: 1.75rem 1.5rem;
	text-align: center;

	background-color: var( --wp--preset--color--base );
	border-radius: 14px;

	/* Standard two-layer lift, matching the other card sets. The strip used to
	   float over the hero photograph and needed a much deeper shadow to read as
	   lifted; sitting on flat white, that same shadow looked like a smudge. */
	box-shadow:
		0 1px 3px rgba( 0, 0, 0, 0.05 ),
		0 10px 24px rgba( 0, 0, 0, 0.07 );
}

.pd-stat__num {
	margin: 0;

	font-family: var( --wp--preset--font-family--poppins );
	font-size: clamp( 2.5rem, 5vw, 3.5rem );
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;

	/* primary, not gold: ~3.9:1 on white, which clears AA for text this size. */
	color: var( --wp--preset--color--primary );
}

h3.pd-stat__label {
	margin: 0.7rem 0 0;
	font-size: 1rem;
	line-height: 1.3;
}

.pd-stat__detail {
	margin: 0.35rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	opacity: 0.7;
}

/* Stagger left to right, for the case where more figures are added back. */
.pd-stats__grid > .pd-stat:nth-child( 2 ) { --pd-reveal-delay: 110ms; }
.pd-stats__grid > .pd-stat:nth-child( 3 ) { --pd-reveal-delay: 220ms; }

/* auto-fit already collapses to one column on narrow screens, so no breakpoint is
   needed here. min(280px, 100%) is what keeps a card from overflowing a phone. */