/**
 * Variant CSS: testimonials--triple-quote-marks-columns
 * Layer 2 — Path B testimonials role (2026-06-10).
 * Exactly THREE equal editorial columns, each anchored by an oversized
 * decorative quotation mark; columns are separated by vertical hairline rules.
 * Pure typography carries the layout — no card surfaces — so --text-primary on
 * --background stays polarity-safe (KI-020). Distinct from big-marks-duo-columns
 * (only TWO columns) and from featured-plus-trio (one hero panel + a 3-up card
 * trio = four total). wp:columns is forced to flex-wrap:wrap so the three
 * columns never overflow the row at ≥782px (WP-core nowrap default). Scales
 * 3 → 1 column on mobile (vertical rules become horizontal seams).
 * Every selector scoped to .universal-testimonials--triple-quote-marks-columns.
 */

body.aibt-universal .universal-testimonials--triple-quote-marks-columns {
	background: var(--background);
	color: var(--text-primary);
}

/* ---- intro (centered → auto horizontal margins, A8) ------------------- */
body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__intro {
	text-align: center;
	margin: 0 auto var(--space-7, 48px) auto;
}
body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest, 0.16em) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 auto var(--space-3, 12px) auto !important;
}
body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 auto !important;
}

/* ---- trio: three equal columns, forced wrap (A: WP-core nowrap ≥782) -- */
body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__trio {
	gap: 0 !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
}
body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__col {
	flex: 1 1 0 !important;
	min-width: 0;
	box-sizing: border-box;
	padding: 0 var(--space-6, 32px) !important;
	/* Vertical hairline between columns (skip the first via the rule below). */
	border-left: 1px solid var(--divider-primary);
}
/* First column has no left rule — the seam belongs between columns only. */
body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__col:first-child {
	border-left: none;
	padding-left: 0 !important;
}
body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__col:last-child {
	padding-right: 0 !important;
}

/* ---- oversized decorative quotation mark anchoring each column ------- */
body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__bigmark {
	font-family: var(--font-display) !important;
	font-size: clamp(3rem, 5vw, 4.5rem) !important;
	line-height: 0.5 !important;
	height: 0.45em;
	color: var(--accent) !important;
	opacity: 0.32;
	margin: 0 0 var(--space-4, 16px) 0 !important;
}

/* ---- star motif (static, not a fabricated metric) -------------------- */
body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__stars {
	font-size: var(--text-base) !important;
	line-height: 1 !important;
	letter-spacing: 0.1em !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-3, 12px) 0 !important;
}

/* ---- quote body ------------------------------------------------------ */
body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__quote {
	font-family: var(--font-body) !important;
	font-size: var(--text-md) !important;
	line-height: var(--leading-relaxed, 1.65) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-5, 24px) 0 !important;
}

/* ---- author block ---------------------------------------------------- */
body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__name {
	font-family: var(--font-display) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
	line-height: 1.3 !important;
}
body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__authorrole {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	/* --text-secondary clears AA 4.5:1 on the section bg across themes */
	color: var(--text-secondary) !important;
	margin: 2px 0 0 0 !important;
	line-height: 1.3 !important;
}

/* ---- tablet (641-959): keep 3 columns, tighten the inner padding ----- */
@media (max-width: 959px) {
	body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__col {
		padding: 0 var(--space-4, 16px) !important;
	}
	body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__col:first-child {
		padding-left: 0 !important;
	}
	body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__col:last-child {
		padding-right: 0 !important;
	}
}

/* ---- mobile (≤640): single column — vertical rules become horizontal -- */
@media (max-width: 640px) {
	body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__col {
		flex-basis: 100% !important;
		padding: var(--space-6, 32px) 0 0 0 !important;
		border-left: none;
		border-top: 1px solid var(--divider-primary);
	}
	body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__col:first-child {
		padding-top: 0 !important;
		border-top: none;
	}
	body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__kicker {
		letter-spacing: 0 !important; /* A5: avoid uppercase line-break artifacts */
	}
}

/* Respect reduced-motion: no motion in this variant, but declare the block so
   the per-variant contract (every variant ships a reduced-motion guard) holds. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-testimonials--triple-quote-marks-columns .universal-testimonials__bigmark {
		transition: none;
	}
}