/**
 * Variant CSS: stats--vs-industry-comparison
 *
 * Each metric is a row with two stacked horizontal bars: top "us" (accent,
 * usually longer) and bottom "industry average" (muted, usually shorter), with
 * the value pinned at the end of each bar. A My / Średnia legend sits above the
 * list. Structurally distinct from proportion-bars (one bar per metric) and
 * comparison-then-now (then→now arrow on bare numbers): this is the only variant
 * that pairs YOUR result against a market benchmark as a grouped bar chart.
 * Static — fill widths set inline in the markup, no JS. Part of the `stats` role.
 * EVERY selector scoped to .universal-stats--vs-industry-comparison.
 */

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

/* --- Intro -------------------------------------------------------------- */
body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__intro {
	margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
}

body.aibt-universal .universal-stats--vs-industry-comparison .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--vs-industry-comparison .universal-stats__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 0 var(--space-sm) 0 !important;
}

/* Emphasized headline word takes the accent. */
body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__headline em {
	color: var(--accent) !important;
	font-style: normal !important;
}

body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed, 1.6) !important;
	color: var(--text-secondary, color-mix(in srgb, var(--ink) 66%, transparent)) !important;
	margin: 0 !important;
	max-width: 56ch;
}

/* --- Legend ------------------------------------------------------------- */
body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__legend {
	gap: clamp(1rem, 3vw, 1.8rem) !important;
	align-items: center !important;
	margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
}

body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__legend-item {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 700 !important;
	letter-spacing: var(--tracking-wide) !important;
	text-transform: uppercase !important;
	color: var(--ink) !important;
	margin: 0 !important;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Swatch chips matching the two bar colors. */
body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__legend-item::before {
	content: "";
	width: 0.85rem;
	height: 0.85rem;
	border-radius: var(--decor-radius, 3px);
	flex-shrink: 0;
}

body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__legend-item--us::before {
	background: var(--accent);
}

body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__legend-item--avg::before {
	background: color-mix(in srgb, var(--ink) 24%, transparent);
}

/* --- Rows --------------------------------------------------------------- */
body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__rows {
	display: flex !important;
	flex-direction: column !important;
	gap: clamp(1.4rem, 3.4vw, 2.2rem) !important;
}

body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__metric {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5rem !important;
	padding-top: calc(clamp(1.1rem, 2.8vw, 1.6rem) * var(--density, 1));
	border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__metric:first-child {
	border-top: 0;
	padding-top: 0;
}

body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__metric-label {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: var(--ink) !important;
	margin: 0 0 0.2rem 0 !important;
}

/* Bar pair: track stretches, figure pinned at the end. */
body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__pair {
	gap: clamp(0.7rem, 2vw, 1.1rem) !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
}

body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__track {
	flex: 1 1 auto;
	min-width: 0;
	height: clamp(0.7rem, 1.8vw, 0.95rem);
	border-radius: var(--decor-radius-pill, 999px);
	background: color-mix(in srgb, var(--ink) 8%, transparent);
	overflow: hidden;
}

body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	min-width: 2px;
}

body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__fill--us {
	background: var(--accent);
}

body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__fill--avg {
	background: color-mix(in srgb, var(--ink) 24%, transparent);
}

/* Value pinned at bar end — tabular for clean stacking. */
body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__figure {
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: -0.02em !important;
	font-variant-numeric: tabular-nums;
	margin: 0 !important;
	flex-shrink: 0;
	text-align: right;
	min-width: 3.6ch;
}

body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__figure--us {
	font-size: clamp(1.2rem, 2.6vw, 1.6rem) !important;
	color: var(--accent) !important;
}

body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__figure--avg {
	font-size: clamp(1rem, 2.2vw, 1.3rem) !important;
	color: var(--text-secondary, color-mix(in srgb, var(--ink) 58%, transparent)) !important;
	font-weight: 600 !important;
}

/* --- Phone -------------------------------------------------------------- */
@media (max-width: 640px) {
	/* Cap the uppercase kicker + legend tracking to 0 on a narrow viewport (A5). */
	body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__kicker,
	body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__legend-item {
		letter-spacing: 0 !important;
	}
	body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__figure {
		min-width: 3ch;
	}
}

/* Respect reduced-motion: nothing animates here, but keep the contract explicit
   so any future hover transition stays opt-out. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-stats--vs-industry-comparison .universal-stats__fill {
		transition: none !important;
	}
}