/**
 * Stats variant: Cards with Context
 *
 * Grid of stat cards on a tinted, elevated surface. Each card anchors on a
 * big accent number, with a unit, a metric label, and a one-line context
 * sentence. Section sits on --background; cards lift on --background-alt so
 * the elevation direction reads correctly on both light and dark themes.
 * All selectors scoped to body.aibt-universal .universal-stats--cards-with-context.
 * Semantic tokens only; no raw hex on theme surfaces.
 */

body.aibt-universal .universal-stats--cards-with-context {
	padding-block: var(--section-padding-block, clamp(3.5rem, 8vw, 7rem));
	padding-inline: var(--section-padding-inline, clamp(1.25rem, 5vw, 4rem));
	background-color: var(--background, #ffffff);
	color: var(--text-primary, #1a1a1a);
}

/* Head ---------------------------------------------------------------- */
body.aibt-universal .universal-stats--cards-with-context .universal-stats__head {
	max-width: 46rem;
	margin-bottom: clamp(2.25rem, 5vw, 3.75rem);
}

body.aibt-universal .universal-stats--cards-with-context .universal-stats__kicker {
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--font-size-eyebrow, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent, #b54a2e);
	margin: 0 0 0.75rem;
}

body.aibt-universal .universal-stats--cards-with-context .universal-stats__heading {
	font-family: var(--font-display, system-ui, sans-serif);
	font-size: var(--font-size-h2, clamp(1.625rem, 3.6vw, 2.6rem));
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--text-primary, #1a1a1a);
	text-wrap: balance;
}

/* Cards grid ---------------------------------------------------------- */
body.aibt-universal .universal-stats--cards-with-context .universal-stats__cards {
	gap: clamp(1rem, 2.4vw, 1.75rem);
	align-items: stretch;
}

body.aibt-universal .universal-stats--cards-with-context .universal-stats__card {
	display: flex;
	flex-direction: column;
	background-color: var(--background-alt, #f6f6f4);
	border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
	border-radius: var(--radius-card, 14px);
	padding: clamp(1.5rem, 2.6vw, 2.25rem);
	box-shadow: var(--shadow-card, 0 12px 32px rgba(0, 0, 0, 0.06));
	/* Hairline accent rail that anchors the number visually. */
	border-top: 3px solid var(--accent, #b54a2e);
	transition: transform 200ms ease, box-shadow 200ms ease;
}

/* Figure: number + unit on a shared baseline. The pair may wrap as whole
   tokens on a very narrow card (unit drops below the number), but neither
   token is ever allowed to break mid-word. ----------------------------- */
body.aibt-universal .universal-stats--cards-with-context .universal-stats__figure {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.4em;
	row-gap: 0.1rem;
	margin-bottom: 0.85rem;
}

body.aibt-universal .universal-stats--cards-with-context .universal-stats__num {
	font-family: var(--font-display, system-ui, sans-serif);
	font-size: clamp(2.5rem, 5.2vw, 3.85rem);
	font-weight: 800;
	line-height: 0.92;
	letter-spacing: -0.03em;
	color: var(--accent, #b54a2e);
	margin: 0;
	/* Anchor: never shrink, never break the figure across lines. */
	flex: 0 0 auto;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

body.aibt-universal .universal-stats--cards-with-context .universal-stats__unit {
	font-family: var(--font-display, system-ui, sans-serif);
	font-size: clamp(1rem, 1.6vw, 1.3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--text-secondary, #6b6b6b);
	margin: 0;
	/* Keep the unit word intact; let it drop to its own line as a whole. */
	white-space: nowrap;
}

/* Label: the metric name, strong. ------------------------------------- */
body.aibt-universal .universal-stats--cards-with-context .universal-stats__label {
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--text-primary, #1a1a1a);
	margin: 0 0 0.6rem;
}

/* Context: the explanatory sentence, the distinguishing element. ------ */
body.aibt-universal .universal-stats--cards-with-context .universal-stats__context {
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--font-size-small, 0.9375rem);
	line-height: 1.5;
	color: var(--text-secondary, #6b6b6b);
	margin: 0;
	/* Push context to the card foot so cards of uneven length stay aligned. */
	margin-top: auto;
	padding-top: 0.85rem;
	border-top: 1px solid var(--border, rgba(0, 0, 0, 0.1));
}

/* Hover: gentle lift, pointer devices only. --------------------------- */
@media (hover: hover) {
	body.aibt-universal .universal-stats--cards-with-context .universal-stats__card:hover {
		transform: translateY(-3px);
		box-shadow: var(--shadow-card, 0 18px 44px rgba(0, 0, 0, 0.1));
	}
}

/* Honour reduced-motion: drop the card lift transition + transform. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-stats--cards-with-context .universal-stats__card {
		transition: none;
	}
	body.aibt-universal .universal-stats--cards-with-context .universal-stats__card:hover {
		transform: none;
	}
}

/* Tablet: 2-up grid. -------------------------------------------------- */
@media (max-width: 959px) {
	body.aibt-universal .universal-stats--cards-with-context .universal-stats__cards {
		flex-wrap: wrap;
	}

	body.aibt-universal .universal-stats--cards-with-context .universal-stats__card {
		flex: 1 1 calc(50% - 0.75rem);
		min-width: calc(50% - 0.75rem);
	}
}

/* Mobile: single column, slightly tighter type. ----------------------- */
@media (max-width: 640px) {
	body.aibt-universal .universal-stats--cards-with-context .universal-stats__cards {
		gap: 1rem;
	}

	body.aibt-universal .universal-stats--cards-with-context .universal-stats__card {
		flex: 1 1 100%;
		min-width: 100%;
	}

	body.aibt-universal .universal-stats--cards-with-context .universal-stats__num {
		font-size: clamp(2.5rem, 14vw, 3.25rem);
	}
}

/* Editor parity: keep the card surface visible inside wp-admin. ------- */
.editor-styles-wrapper .universal-stats--cards-with-context .universal-stats__card {
	background-color: var(--background-alt, #f6f6f4);
	border-radius: var(--radius-card, 14px);
}