/**
 * Variant CSS: gallery--masonry-hover-captions
 *
 * CSS multi-column masonry (varied heights, no JS) where each tile's project
 * caption slides up over a gradient scrim only on hover / focus-within. Unlike
 * the bare masonry (no captions) and the captioned-cards (always-visible caption
 * in a row below): context appears on demand so the images breathe. Caption text
 * sits on a dark scrim → uses --text-on-dark; the meta line lifts via accent.
 * Reduced-motion users get the caption shown statically (no fade / no slide).
 * Image src are swapped by the photo system. Part of the `gallery` role.
 */

body.aibt-universal .universal-gallery--masonry-hover-captions {
	padding-block: calc(clamp(3rem, 7vw, 5rem) * var(--density, 1));
	background: var(--background);
	color: var(--text-primary);
}

/* Intro. */
body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__intro {
	margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}

body.aibt-universal .universal-gallery--masonry-hover-captions .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--masonry-hover-captions .universal-gallery__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__headline em {
	color: var(--accent) !important;
	font-style: italic;
}

/* Masonry container: CSS columns flow tiles into balanced vertical stacks. */
body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__masonry {
	column-count: 3;
	column-gap: var(--space-sm);
}

/* Each tile is a positioned frame; caption overlays the image. */
body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__item {
	position: relative;
	margin: 0 0 var(--space-sm) 0 !important;
	break-inside: avoid;
	overflow: hidden;
	border-radius: var(--decor-radius, 14px);
	isolation: isolate;
}

body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__img {
	margin: 0 !important;
	display: block;
}

body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__img img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	filter: var(--photo-filter, none);
	transition: transform var(--duration-medium, 500ms) var(--ease-elegant, ease);
}

/* Varied heights via cropped aspect ratios so the masonry keeps rhythm even when
   the source photos are uniform. Cycles tall / medium / square across columns. */
body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__item:nth-child(3n+1) img {
	aspect-ratio: 3 / 4;
}
body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__item:nth-child(3n+2) img {
	aspect-ratio: 4 / 3;
}
body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__item:nth-child(3n+3) img {
	aspect-ratio: 1 / 1;
}

body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__item:hover img,
body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__item:focus-within img {
	transform: scale(1.05);
}

/* Caption: absolutely positioned scrim, hidden then revealed on hover/focus. */
body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__caption {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1rem, 2.6vw, 1.4rem) clamp(0.9rem, 2.4vw, 1.3rem);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0) 100%);
	opacity: 0;
	transform: translateY(0.6rem);
	transition: opacity var(--duration-fast, 200ms) var(--ease-default, ease),
		transform var(--duration-fast, 200ms) var(--ease-default, ease);
	pointer-events: none;
}

body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__item:hover .universal-gallery__caption,
body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__item:focus-within .universal-gallery__caption {
	opacity: 1;
	transform: translateY(0);
}

body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__cap-title {
	font-family: var(--font-display) !important;
	font-size: var(--text-lg) !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	color: var(--text-on-dark, #fff) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__cap-meta {
	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;
	/* Accent lift readable on the dark scrim (KI-020 — never bare --accent here). */
	color: color-mix(in srgb, var(--accent) 60%, var(--on-dark, #fff)) !important;
	margin: 0 !important;
}

/* Focus ring for the keyboard path (tile becomes focusable target via image link
   in real renders; the frame echoes the ring for visibility). */
body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__item:focus-within {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Tablet: 2 columns. */
@media (max-width: 959px) {
	body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__masonry {
		column-count: 2;
	}
}

/* Mobile: single column; show caption statically (no hover on touch). */
@media (max-width: 781px) {
	body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__masonry {
		column-count: 1;
	}
	body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__caption {
		opacity: 1;
		transform: none;
	}
}

/* Drop wide uppercase tracking on small screens (A5). */
@media (max-width: 640px) {
	body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__kicker,
	body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__cap-meta {
		letter-spacing: 0 !important;
	}
}

/* Respect reduced motion: no fade, no slide, no zoom — caption stays visible. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__img img,
	body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__caption {
		transition: none;
	}
	body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__item:hover img,
	body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__item:focus-within img {
		transform: none;
	}
	body.aibt-universal .universal-gallery--masonry-hover-captions .universal-gallery__caption {
		opacity: 1;
		transform: none;
	}
}