/**
 * Variant CSS: about--mission-vision-split
 * Layer 2 - Path B universal ABOUT variant (mission | vision two-panel split).
 *
 * Concept: a left-aligned intro (kicker + a single lead line) then TWO equal
 *   panels side by side - Misja | Wizja. Each panel leads with a small accent
 *   label, a LARGE statement (the focal idea) and a short supporting line. A
 *   vertical hairline divides the pair on desktop; on mobile it collapses to a
 *   horizontal hairline between the stacked panels. Distinct from the trio
 *   variant (three icon pillars on cards): this is a deliberate TWO-up split,
 *   no icons, no cards - just typography and a seam.
 *
 * Surface contract: panels sit on the section --background (no card fill) and
 * lean on the seam + a subtle accent edge to read as a pair. Semantic tokens
 * only; never color:var(--bg-main) as foreground.
 *
 * Scoping: EVERY selector starts with
 *   body.aibt-universal .universal-about--mission-vision-split
 * because the theme enqueues ALL variant CSS globally.
 *
 * @package AI_Base_Theme
 * @since 2026-06-06 (Path B Variants Library)
 */

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

/* === Intro - left aligned, narrow measure ================================= */
body.aibt-universal .universal-about--mission-vision-split .universal-about__intro {
	max-width: 52ch;
	margin: 0 0 clamp(2.25rem, 5vh, 3.75rem) 0;
}

body.aibt-universal .universal-about--mission-vision-split .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 0 var(--space-sm) 0 !important;
}

body.aibt-universal .universal-about--mission-vision-split .universal-about__lead {
	font-family: var(--font-display) !important;
	font-size: clamp(1.35rem, 2.4vw, 1.9rem) !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

/* === Two-panel split ======================================================
   Mobile-first: panels are full-width and stack. flex-wrap lets them reflow to
   2-up on desktop via the flex-basis floor below. */
body.aibt-universal .universal-about--mission-vision-split .universal-about__split {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0 !important;
	margin: 0 !important;
	border-top: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.12));
}

body.aibt-universal .universal-about--mission-vision-split .universal-about__panel {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 100%;
	padding: var(--space-lg) 0;
	transition: transform var(--duration-fast, 240ms) var(--ease-default, ease);
}

/* Horizontal seam between the stacked panels on mobile (the row border-top
   above already caps the first panel). */
body.aibt-universal .universal-about--mission-vision-split .universal-about__panel + .universal-about__panel {
	border-top: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.12));
}

/* Subtle accent edge differentiates the Wizja panel from Misja. */
body.aibt-universal .universal-about--mission-vision-split .universal-about__panel--vision {
	position: relative;
}

body.aibt-universal .universal-about--mission-vision-split .universal-about__panel-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-md) 0 !important;
}

body.aibt-universal .universal-about--mission-vision-split h3.universal-about__panel-statement,
body.aibt-universal .universal-about--mission-vision-split .universal-about__panel-statement {
	font-family: var(--font-display) !important;
	font-weight: 500 !important;
	font-size: clamp(1.5rem, 2.4vw, 2.1rem) !important;
	line-height: 1.2 !important;
	letter-spacing: -0.015em !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-md) 0 !important;
	max-width: 22ch;
	overflow-wrap: break-word;
}

body.aibt-universal .universal-about--mission-vision-split .universal-about__panel-body {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed, 1.65) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
	max-width: 42ch;
}

/* === Desktop: 2-up row with a vertical seam (>=782px) =====================
   Each panel takes half the row; the second gets the dividing rule + matching
   inset padding so the two read as a balanced pair across a seam. */
@media (min-width: 782px) {
	body.aibt-universal .universal-about--mission-vision-split .universal-about__panel {
		flex: 1 1 50%;
		padding: clamp(2rem, 3.5vw, 3.25rem) clamp(2rem, 3.5vw, 3.25rem) clamp(2rem, 3.5vw, 3.25rem) 0;
	}

	/* The vertical seam lives on the second panel and the row-top hairline caps
	   the whole pair. Reset the stacked horizontal seam from mobile. */
	body.aibt-universal .universal-about--mission-vision-split .universal-about__panel + .universal-about__panel {
		border-top: 0;
		border-left: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.12));
		padding-left: clamp(2rem, 3.5vw, 3.25rem);
	}

	body.aibt-universal .universal-about--mission-vision-split .universal-about__panel:hover {
		transform: translateY(-3px);
	}
}

/* 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-split .universal-about__kicker,
	body.aibt-universal .universal-about--mission-vision-split .universal-about__panel-label {
		letter-spacing: 0 !important;
	}

	body.aibt-universal .universal-about--mission-vision-split .universal-about__panel-statement {
		max-width: none;
	}

	body.aibt-universal .universal-about--mission-vision-split .universal-about__panel-body {
		max-width: none;
	}
}

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

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