/**
 * Variant CSS: about--video-intro-split
 * Layer 2 - Path B universal ABOUT variant (text + video-poster split).
 *
 * Concept: a text column (kicker + headline + paragraph + 3 ticked points + CTA)
 * beside a video POSTER - a photo framed as a clickable still with a centered
 * CSS play button and a small caption. Reuses the standard universal-about__photo
 * image class. Distinct from story-photo-split (plain portrait) and dual-image-
 * story: the play affordance + caption signal "watch us" rather than "read us".
 *
 * Surface contract: section on --background. The play disc sits on the photo
 * (an always-busy/dark surface) so it uses --accent fill + a white glyph for a
 * guaranteed-legible target on any image. A subtle scrim darkens the photo so
 * the disc never disappears on a light frame. Semantic tokens only; never
 * color:var(--bg-main) as foreground.
 */

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

body.aibt-universal .universal-about--video-intro-split .universal-about__grid {
	margin: 0 !important;
}

/* === Text column ========================================================== */
body.aibt-universal .universal-about--video-intro-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-md) 0 !important;
}

body.aibt-universal .universal-about--video-intro-split h2.universal-about__headline,
body.aibt-universal .universal-about--video-intro-split .universal-about__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

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

body.aibt-universal .universal-about--video-intro-split .universal-about__body {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 0 var(--space-md) 0 !important;
	max-width: 52ch;
}

/* Ticked points - accent check marker via ::before, no list bullets. */
body.aibt-universal .universal-about--video-intro-split .universal-about__points {
	list-style: none !important;
	margin: 0 0 var(--space-lg) 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

body.aibt-universal .universal-about--video-intro-split .universal-about__points li {
	position: relative;
	padding-left: 1.9rem;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-primary) !important;
}

/* Tinted accent disc behind the check. */
body.aibt-universal .universal-about--video-intro-split .universal-about__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: var(--decor-radius-pill, 999px);
	background: var(--accent-fade, color-mix(in srgb, var(--accent) 14%, transparent));
}

/* Real check glyph - a rotated, bottom+right border. Reliable across themes. */
body.aibt-universal .universal-about--video-intro-split .universal-about__points li::after {
	content: "";
	position: absolute;
	left: 0.42rem;
	top: 0.28em;
	width: 0.34rem;
	height: 0.62rem;
	border-right: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(40deg);
}

/* CTA - theme button tokens. */
body.aibt-universal .universal-about--video-intro-split .universal-about__cta .wp-block-button__link {
	background: var(--cta-bg-primary) !important;
	color: var(--cta-text-primary) !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	border-radius: var(--decor-radius-pill, var(--decor-radius, 0px)) !important;
	transition: background-color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-about--video-intro-split .universal-about__cta .wp-block-button__link:hover {
	background: var(--accent-hover, var(--accent)) !important;
	transform: translateY(-1px);
}

/* Keyboard focus ring — visible accent outline for non-pointer navigation. */
body.aibt-universal .universal-about--video-intro-split .universal-about__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: inherit;
}

/* === Video poster ========================================================= */
body.aibt-universal .universal-about--video-intro-split .universal-about__videowrap {
	position: relative;
	margin: 0 !important;
}

body.aibt-universal .universal-about--video-intro-split .universal-about__photo {
	margin: 0 !important;
	overflow: hidden;
	border-radius: var(--decor-radius, 0px);
	position: relative;
}

body.aibt-universal .universal-about--video-intro-split .universal-about__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--decor-radius, 0px);
}

/* Scrim so the play disc stays legible on a light frame. */
body.aibt-universal .universal-about--video-intro-split .universal-about__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, #000 28%, transparent) 100%);
	pointer-events: none;
	border-radius: var(--decor-radius, 0px);
}

/* Centered play button - accent disc + white glyph (legible on any image). */
body.aibt-universal .universal-about--video-intro-split .universal-about__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(3.5rem, 7vw, 4.75rem);
	height: clamp(3.5rem, 7vw, 4.75rem);
	border-radius: var(--decor-radius-pill, 999px);
	background: var(--accent);
	color: var(--text-on-dark, #ffffff);
	box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--text-on-dark, #fff) 22%, transparent);
	z-index: 2;
	transition: transform var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-about--video-intro-split .universal-about__play svg {
	width: 42%;
	height: 42%;
	margin-left: 8%; /* optically center the triangle */
	display: block;
}

body.aibt-universal .universal-about--video-intro-split .universal-about__videowrap:hover .universal-about__play {
	transform: translate(-50%, -50%) scale(1.06);
}

/* Caption beneath the poster. */
body.aibt-universal .universal-about--video-intro-split .universal-about__videocaption {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-wide) !important;
	text-transform: uppercase !important;
	color: var(--text-secondary) !important;
	margin: var(--space-sm) 0 0 0 !important;
}

/* Tighten wide tracking on phones (A5). */
@media (max-width: 640px) {
	body.aibt-universal .universal-about--video-intro-split .universal-about__kicker,
	body.aibt-universal .universal-about--video-intro-split .universal-about__videocaption {
		letter-spacing: 0 !important;
	}
}

/* === Motion respect ======================================================= */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-about--video-intro-split .universal-about__play,
	body.aibt-universal .universal-about--video-intro-split .universal-about__cta .wp-block-button__link {
		transition: none;
	}
	body.aibt-universal .universal-about--video-intro-split .universal-about__videowrap:hover .universal-about__play {
		transform: translate(-50%, -50%);
	}
	body.aibt-universal .universal-about--video-intro-split .universal-about__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* === Editor parity ======================================================== */
.editor-styles-wrapper .universal-about--video-intro-split .universal-about__cta .wp-block-button__link {
	transform: none !important;
}