/**
 * Variant CSS: video--two-up-grid
 *
 * Two videos side by side — each a 16:9 photo poster with a CSS play disc
 * (no autoplay, no JS) and a caption with a duration. Unlike the single-video
 * variants: tells two stories at once (e.g. "how we work" + "client stories").
 * Text stays --ink (polarity-aware); kicker, em and the play triangle take
 * --accent. Posters' img src are swapped by the photo system. Part of the
 * `video` role.
 */

body.aibt-universal .universal-video--two-up-grid {
	padding-block: calc(clamp(3rem, 7vw, 5rem) * var(--density, 1));
}

/* Intro. */
body.aibt-universal .universal-video--two-up-grid .universal-video__intro {
	margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}

body.aibt-universal .universal-video--two-up-grid .universal-video__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-video--two-up-grid .universal-video__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-video--two-up-grid .universal-video__headline em {
	color: var(--accent) !important;
	font-style: italic;
}

/* Two posters. */
body.aibt-universal .universal-video--two-up-grid .universal-video__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.2rem, 3vw, 2.2rem);
}

body.aibt-universal .universal-video--two-up-grid .universal-video__poster {
	position: relative;
	border-radius: var(--decor-radius, 16px);
	overflow: hidden;
	cursor: pointer;
}

body.aibt-universal .universal-video--two-up-grid .universal-video__poster-img {
	margin: 0 !important;
}

body.aibt-universal .universal-video--two-up-grid .universal-video__poster-img img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	filter: var(--photo-filter, none);
}

/* Subtle gradient so the play disc always reads. */
body.aibt-universal .universal-video--two-up-grid .universal-video__poster::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 55%, rgba(0, 0, 0, 0.22));
	pointer-events: none;
}

/* CSS play disc. */
body.aibt-universal .universal-video--two-up-grid .universal-video__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	display: grid;
	place-items: center;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
	transition: transform var(--duration-fast, 0.18s) var(--ease-default, ease),
		background var(--duration-fast, 0.18s) var(--ease-default, ease);
}

body.aibt-universal .universal-video--two-up-grid .universal-video__play::before {
	content: "";
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent var(--accent);
	margin-left: 4px;
}

body.aibt-universal .universal-video--two-up-grid .universal-video__poster:hover .universal-video__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: #ffffff;
}

/* Caption. */
body.aibt-universal .universal-video--two-up-grid .universal-video__caption {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
	opacity: 0.78;
	margin: var(--space-sm) 0 0 0 !important;
}

/* Mobile: stack the two posters. */
@media (max-width: 700px) {
	body.aibt-universal .universal-video--two-up-grid .universal-video__grid {
		grid-template-columns: 1fr;
		gap: clamp(1.4rem, 5vw, 2rem);
	}
}

/* A5: neutralise wide tracking on small screens so the centred kicker never wraps. */
@media (max-width: 640px) {
	body.aibt-universal .universal-video--two-up-grid .universal-video__kicker {
		letter-spacing: 0 !important;
	}
}

/* Respect reduced-motion: drop the play-disc hover scale/transition. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-video--two-up-grid .universal-video__play {
		transition: none;
	}
	body.aibt-universal .universal-video--two-up-grid .universal-video__poster:hover .universal-video__play {
		transform: translate(-50%, -50%);
	}
}

/* A8/A9 left-shift fix (2026-06-08): centered intro element(s) were max-width-capped by
   WP constrained layout but pinned left by horizontal margin:0. Force margin-inline:auto.
   Section class doubled -> specificity (0,4,1) beats h2.__headline-style rules; harmless on
   already-centered elements (auto margins compute to 0). Only left/right are overridden. */
body.aibt-universal .universal-video--two-up-grid.universal-video--two-up-grid .universal-video__headline { margin-inline: auto !important; }