/**
 * Variant CSS: before-after--single-pair-caption-panel
 * Layer 2 — Path B before-after role (count-1 expansion 2026-06-10).
 * Editorial two-column layout: a compact "before | after" pair on one side, a text
 * panel (kicker / result title / description) on the other, like a page from a
 * portfolio of jobs. Distinct from side-by-side (the bare pair full-width with the
 * heading above) and slider-divider (a fused frame with a grip): here the images and
 * the copy stand side by side, the text carrying the context of the transformation.
 * Labels sit on the photos so their colours are fixed (correct text-on-photo pattern).
 * Images are literal client uploads.
 */

body.aibt-universal .universal-before-after--single-pair-caption-panel {
	background: var(--background);
	color: var(--text-primary);
	padding-block: calc(clamp(3rem, 7vw, 5rem) * var(--density, 1));
}

/* Two-column row — stay side-by-side on desktop (keep WP-core nowrap); the
   ≤781px query below flips to wrap so the columns stack. NOTE: do NOT force
   flex-wrap:wrap here — with 58%/42% bases + gap the total exceeds 100% and the
   panel wraps below the pair at desktop, leaving dead whitespace (fixed 2026-06-10). */
body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__row {
	flex-wrap: nowrap !important;
	align-items: center;
}

/* Media column — the paired shots. */
body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__media {
	min-width: 0;
}

body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__pair {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--space-xs) !important;
	border-radius: var(--decor-radius);
	overflow: hidden;
}

body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__shot {
	position: relative;
	flex: 1 1 50%;
	min-width: 0;
	overflow: hidden;
}

body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__img {
	margin: 0 !important;
	height: 100%;
}

body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__img img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	filter: var(--photo-filter, none);
	transition: transform var(--duration-slow, 900ms) var(--ease-elegant, ease);
}

/* Slightly desaturate the "before" so the "after" pops by contrast. */
body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__shot--before .universal-before-after__img img {
	filter: var(--photo-filter, grayscale(0.18) contrast(0.96));
}

/* Gentle zoom on hover per shot — tactile "real result" cue. */
body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__shot:hover .universal-before-after__img img {
	transform: scale(1.04);
}

/* Corner label chips on each shot. Fixed scrim = correct text-on-photo pattern. */
body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__label {
	position: absolute;
	top: var(--space-sm);
	z-index: 2;
	margin: 0 !important;
	padding: 0.34em 0.8em !important;
	border-radius: var(--decor-radius-pill);
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 700 !important;
	letter-spacing: var(--tracking-wide) !important;
	text-transform: uppercase !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.22);
}

body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__label--before {
	left: var(--space-sm);
	background: var(--background-dark, #141414);
	color: var(--text-on-dark, #fff) !important;
}

body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__label--after {
	right: var(--space-sm);
	background: var(--cta-bg-primary);
	color: var(--cta-text-primary) !important;
}

/* Text panel — TITLE-BREAK TRAP guard: pin a sensible min-width and keep words whole. */
body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__panel {
	min-width: 280px;
	overflow-wrap: normal;
}

body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__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-before-after--single-pair-caption-panel h2.universal-before-after__headline,
body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-sm) 0 !important;
	overflow-wrap: normal;
}

body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__desc {
	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 !important;
	max-width: 46ch;
}

/* Mobile / tablet: stack — copy first, then the pair, full width. */
@media (max-width: 781px) {
	body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__row {
		flex-wrap: wrap !important;
	}
	body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__media,
	body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__panel {
		flex-basis: 100% !important;
		width: 100% !important;
	}
	body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__panel {
		order: -1;
		min-width: 0;
		margin-bottom: var(--space-md);
	}
}

/* Cap wide uppercase tracking on small screens (A5 — wide tracking hurts small text). */
@media (max-width: 640px) {
	body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__kicker,
	body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__label {
		letter-spacing: 0 !important;
	}
}

/* Honour reduced-motion — kill the hover zoom. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__img img,
	body.aibt-universal .universal-before-after--single-pair-caption-panel .universal-before-after__shot:hover .universal-before-after__img img {
		transition: none;
		transform: none;
	}
}