/**
 * Variant CSS: stats--single-hero-figure
 *
 * One dominant hero figure on the left (giant number + a short supporting
 * sentence beneath it), with a compact column of 2–3 secondary stats on the
 * right. A deliberately asymmetric, editorial composition: the giant figure
 * takes --accent and carries the eye, while the mini stats stay quiet --ink
 * context. Distinct from feature-figure-with-support (egalitarian support
 * stack) — here the scale contrast itself is the design. On narrow screens the
 * two columns stack and the giant figure shrinks so there is never any sideways
 * scroll. Part of the `stats` role.
 */

body.aibt-universal .universal-stats--single-hero-figure {
	padding-block: calc(clamp(3rem, 7vw, 5rem) * var(--density, 1));
}

/* Intro / lead. */
body.aibt-universal .universal-stats--single-hero-figure .universal-stats__lead {
	margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}

body.aibt-universal .universal-stats--single-hero-figure .universal-stats__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-sm) 0 !important;
}

body.aibt-universal .universal-stats--single-hero-figure .universal-stats__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-stats--single-hero-figure .universal-stats__headline em {
	color: var(--accent) !important;
	font-style: italic;
}

/* Split row — giant left, mini stats right. */
body.aibt-universal .universal-stats--single-hero-figure .universal-stats__split {
	gap: clamp(1.6rem, 4vw, 3.4rem) !important;
	align-items: center !important;
}

/* Hairline divider between the hero figure and the aside. */
body.aibt-universal .universal-stats--single-hero-figure .universal-stats__aside-col {
	padding-left: clamp(1.4rem, 3vw, 2.6rem);
	border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
	display: flex;
	flex-direction: column;
	gap: clamp(1.1rem, 2.4vw, 1.6rem);
}

/* The giant hero number. */
body.aibt-universal .universal-stats--single-hero-figure .universal-stats__giant {
	font-family: var(--font-display) !important;
	font-size: clamp(3.6rem, 11vw, 7.5rem) !important;
	font-weight: 800 !important;
	line-height: 0.92 !important;
	letter-spacing: -0.04em !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-stats--single-hero-figure .universal-stats__giant-label {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed, 1.6) !important;
	color: var(--ink) !important;
	opacity: 0.78;
	max-width: 34ch;
	margin: 0 !important;
}

/* Secondary mini stats. */
body.aibt-universal .universal-stats--single-hero-figure .universal-stats__mini-number {
	font-family: var(--font-display) !important;
	font-size: clamp(1.5rem, 3vw, 2rem) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: -0.02em !important;
	color: var(--ink) !important;
	margin: 0 0 0.2rem 0 !important;
}

body.aibt-universal .universal-stats--single-hero-figure .universal-stats__mini-label {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: 1.35 !important;
	color: var(--ink) !important;
	opacity: 0.66;
	margin: 0 !important;
}

/* Mobile — stack columns, drop the divider, shrink the giant figure. */
@media (max-width: 781px) {
	body.aibt-universal .universal-stats--single-hero-figure .universal-stats__aside-col {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
		padding-top: calc(clamp(1.2rem, 5vw, 1.8rem) * var(--density, 1));
		flex-direction: row;
		flex-wrap: wrap;
		gap: clamp(1rem, 5vw, 1.6rem) clamp(1.6rem, 7vw, 2.4rem);
	}

	body.aibt-universal .universal-stats--single-hero-figure .universal-stats__mini {
		flex: 1 1 30%;
		min-width: 8rem;
	}

	body.aibt-universal .universal-stats--single-hero-figure .universal-stats__giant-label {
		max-width: none;
	}
}