/* Stat Block (ACF block, inc/stat-block.php + template-parts/blocks/
   stat-block.php). Figma node 4642:37813 and its 3 duplicate frames — one
   per stat count (1/2/3/4), hand-duplicated rather than a real Figma
   component, so the "column count" here is just however many stat rows an
   editor adds (1-4), not a separate switch to keep in sync with content.

   Figma used a wider column gap (65px) for 1-3 stats and a tighter one
   (30px) for 4 — needed to fit 4 columns in the same content width —
   reproduced below per data-columns rather than a single shared value. */

.stat-block {
	position: relative;
	background-color: var(--color-ink);
	color: var(--color-white);
	padding: clamp(28px, 5vw, 2.75rem) clamp(24px, 6vw, 68px);
	margin-block: clamp(32px, 5vw, 48px);
	overflow: hidden;
}

/* Figma applies a "Glass" effect to this photo — a newer compound preset
   (blur + refraction) that doesn't translate to a single CSS value, and
   isn't exposed anywhere Dev Mode surfaces (confirmed with the designer).
   blur() here is a best-judgement approximation of the same frosted look,
   not a value pulled from the design file — adjust this one number if it
   needs to look softer/sharper. It's a separate layer behind
   .stat-block__overlay/__content (not a filter on .stat-block itself) so
   the blur never touches the actual text. Sized larger than the card
   (inset: -20px) and clipped by .stat-block's own overflow:hidden, so the
   blur's own soft edge falls outside the visible card instead of showing
   as a lighter halo around it. */
.stat-block__bg {
	position: absolute;
	inset: -20px;
	/* Same photo as the Figma design itself (node 4642:37813 etc.) —
	   editors can override it per-instance via the block's own "Background
	   image" field (inline style, template-parts/blocks/stat-block.php);
	   this is only what shows when that's left empty. */
	background-image: url('../images/stat-block-default-bg.webp');
	background-size: cover;
	background-position: center;
	filter: blur(12px);
}

.stat-block__overlay {
	position: absolute;
	inset: 0;
	/* Figma's own overlay here is a 10% WHITE tint — reproduced faithfully
	   at first, but that lightens the photo rather than darkening it, so on
	   a bright photo (like the default one) the white text can end up hard
	   to read. Switched to black instead, which actually improves contrast
	   regardless of how light or dark the underlying photo is. */
	background: rgba(0, 0, 0, 0.45);
}

.stat-block__content {
	position: relative;
}

.stat-block__items {
	display: grid;
	gap: 65px;
}

.stat-block[data-columns="1"] .stat-block__items {
	grid-template-columns: 1fr;
}

.stat-block[data-columns="2"] .stat-block__items {
	grid-template-columns: repeat(2, 1fr);
}

.stat-block[data-columns="3"] .stat-block__items {
	grid-template-columns: repeat(3, 1fr);
}

.stat-block[data-columns="4"] .stat-block__items {
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

.stat-block__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.stat-block__rule {
	display: block;
	width: 32px;
	height: 2px;
	background: var(--color-white);
	margin-bottom: 10px;
}

/* .stat-block__item (ancestor) qualifies these two selectors — this block
   can land inside .blog-prose (single-post body copy), whose own
   ".blog-prose p" rule is a class + element selector (specificity 0,1,1)
   and would otherwise beat a bare ".stat-block__number"/"__description"
   class selector (0,1,0) and win regardless of stylesheet load order. */
.stat-block__item .stat-block__number {
	margin: 0 0 16px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.25rem, 4vw, 3.75rem);
	line-height: 1.1;
	color: var(--color-white);
}

.stat-block__item .stat-block__description {
	margin: 0;
	font-family: var(--font-body);
	/* 300 (Light), not Figma's "Roboto Regular" (400) — body copy on this
	   site always renders at 300 regardless of what Figma's text style
	   says (established across every other body-copy element sitewide). */
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--color-white);
}

/* One shared source across every stat (or only one stat has one at all) —
   free to run the full width of the block rather than being boxed into a
   single stat's own column, since nothing else needs to share the row
   with it. */
.stat-block__citations {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 30px;
}

/* Each stat has its OWN distinct source — same grid as .stat-block__items
   above (same data-columns values below), so each source lines up
   directly under its own stat instead of just sitting in a row together. */
.stat-block__citations-grid {
	display: grid;
	gap: 65px;
	margin-top: 30px;
}

.stat-block[data-columns="1"] .stat-block__citations-grid {
	grid-template-columns: 1fr;
}

.stat-block[data-columns="2"] .stat-block__citations-grid {
	grid-template-columns: repeat(2, 1fr);
}

.stat-block[data-columns="3"] .stat-block__citations-grid {
	grid-template-columns: repeat(3, 1fr);
}

.stat-block[data-columns="4"] .stat-block__citations-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

/* .stat-block__citations/__citations-grid (ancestor) — same reason as
   .stat-block__number/__description above. */
.stat-block__citations .stat-block__citation,
.stat-block__citations-grid .stat-block__citation {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 0.75rem;
	color: var(--color-white);
}

/* A 1-line summary of the plan: the content column this block lives in
   tops out around 800px (.insights-single__inner), so these breakpoints
   are really about how narrow the SCREEN gets, not the block itself —
   same reasoning/values as every other multi-column grid on the site
   (e.g. .insights-grid, base.css). */
@media (max-width: 900px) {
	.stat-block[data-columns="3"] .stat-block__items,
	.stat-block[data-columns="4"] .stat-block__items,
	.stat-block[data-columns="3"] .stat-block__citations-grid,
	.stat-block[data-columns="4"] .stat-block__citations-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 30px;
	}
}

@media (max-width: 600px) {
	.stat-block__items {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	.stat-block__citations {
		flex-direction: column;
		gap: 8px;
	}

	.stat-block__citations-grid {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}
}