/**
 * Variant CSS: gallery--duo-big-plus-inset
 *
 * One large panoramic lead (16:9) running full width, with a smaller portrait print
 * framed in a light passe-partout over its TOP-LEFT corner, carrying its own caption
 * — like a photo laid on a photo. Unlike the overlap-float pair (4:3 base capped to
 * 86%, float in the BOTTOM-RIGHT corner, no frame, no caption): here the lead is
 * full-width and cinematic, and the overlap is a bordered, captioned print in the
 * opposite corner. The lead is held below full width on the left so the chip overlaps
 * inward and never crosses the section edge. On mobile the chip drops to a normal
 * second tile. Text stays --ink (polarity aware); kicker + em take --accent; images
 * carry --photo-filter; the chip mat uses --background-card so it reads as a cut-out
 * on any theme. Image src are swapped by the photo system. Dedicated to exactly two
 * photos. Part of the `gallery` role.
 */

body.aibt-universal .universal-gallery--duo-big-plus-inset {
	padding-block: calc(clamp(3rem, 7vw, 5.5rem) * var(--density, 1));
	background: var(--background);
	color: var(--text-primary);
}

/* Intro. */
body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__intro {
	margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__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-gallery--duo-big-plus-inset .universal-gallery__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__headline em {
	color: var(--accent) !important;
	font-style: italic;
}

/* The stage. Top + left padding reserves the lane the chip occupies so nothing
   spills past the section box. */
body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__inset {
	position: relative;
	padding-top: calc(clamp(2rem, 6vw, 4rem) * var(--density, 1));
	padding-left: clamp(2rem, 9vw, 6rem);
}

/* Lead photo — full-width cinematic 16:9. */
body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__img--lead {
	margin: 0 !important;
	overflow: hidden;
	border-radius: var(--decor-radius, 16px);
	box-shadow: var(--decor-shadow, none);
}

body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__img--lead img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	filter: var(--photo-filter, none);
	transition: transform var(--duration-slow, 500ms) var(--ease-default, ease);
}

body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__img--lead:hover img,
body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__img--lead:focus-within img {
	transform: scale(1.03);
}

/* The chip — a bordered, captioned print sitting over the lead's top-left corner. */
body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__chip {
	position: absolute;
	top: 0;
	left: 0;
	width: clamp(8rem, 26%, 14rem);
	background: var(--background-card);
	border: 1px solid var(--divider-primary);
	border-radius: var(--decor-radius, 16px);
	padding: clamp(0.4rem, 0.9vw, 0.7rem);
	box-shadow: var(--decor-shadow-elevated, 0 24px 60px rgba(15, 23, 42, 0.24));
	transition: transform var(--duration-medium, 350ms) var(--ease-default, ease);
	z-index: 2;
}

body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__chip:hover,
body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__chip:focus-within {
	transform: translateY(-4px);
}

body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__img--detail {
	margin: 0 !important;
	overflow: hidden;
	border-radius: calc(var(--decor-radius, 16px) - 6px);
}

body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__img--detail img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	filter: var(--photo-filter, none);
}

/* Caption plaque under the chip print. */
body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__caption {
	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: clamp(0.45rem, 1vw, 0.65rem) auto clamp(0.2rem, 0.5vw, 0.35rem) auto !important;
	text-align: center;
}

/* Keyboard focus parity with hover (image becomes focusable when a client links it). */
body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__img a:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	border-radius: var(--decor-radius, 16px);
}

/* Tablet: keep the overlap, ease the reserved lanes a little. */
@media (min-width: 641px) and (max-width: 959px) {
	body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__inset {
		padding-left: clamp(1.5rem, 7vw, 4rem);
	}
	body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__chip {
		width: clamp(7rem, 28%, 11rem);
	}
}

/* Mobile: drop the overlap. Lead is full width; the chip becomes a normal,
   bottom-aligned second print below it. */
@media (max-width: 640px) {
	body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__inset {
		padding-top: 0;
		padding-left: 0;
		display: flex;
		flex-direction: column;
		gap: clamp(1.2rem, 5vw, 1.8rem);
	}
	body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__chip {
		position: static;
		width: 62%;
		margin-right: auto !important;
	}
	body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__img--lead img {
		aspect-ratio: 3 / 2;
	}
	body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__kicker {
		letter-spacing: var(--tracking-wide) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__img--lead img,
	body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__chip {
		transition: none;
	}
	body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__img--lead:hover img,
	body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__img--lead:focus-within img {
		transform: none;
	}
	body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__chip:hover,
	body.aibt-universal .universal-gallery--duo-big-plus-inset .universal-gallery__chip:focus-within {
		transform: none;
	}
}