/**
 * Variant CSS: testimonials--rating-breakdown-bars
 *
 * Aggregate score (left) beside a 5->1 star distribution rendered as horizontal
 * bars — a review histogram (Google / marketplace style) — with one strong quote
 * underneath. Unlike grids and single quotes: it proves the SHAPE of the ratings,
 * not just the average, so the dominant 5-star slice reads at a glance. Bars use a
 * neutral track + an --accent fill whose width is set inline per row. Body text is
 * --ink (polarity-aware); score, stars and fills take --accent / color-mix. Part of
 * the `testimonials` role.
 */

body.aibt-universal .universal-testimonials--rating-breakdown-bars {
	padding-block: calc(clamp(3rem, 7vw, 5rem) * var(--density, 1));
}

/* ---- Intro ---- */
body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__intro {
	margin: 0 auto clamp(1.8rem, 4vw, 2.8rem) auto;
	text-align: center;
}

body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__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-testimonials--rating-breakdown-bars .universal-testimonials__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 auto !important;
}

body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__headline em,
body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__headline mark {
	color: var(--accent);
	font-style: inherit;
	background: transparent;
}

/* ---- Panel: aggregate + bars ---- */
body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__panel {
	gap: clamp(1.6rem, 4vw, 3rem);
	align-items: center;
	padding: clamp(1.8rem, 4.5vw, 2.8rem);
	border-radius: var(--decor-radius, 18px);
	background: color-mix(in srgb, var(--accent) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}

/* ---- Aggregate score block ---- */
body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__aggregate {
	text-align: center;
}

body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__score {
	font-family: var(--font-display) !important;
	font-size: clamp(3.4rem, 8vw, 5.2rem) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: -0.04em !important;
	color: var(--accent) !important;
	margin: 0 auto !important;
	font-variant-numeric: tabular-nums;
}

body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__stars {
	font-size: 1.3rem !important;
	letter-spacing: 0.12em !important;
	line-height: 1 !important;
	color: var(--accent) !important;
	margin: var(--space-sm) auto 0 auto !important;
}

body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__count {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--ink) !important;
	opacity: 0.7;
	margin: var(--space-sm) auto 0 auto !important;
}

/* ---- Distribution bars ---- */
body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__bars {
	display: flex;
	flex-direction: column;
	gap: clamp(0.55rem, 1.4vw, 0.85rem);
}

body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__barrow {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(0.6rem, 1.6vw, 1rem);
}

body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__barlabel {
	flex: 0 0 auto;
	width: 2.6rem;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
	margin: 0 !important;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__bartrack {
	flex: 1 1 auto;
	height: 0.55rem;
	border-radius: var(--decor-radius-pill, 999px);
	background: color-mix(in srgb, var(--ink) 12%, transparent);
	overflow: hidden;
}

body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__barfill {
	height: 100%;
	min-width: 0;
	border-radius: var(--decor-radius-pill, 999px);
	background: var(--accent);
	transition: width var(--duration-fast, 200ms) var(--ease-default, ease);
}

body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__barpct {
	flex: 0 0 auto;
	width: 2.8rem;
	text-align: right;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
	opacity: 0.78;
	margin: 0 !important;
	font-variant-numeric: tabular-nums;
}

/* ---- Closing quote ---- */
body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__quote {
	margin: clamp(1.8rem, 4vw, 2.8rem) auto 0 auto;
	text-align: center;
}

body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__quotetext {
	font-family: var(--font-display) !important;
	font-size: clamp(1.25rem, 2.8vw, 1.7rem) !important;
	line-height: 1.4 !important;
	color: var(--ink) !important;
	margin: 0 auto !important;
}

body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__author {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
	opacity: 0.74;
	margin: var(--space-md) auto 0 auto !important;
}

body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__role {
	font-weight: 400;
	opacity: 0.85;
}

/* Reduced motion: no animated fill width. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__barfill {
		transition: none;
	}
}

/* Mobile: stack aggregate above bars. */
@media (max-width: 781px) {
	body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__panel {
		gap: clamp(1.4rem, 5vw, 2rem);
	}
	body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__aggregate,
	body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__bars {
		flex-basis: 100% !important;
	}
}

@media (max-width: 640px) {
	/* A5: cap uppercase kicker tracking on small screens to avoid line-break artifacts. */
	body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__kicker {
		letter-spacing: 0 !important;
	}
	body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__barlabel {
		width: 2.4rem;
	}
	body.aibt-universal .universal-testimonials--rating-breakdown-bars .universal-testimonials__barpct {
		width: 2.6rem;
	}
}