/**
 * Variant CSS: stats--donut-ring-figures
 * Layer 2 — Path B stats role (2026-06-06).
 * Row of 4 stats rendered as conic-gradient donut rings; ring fill mirrors the
 * percentage via an inline `--ring` (unitless 0-100) on the ring group. Figure
 * sits in the hole, label + tiny context line below. Static (no JS).
 * EVERY selector scoped to .universal-stats--donut-ring-figures (no global leak).
 */

body.aibt-universal .universal-stats--donut-ring-figures {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary);
}

/* Restore WP constrained-layout centering for centered blocks. */
body.aibt-universal .universal-stats.universal-stats--donut-ring-figures .has-text-align-center {
	margin-inline: auto !important;
}

body.aibt-universal .universal-stats--donut-ring-figures .universal-stats__intro {
	text-align: center;
	margin-bottom: clamp(3rem, 6vh, 5rem);
}

body.aibt-universal .universal-stats--donut-ring-figures .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 auto var(--space-sm) auto !important;
}

body.aibt-universal .universal-stats--donut-ring-figures .universal-stats__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 auto !important;
}

body.aibt-universal .universal-stats--donut-ring-figures .universal-stats__row {
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: flex-start;
}

body.aibt-universal .universal-stats--donut-ring-figures .universal-stats__metric {
	text-align: center;
}

/* The donut: a ::before paints the conic ring (accent sweep up to `--ring`%,
   remainder = faint track) and a radial mask punches the hole so only the rim
   shows. Painting on the pseudo (not the group) keeps the figure child clear of
   the mask, so the number stays fully opaque in the centre. */
body.aibt-universal .universal-stats--donut-ring-figures .universal-stats__ring {
	--ring: 75; /* fallback if inline value is absent */
	position: relative;
	width: clamp(8rem, 16vw, 11rem);
	aspect-ratio: 1 / 1;
	margin: 0 auto var(--space-md) auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

body.aibt-universal .universal-stats--donut-ring-figures .universal-stats__ring::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		conic-gradient(
			var(--accent) calc(var(--ring) * 1%),
			color-mix(in srgb, var(--ink) 12%, transparent) 0
		);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
	        mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
}

/* Figure lives in the centre of the ring hole, above the painted ::before. */
body.aibt-universal .universal-stats--donut-ring-figures .universal-stats__figure {
	position: relative;
	z-index: 1;
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	font-size: clamp(1.6rem, 3.4vw, 2.4rem) !important;
	color: var(--ink) !important;
	margin: 0 auto !important;
	line-height: 1 !important;
	letter-spacing: -0.03em !important;
	font-variant-numeric: tabular-nums;
}

body.aibt-universal .universal-stats--donut-ring-figures .universal-stats__label {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	font-weight: 600 !important;
	color: var(--text-primary) !important;
	margin: 0 auto var(--space-2xs) auto !important;
	line-height: 1.3 !important;
}

body.aibt-universal .universal-stats--donut-ring-figures .universal-stats__desc {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	color: var(--text-secondary) !important;
	margin: 0 auto !important;
	line-height: 1.45 !important;
	max-width: 22ch;
}

/* Tablet: 2-up grid so rings stay readable. */
@media (max-width: 781px) {
	body.aibt-universal .universal-stats--donut-ring-figures .universal-stats__row {
		flex-wrap: wrap;
	}
	body.aibt-universal .universal-stats--donut-ring-figures .universal-stats__metric {
		flex-basis: calc(50% - 1.25rem) !important;
	}
}

/* Phone: single column, cap kicker tracking (A5). */
@media (max-width: 640px) {
	body.aibt-universal .universal-stats--donut-ring-figures .universal-stats__metric {
		flex-basis: 100% !important;
	}
	body.aibt-universal .universal-stats--donut-ring-figures .universal-stats__kicker {
		letter-spacing: 0 !important;
	}
	body.aibt-universal .universal-stats--donut-ring-figures .universal-stats__ring {
		width: clamp(9rem, 40vw, 11rem);
	}
}