/**
 * Variant CSS: about--by-the-numbers-band
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: "about us" expressed as ONE full-width band of numbers. A centred
 *   one-line intro (kicker + headline + supporting deck) sits ABOVE a single
 *   horizontal row of four key figures (founded / clients / team / projects),
 *   each a big numeral + a short caption, separated by thin vertical hairlines.
 *   This differs from the 2-column stats variants (stats-band-with-text /
 *   numbers-led-story) where story and figures sit side by side: here the band
 *   spans the full content width as a clean rhythmic strip under the intro.
 *
 * Centering (A8/A9): the intro group and every centred text block (kicker /
 *   headline / deck / each statnum + statlabel) keep horizontal-auto margins so
 *   the constrained-layout centring is never overridden into a left pin. Stat
 *   numbers/labels are centred via has-text-align-center in the PHP, so their
 *   CSS margins stay 0 auto.
 *
 * KI-020 safety: no --bg-main as foreground anywhere. Headline uses --ink (here
 *   --text-primary), numerals --text-primary, labels --text-secondary, em
 *   accent --accent on the light page ground.
 *
 * Semantic tokens only (--background, --text-primary, --text-secondary,
 * --accent, --font-display/body, --text-*, --space-*, --tracking-*,
 * --leading-*, --divider-primary). Theme-portable: a dark theme supplies a dark
 * --background + lighter text + the hairlines fade against it.
 *
 * Scoping: EVERY selector starts with
 *   body.aibt-universal .universal-about--by-the-numbers-band
 * because the theme enqueues ALL variant CSS globally.
 *
 * @package AI_Base_Theme
 * @since 2026-06-06 (Path B Variants Library)
 */

/* === Section shell ========================================================
   Inherits the skeleton's fluid section padding. A bottom hairline matches the
   sibling about variants so stacked sections read as a sequence. */
body.aibt-universal .universal-about--by-the-numbers-band {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.08));
}

/* === Intro - centred one-line lead =======================================
   The intro group is a constrained centred group; keep it centred and give it
   breathing room before the numbers band. */
body.aibt-universal .universal-about--by-the-numbers-band .universal-about__intro {
	margin: 0 auto var(--space-xl) auto;
	text-align: center;
}

/* Kicker - small uppercase label. --text-secondary per the small-text contrast
   rule. Centred direct child -> horizontal margins auto (A8/A9). */
body.aibt-universal .universal-about--by-the-numbers-band .universal-about__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest, 0.18em) !important;
	text-transform: uppercase !important;
	color: var(--text-secondary) !important;
	margin: 0 auto var(--space-sm) auto !important;
}

/* Headline - display face, primary ink. Size/weight from the block inline
   style. Centred -> margin-inline auto. */
body.aibt-universal .universal-about--by-the-numbers-band h2.universal-about__headline,
body.aibt-universal .universal-about--by-the-numbers-band .universal-about__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	max-width: 22ch;
	margin: 0 auto !important;
}

body.aibt-universal .universal-about--by-the-numbers-band .universal-about__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent));
	font-weight: var(--italic-weight, 500);
}

/* Deck - single supporting line. Secondary ink, relaxed leading. Centred ->
   margin-inline auto. */
body.aibt-universal .universal-about--by-the-numbers-band .universal-about__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed, 1.65) !important;
	color: var(--text-secondary) !important;
	max-width: 56ch;
	margin: var(--space-md) auto 0 auto !important;
}

/* === The numbers band ====================================================
   A clean full-width strip. A top + bottom hairline frame it as a distinct
   band; the columns block lays the four figures in a row. */
body.aibt-universal .universal-about--by-the-numbers-band .universal-about__band {
	margin: 0;
	gap: 0;
	border-top: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.12));
	border-bottom: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.12));
}

/* Each stat column - centred content + a thin vertical divider between cells
   (skip the first). Generous vertical padding gives the band presence. */
body.aibt-universal .universal-about--by-the-numbers-band .universal-about__statcol {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2rem, 4vw, 2.75rem) clamp(1rem, 2.5vw, 2rem);
	min-width: 0;
	border-left: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.10));
}

body.aibt-universal .universal-about--by-the-numbers-band .universal-about__statcol:first-child {
	border-left: 0;
}

/* Stat group - tight num + label pair. */
body.aibt-universal .universal-about--by-the-numbers-band .universal-about__stat {
	margin: 0;
}

/* Big numeral - display face, primary ink, oversize. Centred via PHP
   has-text-align-center, so margins stay 0 auto. */
body.aibt-universal .universal-about--by-the-numbers-band .universal-about__statnum {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: clamp(2.4rem, 5vw, 3.5rem) !important;
	line-height: 1 !important;
	letter-spacing: -0.02em !important;
	color: var(--text-primary) !important;
	margin: 0 auto var(--space-sm) auto !important;
}

/* Caption under the numeral - small, secondary ink, comfortable measure. */
body.aibt-universal .universal-about--by-the-numbers-band .universal-about__statlabel {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: var(--tracking-wide, 0.02em) !important;
	color: var(--text-secondary) !important;
	max-width: 18ch;
	margin: 0 auto !important;
}

/* === Tablet - keep the row but tighten cell padding ======================= */
@media (max-width: 959px) {
	body.aibt-universal .universal-about--by-the-numbers-band .universal-about__statcol {
		padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(0.75rem, 2vw, 1.5rem);
	}

	body.aibt-universal .universal-about--by-the-numbers-band .universal-about__statnum {
		font-size: clamp(2rem, 5.5vw, 3rem) !important;
	}
}

/* === Mobile - 2x2 grid =====================================================
   The columns block stacks to one-per-row by default at <=781px, which would
   make four tall cells. Force a 2x2 layout instead: rows of two, with the
   vertical hairline only between the two cells in a row and a horizontal
   hairline between rows. flex-basis 50% via the wp-block-column override. */
@media (max-width: 781px) {
	body.aibt-universal .universal-about--by-the-numbers-band .universal-about__band {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	body.aibt-universal .universal-about--by-the-numbers-band .universal-about__statcol {
		flex: 0 0 50%;
		max-width: 50%;
		box-sizing: border-box;
		border-left: 0;
		border-top: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.10));
	}

	/* Vertical divider only between the two cells of each row (2nd + 4th). */
	body.aibt-universal .universal-about--by-the-numbers-band .universal-about__statcol:nth-child(2n) {
		border-left: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.10));
	}

	/* No top hairline on the first row (the band already has a top border). */
	body.aibt-universal .universal-about--by-the-numbers-band .universal-about__statcol:nth-child(1),
	body.aibt-universal .universal-about--by-the-numbers-band .universal-about__statcol:nth-child(2) {
		border-top: 0;
	}
}

/* === Phone - single column, drop kicker tracking ========================== */
@media (max-width: 480px) {
	body.aibt-universal .universal-about--by-the-numbers-band .universal-about__statcol {
		flex: 0 0 100%;
		max-width: 100%;
		border-left: 0 !important;
	}

	body.aibt-universal .universal-about--by-the-numbers-band .universal-about__statcol:not(:first-child) {
		border-top: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.10));
	}
}

@media (max-width: 640px) {
	/* Drop uppercase kicker tracking on the smallest screens (A5 / KI-003). */
	body.aibt-universal .universal-about--by-the-numbers-band .universal-about__kicker {
		letter-spacing: 0 !important;
	}

	body.aibt-universal .universal-about--by-the-numbers-band .universal-about__statlabel {
		max-width: none;
	}
}

/* === Editor wrapper - content stays visible in the block editor =========== */
.editor-styles-wrapper .universal-about--by-the-numbers-band .universal-about__band,
.editor-styles-wrapper .universal-about--by-the-numbers-band .universal-about__stat {
	opacity: 1 !important;
	transform: none !important;
}