/**
 * Variant CSS: about--numbers-led-story
 * Layer 2 - Path B universal ABOUT variant (story framed by oversize figures).
 *
 * Concept: a narrative column (kicker + headline + 2 paragraphs + CTA) on the
 * left, paired with a right rail of 2-3 OVERSIZE display figures. Each figure
 * is a huge accent number with a single supporting micro-line beneath, divided
 * by a hairline. Distinct from stats-band-with-text (a tidy 2x2 grid of four
 * small stats): here the figures are large, vertically stacked focal anchors
 * that frame the story rather than tabulate it.
 *
 * Surface contract: section on --background; figures need no card surface (they
 * read on the base band) - separated only by hairlines so the digits dominate.
 * Number = --accent (decorative display), label = --text-secondary. Semantic
 * tokens only; never color:var(--bg-main) as foreground.
 */

/* === Section shell ======================================================== */
body.aibt-universal .universal-about--numbers-led-story {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary);
}

/* === Two-column grid ======================================================
   Core wp:columns already stacks at its mobile breakpoint; we keep top-align
   so the story head lines up with the first figure on desktop. */
body.aibt-universal .universal-about--numbers-led-story .universal-about__grid {
	margin: 0 !important;
}

/* === Story column ========================================================= */
body.aibt-universal .universal-about--numbers-led-story .universal-about__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-about--numbers-led-story h2.universal-about__headline,
body.aibt-universal .universal-about--numbers-led-story .universal-about__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

/* Signature em-accent on the emphasised headline fragment — matches sibling
   about variants (italic-color theme treatment). */
body.aibt-universal .universal-about--numbers-led-story .universal-about__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent));
	font-weight: var(--italic-weight, inherit);
}

body.aibt-universal .universal-about--numbers-led-story .universal-about__body {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 0 var(--space-md) 0 !important;
	max-width: 54ch;
}

/* CTA - inherits theme button tokens; small top gap from last paragraph. */
body.aibt-universal .universal-about--numbers-led-story .universal-about__cta {
	margin-top: var(--space-sm);
}

body.aibt-universal .universal-about--numbers-led-story .universal-about__cta .wp-block-button__link {
	background: var(--cta-bg-primary) !important;
	color: var(--cta-text-primary) !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	border-radius: var(--decor-radius-pill, var(--decor-radius, 0px)) !important;
	transition: background-color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-about--numbers-led-story .universal-about__cta .wp-block-button__link:hover {
	background: var(--accent-hover, var(--accent)) !important;
	transform: translateY(-1px);
}

/* Keyboard focus ring — visible accent outline for non-pointer navigation. */
body.aibt-universal .universal-about--numbers-led-story .universal-about__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: inherit;
}

/* === Figures rail =========================================================
   Stacked oversize figures. Each separated by a top hairline (except the first)
   so the column reads as a measured ledger of big numbers. */
body.aibt-universal .universal-about--numbers-led-story .universal-about__figures {
	display: flex;
	flex-direction: column;
}

body.aibt-universal .universal-about--numbers-led-story .universal-about__figure {
	padding: var(--space-lg) 0 !important;
	border-top: 1px solid var(--divider-primary);
}

body.aibt-universal .universal-about--numbers-led-story .universal-about__figure:first-child {
	border-top: 0;
	padding-top: 0 !important;
}

body.aibt-universal .universal-about--numbers-led-story .universal-about__figure:last-child {
	padding-bottom: 0 !important;
}

/* The oversize digit - the hero of the variant. Tabular nums keep multi-figure
   values (2 400+, 96%) optically aligned. */
body.aibt-universal .universal-about--numbers-led-story .universal-about__fignum {
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	font-size: clamp(3rem, 6vw, 4.75rem) !important;
	line-height: 0.95 !important;
	letter-spacing: -0.03em !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-xs) 0 !important;
	font-variant-numeric: tabular-nums;
}

body.aibt-universal .universal-about--numbers-led-story .universal-about__figlabel {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
	max-width: 32ch;
}

/* Tighten wide kicker tracking on phones (A5). */
@media (max-width: 640px) {
	body.aibt-universal .universal-about--numbers-led-story .universal-about__kicker {
		letter-spacing: 0 !important;
	}
}

/* === Motion respect ======================================================= */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-about--numbers-led-story .universal-about__cta .wp-block-button__link {
		transition: none;
	}
	body.aibt-universal .universal-about--numbers-led-story .universal-about__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* === Editor parity ======================================================== */
.editor-styles-wrapper .universal-about--numbers-led-story .universal-about__cta .wp-block-button__link {
	transform: none !important;
}