/**
 * Variant CSS: gallery--trio-arched-triptych
 * Layer 2 (Path B gallery role, 2026-06-10).
 *
 * Exactly three tall portrait photos (3:4) whose TOP edge curves into a cathedral
 * arch, set side by side as a triptych row with an optional caption under each.
 * The arched-window silhouette is the signature — unlike the rectangular trio
 * variants (even-trio-row, stagger-offset-trio, trio-framed-passe-row, etc.) and
 * unlike arched-print-passe (one matted print): here three equal arches read like
 * stained-glass windows on a gallery wall. The arch is a border-radius on the
 * figure with overflow:hidden, so the IMG is clipped to it (object-fit:cover); a
 * soft shadow lifts each arch off the wall and a gentle inside-the-arch zoom plays
 * on hover. Text stays --text-primary / --text-secondary (polarity aware, never a
 * bg token as ink — KI-020); kicker + the em take --accent; images carry
 * --photo-filter. Image src are swapped by the photo system; keep-first-N trims
 * whole tiles and the grid reflows. Dedicated to exactly three photos. `gallery`
 * role.
 */

body.aibt-universal .universal-gallery--trio-arched-triptych {
	padding-block: calc(clamp(var(--space-2xl, 3rem), 7vw, var(--space-3xl, 5.5rem)) * var(--density, 1));
	background: var(--background);
	color: var(--text-primary);
}

/* Intro. */
body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__intro {
	margin-bottom: clamp(var(--space-xl, 2rem), 4vw, var(--space-2xl, 3rem));
}

body.aibt-universal .universal-gallery--trio-arched-triptych .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.6rem) 0 !important;
}

body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__headline em {
	color: var(--accent) !important;
	font-style: italic;
}

/* Layout: three equal arched columns. minmax(0,1fr) prevents 375px overflow. */
body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(var(--space-md, 1rem), 2.6vw, var(--space-xl, 2rem));
	align-items: start;
}

/* Each tile holds one arch + its caption; the WP grid layout class on the parent
   already lays the children out, so the tile is a simple flow column. */
body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__tile {
	display: flex;
	flex-direction: column;
}

/* The arch: a tall 3:4 frame whose TOP corners curve into a cathedral window.
   overflow:hidden clips the IMG to the arched silhouette; the soft shadow lifts
   the window off the wall. */
body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__item {
	margin: 0 !important;
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	border-radius: 50% 50% var(--radius-sm, 4px) var(--radius-sm, 4px) / 30% 30% 0 0;
	box-shadow: var(--decor-shadow-soft, 0 10px 28px -18px color-mix(in srgb, var(--text-primary) 30%, transparent));
	transition: box-shadow var(--duration-base, 250ms) var(--ease-default, ease),
		transform var(--duration-base, 250ms) var(--ease-default, ease);
}

body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__item:hover,
body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__item:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--decor-shadow-elevated, 0 18px 40px -20px color-mix(in srgb, var(--text-primary) 38%, transparent));
}

/* The photo fills the arch and holds its 3:4 crop; a gentle zoom plays inside the
   clipped arch on hover (<250ms-ish via the slow token), respecting reduced motion. */
body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	filter: var(--photo-filter, none);
	transition: transform var(--duration-slow, 500ms) var(--ease-expressive, ease);
}

body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__item:hover img,
body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__item:focus-within img {
	transform: scale(1.04);
}

/* Caption plaque beneath each arch, centered. margin-inline:auto so the centered
   text stays centered inside the constrained section (A8/A9 left-shift guard). */
body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__caption {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 500 !important;
	color: var(--text-secondary) !important;
	line-height: var(--leading-snug, 1.35);
	letter-spacing: var(--tracking-wide, 0.01em);
	max-width: 32ch;
	margin: var(--space-md, 1rem) auto 0 auto !important;
}

/* Keyboard focus parity with hover (the image becomes focusable when a client
   wraps it in a link). */
body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__item a:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 4px;
	border-radius: 50% 50% var(--radius-sm, 4px) var(--radius-sm, 4px) / 30% 30% 0 0;
}

/* Tablet: three arches get tight — drop to two per row so each window keeps height. */
@media (min-width: 641px) and (max-width: 959px) {
	body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(var(--space-sm, 0.8rem), 2.4vw, var(--space-lg, 1.5rem));
	}
}

/* Mobile: a single column so each arched print reads at full size; soften the
   arch a touch and tighten kicker tracking. */
@media (max-width: 640px) {
	body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__row {
		grid-template-columns: 1fr;
		gap: clamp(var(--space-lg, 1.5rem), 5vw, var(--space-xl, 2rem));
	}
	body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__item {
		border-radius: 42% 42% var(--radius-sm, 4px) var(--radius-sm, 4px) / 24% 24% 0 0;
	}
	body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__kicker {
		letter-spacing: var(--tracking-wide, 0.04em) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__item,
	body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__item img {
		transition: none;
	}
	body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__item:hover,
	body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__item:focus-within {
		transform: none;
	}
	body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__item:hover img,
	body.aibt-universal .universal-gallery--trio-arched-triptych .universal-gallery__item:focus-within img {
		transform: none;
	}
}

/* A8/A9 left-shift fix: the centered caption is capped by the constrained section
   but pinned left by horizontal margin:0 from the paragraph alignment. Force
   margin-inline:auto (section class doubled -> wins specificity; harmless on
   already-auto elements). */
body.aibt-universal .universal-gallery--trio-arched-triptych.universal-gallery--trio-arched-triptych .universal-gallery__caption { margin-inline: auto !important; }