/**
 * Variant CSS: gallery--cinematic-letterbox-band
 * Layer 2 (Path B gallery role, 2026-06-10).
 *
 * One photograph as a cinema frame — an ultrawide 21:9 band running edge to edge
 * of the screen (alignfull), with a caption strip (kicker + headline + one caption)
 * laid over the bottom of the image on a dark gradient scrim. Unlike the centered
 * 16:9 cover (single-statement-frame): this is a panoramic, full-bleed "cinemascope"
 * banner. The strip text sits on the photo, so it uses --on-dark over a scrim (NOT
 * polarity-aware --ink, which would vanish — KI-020). The image src is swapped by
 * the photo system. Element Count [1]. Part of the `gallery` role.
 */

body.aibt-universal .universal-gallery--cinematic-letterbox-band {
	padding-block: calc(clamp(2.5rem, 6vw, 4.5rem) * var(--density, 1));
	overflow-x: hidden;
}

/* The full-bleed stage holds the photo and the overlaid caption strip. */
body.aibt-universal .universal-gallery--cinematic-letterbox-band .universal-gallery__stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 21 / 9;
	box-shadow: 0 26px 70px -34px color-mix(in srgb, var(--ink) 50%, transparent);
}

body.aibt-universal .universal-gallery--cinematic-letterbox-band .universal-gallery__img {
	margin: 0 !important;
	position: absolute;
	inset: 0;
	height: 100%;
}

body.aibt-universal .universal-gallery--cinematic-letterbox-band .universal-gallery__img img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	filter: var(--photo-filter, none);
	transition: transform var(--duration-cinematic, 1000ms) var(--ease-expressive, ease);
}

body.aibt-universal .universal-gallery--cinematic-letterbox-band .universal-gallery__stage:hover .universal-gallery__img img {
	transform: scale(1.04);
}

/* Caption strip — bottom-anchored, on a dark-to-transparent scrim so on-photo
   text stays readable on any image. Always-dark surface -> --on-dark text. */
body.aibt-universal .universal-gallery--cinematic-letterbox-band .universal-gallery__strip {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 2;
	padding-block: calc(clamp(2rem, 6vw, 4rem) clamp(1.4rem, 3.5vw, 2.4rem) * var(--density, 1));
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.46) 48%, rgba(0, 0, 0, 0) 100%);
}

body.aibt-universal .universal-gallery--cinematic-letterbox-band .universal-gallery__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest, 0.16em) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-sm, 0.75rem) 0 !important;
}

body.aibt-universal .universal-gallery--cinematic-letterbox-band .universal-gallery__headline {
	font-family: var(--font-display) !important;
	color: var(--on-dark, #ffffff) !important;
	max-width: 22ch;
	margin: 0 !important;
	text-wrap: balance;
}

body.aibt-universal .universal-gallery--cinematic-letterbox-band .universal-gallery__headline em {
	color: var(--on-dark, #ffffff);
	font-style: italic;
	opacity: 0.82;
}

body.aibt-universal .universal-gallery--cinematic-letterbox-band .universal-gallery__caption {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	font-weight: 500 !important;
	color: var(--on-dark, #ffffff) !important;
	opacity: 0.9;
	max-width: 52ch;
	margin: var(--space-sm, 0.75rem) 0 0 0 !important;
	line-height: var(--leading-relaxed, 1.5);
}

/* Tablet: a slightly taller crop keeps the panorama from going letterbox-thin. */
@media (max-width: 959px) {
	body.aibt-universal .universal-gallery--cinematic-letterbox-band .universal-gallery__stage,
	body.aibt-universal .universal-gallery--cinematic-letterbox-band .universal-gallery__img img {
		aspect-ratio: 16 / 9;
	}
}

/* Mobile: taller still so the subject survives a narrow column; tighten tracking. */
@media (max-width: 640px) {
	body.aibt-universal .universal-gallery--cinematic-letterbox-band .universal-gallery__stage,
	body.aibt-universal .universal-gallery--cinematic-letterbox-band .universal-gallery__img img {
		aspect-ratio: 4 / 5;
	}
	body.aibt-universal .universal-gallery--cinematic-letterbox-band .universal-gallery__kicker {
		letter-spacing: 0.04em !important;
	}
	body.aibt-universal .universal-gallery--cinematic-letterbox-band .universal-gallery__strip {
		padding-block: calc(clamp(2.5rem, 14vw, 4rem) clamp(1.1rem, 5vw, 1.6rem) * var(--density, 1));
	}
}

/* Keyboard focus parity with hover (stage/image is the focusable target when a
   client links the photo). */
body.aibt-universal .universal-gallery--cinematic-letterbox-band .universal-gallery__img a:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-gallery--cinematic-letterbox-band .universal-gallery__stage:hover .universal-gallery__img img {
		transform: none;
	}
}