/**
 * Variant CSS: about--mission-vision-values-trio
 * Layer 2 - Path B universal ABOUT variant (mission / vision / values triad).
 *
 * Concept: a centered intro (kicker + headline + deck) then THREE equal pillar
 * columns - Misja / Wizja / Wartości. Each pillar leads with a line-icon, a
 * small accent label, a LARGE pillar title (the focal idea) and a 1-2 line body.
 * Distinct from values-grid (numbered 3-4 value cards): this is a balanced,
 * conceptual triad with icons and no index digits - identity, not a checklist.
 *
 * Surface contract: pillars sit on --background-card (lifts clear of base AND
 * --background-alt on every dark theme) with a hairline edge; the icon sits in
 * a soft accent-tinted disc. Semantic tokens only; never color:var(--bg-main)
 * as foreground.
 */

/* === Section shell ======================================================== */
body.aibt-universal .universal-about--mission-vision-values-trio {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary);
}

/* === Centered intro ======================================================= */
body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__intro {
	max-width: 56ch;
	margin: 0 auto clamp(2.5rem, 6vh, 4.5rem) auto;
	text-align: center;
}

body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__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-md) auto !important;
}

body.aibt-universal .universal-about--mission-vision-values-trio h2.universal-about__headline,
body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 auto var(--space-md) auto !important;
}

/* Signature em-accent on the emphasised headline fragment — matches sibling
   about variants (italic-color theme treatment). */
body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent));
	font-weight: var(--italic-weight, inherit);
}

body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 auto !important;
}

/* === Pillar trio ==========================================================
   Mobile-first: pillars are full-width and stack. flex-wrap lets them reflow
   to 3-up on desktop via the flex-basis floor below. The core wp:columns row
   would otherwise force a single cramped row on phones. */
body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__trio {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--space-md) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__pillar {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 100%;
	padding: var(--space-lg) !important;
	background: var(--background-card, var(--background)) !important;
	border: 1px solid var(--divider-primary);
	border-radius: var(--decor-radius, 0px);
	transition: border-color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__pillar:hover {
	border-color: var(--accent);
	transform: translateY(-3px);
}

/* Icon disc - soft accent tint, accent-colored stroke. Decorative anchor for
   the pillar head; the TITLE remains the focal element. */
body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__pillar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--decor-radius-pill, 999px);
	background: var(--accent-fade, color-mix(in srgb, var(--accent) 12%, transparent));
	color: var(--accent);
	margin: 0 0 var(--space-md) 0;
	flex: 0 0 auto;
}

body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__pillar-icon svg {
	width: 1.5rem;
	height: 1.5rem;
	display: block;
}

body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__pillar-label {
	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-about--mission-vision-values-trio h3.universal-about__pillar-title,
body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__pillar-title {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: clamp(1.25rem, 1.6vw, 1.5rem) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-sm) 0 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
	overflow-wrap: break-word;
}

body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__pillar-body {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
}

/* === Desktop: 3-up row (>=782px) ==========================================
   Three per row, accounting for two gaps. */
@media (min-width: 782px) {
	body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__pillar {
		flex: 1 1 calc((100% - (var(--space-md) * 2)) / 3);
	}
}

/* Tighten wide kicker/label tracking on phones: 0.24em on a ~12px uppercase
   label fragments words at narrow widths (A5). Cap to 0. */
@media (max-width: 640px) {
	body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__kicker,
	body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__pillar-label {
		letter-spacing: 0 !important;
	}
}

/* === Motion respect ======================================================= */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__pillar {
		transition: none;
	}
	body.aibt-universal .universal-about--mission-vision-values-trio .universal-about__pillar:hover {
		transform: none;
	}
}

/* === Editor parity - no hover transform in the canvas ===================== */
.editor-styles-wrapper .universal-about--mission-vision-values-trio .universal-about__pillar {
	transform: none !important;
}