/**
 * Variant CSS: gallery--single-rounded-soft-spotlight
 * Layer 2 (Path B gallery role — count-1 expansion, 2026-06-10).
 *
 * One large heavily-rounded photo centered on a subtle tinted "spotlight" — a soft
 * radial accent-coloured glow spread behind the frame. Kicker + headline above, one
 * caption below. A calm, premium mood with a blurred light backdrop instead of a
 * shadow or a hard panel. Unlike spotlight-offset-panel (a hard, corner-offset accent
 * panel poking out from behind the photo): here the backdrop is a centered, soft radial
 * glow with no hard edges. All text is off-photo -> polarity-aware --ink /
 * --text-secondary. The radial glow uses --accent at low alpha via color-mix, so it
 * stays a tint (never a foreground colour — KI-020 safe). Image src is swapped by the
 * photo system. Element Count [1]. Part of the `gallery` role.
 */

body.aibt-universal .universal-gallery--single-rounded-soft-spotlight {
	padding-block: calc(clamp(3rem, 7vw, 5.5rem) * var(--density, 1));
}

/* Intro. */
body.aibt-universal .universal-gallery--single-rounded-soft-spotlight .universal-gallery__intro {
	margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}

body.aibt-universal .universal-gallery--single-rounded-soft-spotlight .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.24em) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 auto var(--space-sm, 1rem) auto !important;
}

body.aibt-universal .universal-gallery--single-rounded-soft-spotlight .universal-gallery__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 !important;
	text-wrap: balance;
}

body.aibt-universal .universal-gallery--single-rounded-soft-spotlight .universal-gallery__headline em {
	color: var(--accent) !important;
	font-style: italic;
}

/* Stage: holds the soft radial spotlight behind the rounded frame. */
body.aibt-universal .universal-gallery--single-rounded-soft-spotlight .universal-gallery__stage {
	position: relative;
	padding: clamp(1.5rem, 4vw, 3.5rem);
	display: flex;
	justify-content: center;
}

/* The spotlight glow — a centered radial tint of the accent colour, low alpha so it
   reads as ambient light, not a block. */
body.aibt-universal .universal-gallery--single-rounded-soft-spotlight .universal-gallery__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(60% 78% at 50% 46%,
			color-mix(in srgb, var(--accent) 18%, transparent) 0%,
			color-mix(in srgb, var(--accent) 7%, transparent) 42%,
			transparent 72%);
	pointer-events: none;
}

/* The rounded frame — sits above the glow with a soft lift. */
body.aibt-universal .universal-gallery--single-rounded-soft-spotlight .universal-gallery__frame {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 56rem;
	border-radius: var(--radius-2xl, 32px);
	overflow: hidden;
	aspect-ratio: 3 / 2;
	box-shadow: 0 30px 70px -36px color-mix(in srgb, var(--ink) 40%, transparent);
}

body.aibt-universal .universal-gallery--single-rounded-soft-spotlight .universal-gallery__img {
	margin: 0 !important;
	height: 100%;
}

body.aibt-universal .universal-gallery--single-rounded-soft-spotlight .universal-gallery__img img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	filter: var(--photo-filter, none);
	transition: transform var(--duration-slower, 700ms) var(--ease-expressive, ease);
}

body.aibt-universal .universal-gallery--single-rounded-soft-spotlight .universal-gallery__frame:hover .universal-gallery__img img {
	transform: scale(1.03);
}

/* Caption. */
body.aibt-universal .universal-gallery--single-rounded-soft-spotlight .universal-gallery__caption {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	font-weight: 500 !important;
	color: var(--text-secondary) !important;
	letter-spacing: 0.01em;
	margin: var(--space-md, 1.5rem) auto 0 auto !important;
	line-height: var(--leading-relaxed, 1.65);
}

/* Tablet: a touch taller crop. */
@media (max-width: 959px) {
	body.aibt-universal .universal-gallery--single-rounded-soft-spotlight .universal-gallery__frame {
		aspect-ratio: 4 / 3;
	}
	body.aibt-universal .universal-gallery--single-rounded-soft-spotlight .universal-gallery__img img {
		aspect-ratio: 4 / 3;
	}
}

/* Mobile: softer rounding + taller crop survive a narrow column. */
@media (max-width: 640px) {
	body.aibt-universal .universal-gallery--single-rounded-soft-spotlight .universal-gallery__frame {
		aspect-ratio: 4 / 5;
		border-radius: var(--radius-xl, 24px);
	}
	body.aibt-universal .universal-gallery--single-rounded-soft-spotlight .universal-gallery__img img {
		aspect-ratio: 4 / 5;
	}
}

/* Keyboard focus parity with hover (frame/image is the focusable target when a
   client links the photo). */
body.aibt-universal .universal-gallery--single-rounded-soft-spotlight .universal-gallery__img a:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 4px;
	border-radius: var(--radius-2xl, 32px);
}

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-gallery--single-rounded-soft-spotlight .universal-gallery__frame:hover .universal-gallery__img img {
		transform: none;
	}
}

/* A8/A9 left-shift fix: centered intro/caption are max-width-capped by WP constrained
   layout; force margin-inline:auto so they never pin left. Doubled section class ->
   specificity beats the inline h2 typography rule. */
body.aibt-universal .universal-gallery--single-rounded-soft-spotlight.universal-gallery--single-rounded-soft-spotlight .universal-gallery__headline,
body.aibt-universal .universal-gallery--single-rounded-soft-spotlight.universal-gallery--single-rounded-soft-spotlight .universal-gallery__caption { margin-inline: auto !important; }