/**
 * Variant CSS: hero--text-left-photo-collage-right
 * Layer 2 — Variants Library (Path B Recipes architecture).
 *
 * Concept: editorial split hero.
 *   LEFT  — kicker + large display H1 (with an <em> accent) + 1-2 line deck +
 *           ONE primary CTA, vertically centred on the page background with
 *           generous editorial gutters.
 *   RIGHT — a lively THREE-photo staggered collage: one tall portrait photo on
 *           the left of the collage, two smaller photos stacked on the right and
 *           offset DOWN so the edges never line up. Consistent gaps + a single
 *           shared radius read as one intentional gallery grid, not three loose
 *           images. Each photo is a real <wp:image> so it stays editable and the
 *           recipe pipeline can swap the first <img src> per industry.
 *   Mobile — text on top; the collage reflows to a tidy block: photo 1 full
 *           width, photos 2 + 3 as an equal 2-up row below (object-fit:cover,
 *           no squish, no overflow).
 *
 * Built for ALL 9 themes: every colour/type/radius/shadow comes from semantic
 * tokens, so a dark theme just supplies a dark --background + light text and the
 * collage keeps working. Only the photo scrim uses a hardcoded rgba.
 *
 * Scope rule: EVERY selector starts with
 *   body.aibt-universal .universal-hero--text-left-photo-collage-right
 * (an unscoped `.universal-hero__photo` would leak across every hero variant).
 * Only @media / @keyframes blocks are left unscoped.
 *
 * Default photos (verified restaurant subjects, images.unsplash.com 200/jpeg
 * 2026-05-29): photo-1517248135467 (warm interior, tall) · photo-1547595628
 * (plated dish) · photo-1521017432531 (guests dining). Same food/venue family
 * so the collage stays coherent even after the industry overlay swaps photo 1.
 *
 * @package AI_Base_Theme
 * @since 2026-05-29 (Path B Variants Library)
 */

/* === Section shell ========================================================
   Neutralise the default `body.aibt-universal section` padding; the split owns
   its own spacing. Full-bleed background from the theme. */
body.aibt-universal .universal-hero--text-left-photo-collage-right {
	position: relative;
	padding: 0 !important;
	background: var(--background);
	overflow: hidden;
	border-bottom: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.08));
}

/* === Split grid ===========================================================
   Override the columns block (flex + gap) with a hard two-track grid. Text on
   the left (a touch narrower), the collage gets the wider track. */
body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
	gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
	align-items: center;
	margin: 0 auto;
	max-width: var(--max-ultra, 1400px);
	min-height: clamp(34rem, 86vh, 54rem);
	padding-block: calc(clamp(var(--space-xl), 9vh, var(--space-2xl)) * var(--density, 1));
	padding-inline: clamp(var(--space-md), 5vw, var(--space-2xl));
}

/* wp:column wrappers — strip block defaults (flex-basis, padding, margins). */
body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__col {
	flex-basis: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0; /* allow long words + the grid track to shrink correctly */
}

/* === LEFT — text column =================================================== */
body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__col--text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__panel {
	width: 100%;
	max-width: 34rem;
	margin: 0;
	/* Soft staggered entrance — the text settles first, then the collage. */
	animation: aiss-collage-text-rise var(--duration-slow, 900ms) var(--ease-elegant, ease) both;
}

/* Thin accent rule above the kicker — a small editorial signature. */
body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__panel::before {
	content: "";
	display: block;
	width: var(--space-lg);
	height: 2px;
	background: var(--accent);
	margin-bottom: var(--space-md);
}

body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__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-md) 0 !important;
}

body.aibt-universal .universal-hero--text-left-photo-collage-right h1.universal-hero__headline,
body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-md) 0 !important;
	max-width: 16ch;
	text-wrap: balance;
	/* font-size + line-height + tracking inherited from block inline style.typography
	   (clamp(2.5rem, 6vw, 4.5rem)) — meets the display-size floor. */
}

body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent));
	font-weight: var(--italic-weight, inherit);
}

body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed, 1.65) !important;
	color: var(--text-secondary) !important;
	max-width: 44ch;
	margin: 0 0 var(--space-lg) 0 !important;
}

/* === Primary CTA — solid, high-contrast, theme-driven ===================== */
body.aibt-universal .universal-hero--text-left-photo-collage-right .wp-block-button.universal-hero__cta .wp-block-button__link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-base);
	letter-spacing: var(--tracking-wide);
	padding: 1.1rem 2.5rem;
	color: var(--cta-text-primary, #fff);
	background: var(--cta-bg-primary, var(--text-primary));
	border: var(--decor-border-width, 1px) solid var(--cta-border-primary, var(--cta-bg-primary, var(--text-primary)));
	border-radius: var(--decor-radius, 0);
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
	transition: background var(--duration-fast, 240ms) var(--ease-default, ease),
		color var(--duration-fast, 240ms) var(--ease-default, ease),
		border-color var(--duration-fast, 240ms) var(--ease-default, ease),
		transform var(--duration-fast, 240ms) var(--ease-default, ease);
}

body.aibt-universal .universal-hero--text-left-photo-collage-right .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent, #fff);
	transform: translateY(-2px);
}

body.aibt-universal .universal-hero--text-left-photo-collage-right .wp-block-button.universal-hero__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: var(--focus-offset, 4px);
}

/* === RIGHT — the 3-photo staggered collage ================================
   2 columns × 2 rows. Photo 1 is the tall portrait (left, spans both rows).
   Photos 2 + 3 stack on the right. The right track is nudged DOWN and the tall
   photo nudged UP via grid row offset, so no two photo edges line up — the
   "lively, staggered gallery" read. Internal padding absorbs the offsets so
   nothing clips the section. */
body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__collage {
	display: grid;
	grid-template-columns: 1.04fr 0.96fr;
	grid-template-rows: repeat(2, 1fr);
	gap: clamp(var(--space-2xs), 1.1vw, var(--space-sm));
	width: 100%;
	/* The collage needs a defined height for the row tracks + object-fit cover. */
	height: clamp(28rem, 64vh, 40rem);
	/* Breathing room so the staggered offsets never touch the section edge. */
	padding-block: calc(clamp(var(--space-sm), 2.5vh, var(--space-lg)) * var(--density, 1));
	margin: 0;
}

/* Each photo — shared radius, shadow + subject filter all theme-driven. */
body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__photo {
	margin: 0;
	overflow: hidden;
	border-radius: var(--decor-radius-photo, var(--decor-radius, 0));
	box-shadow: var(--decor-shadow-elevated, var(--decor-shadow, none));
	background: var(--background-alt, rgba(0, 0, 0, 0.04)); /* placeholder tone while the photo loads */
	min-height: 0;
	position: relative;
}

/* Subtle scrim unifies the three crops + guards readability if a photo is
   light. Hardcoded rgba is allowed ONLY for a photo scrim. */
body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.10) 100%);
	pointer-events: none;
}

body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Photo 1 — tall portrait, left column, BOTH rows. Nudged up for the stagger. */
body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__photo--1 {
	grid-column: 1;
	grid-row: 1 / span 2;
	transform: translateY(calc(-1 * clamp(var(--space-2xs), 1.6vh, var(--space-md))));
	animation: aiss-collage-photo-in var(--duration-slow, 900ms) var(--ease-elegant, ease) 120ms both;
}

/* Photo 2 — top-right. Nudged down so its top sits below photo 1's top. */
body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__photo--2 {
	grid-column: 2;
	grid-row: 1;
	transform: translateY(clamp(var(--space-2xs), 1.6vh, var(--space-md)));
	animation: aiss-collage-photo-in var(--duration-slow, 900ms) var(--ease-elegant, ease) 240ms both;
}

/* Photo 3 — bottom-right. Pushed down a touch more for the descending rhythm. */
body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__photo--3 {
	grid-column: 2;
	grid-row: 2;
	transform: translateY(calc(2 * clamp(var(--space-2xs), 1.6vh, var(--space-md))));
	animation: aiss-collage-photo-in var(--duration-slow, 900ms) var(--ease-elegant, ease) 360ms both;
}

/* === Tablet — keep the split but calm the offsets ========================= */
@media (max-width: 959px) {
	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__grid {
		gap: clamp(var(--space-md), 4vw, var(--space-xl));
		min-height: clamp(30rem, 72vh, 44rem);
	}

	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__collage {
		height: clamp(24rem, 56vh, 34rem);
		gap: var(--space-2xs);
	}

	/* Smaller stagger so the smaller collage still reads as a tidy grid. */
	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__photo--1 {
		transform: translateY(-0.5rem);
	}
	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__photo--2 {
		transform: translateY(0.5rem);
	}
	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__photo--3 {
		transform: translateY(1rem);
	}
}

/* === Mobile — text on top, collage reflows to a neat 2+1 block ============
   Photo 1 full-width banner, photos 2 + 3 as an equal 2-up row below. Equal
   object-fit:cover, zero stagger transforms, no overflow. */
@media (max-width: 781px) {
	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__grid {
		display: flex;
		flex-direction: column;
		gap: clamp(var(--space-lg), 6vh, var(--space-2xl));
		min-height: 0;
		padding-block: calc(clamp(var(--space-xl), 8vh, var(--space-2xl)) * var(--density, 1));
		padding-inline: clamp(var(--space-md), 7vw, var(--space-xl));
	}

	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__col--text {
		order: 0;
		width: 100%;
	}

	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__col--media {
		order: 1;
		width: 100%;
	}

	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__panel {
		max-width: none;
	}

	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__headline {
		max-width: 18ch;
	}

	/* Reflow: photo 1 spans the full row, photos 2 + 3 sit side by side below. */
	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__collage {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		height: auto;
		gap: var(--space-2xs);
		padding-block: 0;
	}

	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__photo--1 {
		grid-column: 1 / span 2;
		grid-row: 1;
		aspect-ratio: 16 / 9;
		transform: none;
	}

	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__photo--2 {
		grid-column: 1;
		grid-row: 2;
		aspect-ratio: 1 / 1;
		transform: none;
	}

	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__photo--3 {
		grid-column: 2;
		grid-row: 2;
		aspect-ratio: 1 / 1;
		transform: none;
	}

	/* On a sized-by-aspect-ratio photo, the img height must follow. */
	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__photo {
		height: 100%;
	}
}

@media (max-width: 640px) {
	/* Drop uppercase kicker tracking on the smallest screens (KI-003). */
	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__kicker {
		letter-spacing: 0 !important;
	}

	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__headline {
		font-size: clamp(2.1rem, 9vw, 3rem) !important;
		letter-spacing: -0.02em !important;
	}

	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__deck {
		font-size: var(--text-base) !important;
	}

	/* Full-width CTA on phones for an easy tap target. */
	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__cta,
	body.aibt-universal .universal-hero--text-left-photo-collage-right .wp-block-button.universal-hero__cta,
	body.aibt-universal .universal-hero--text-left-photo-collage-right .wp-block-button.universal-hero__cta .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* === Motion =============================================================== */
@keyframes aiss-collage-text-rise {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Photos keep their static stagger transform via a CSS var so the entrance
   animation can compose with it (translateY offset + scale fade-in). */
@keyframes aiss-collage-photo-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__panel,
	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__photo--1,
	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__photo--2,
	body.aibt-universal .universal-hero--text-left-photo-collage-right .universal-hero__photo--3 {
		animation: none;
	}

	body.aibt-universal .universal-hero--text-left-photo-collage-right .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--text-left-photo-collage-right .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* === Editor wrapper override — block editor doesn't run entrance JS/anim ===
   skeleton.css already neutralises opacity/transform globally, but the photo
   stagger transforms are intentional layout, not entrance — so re-assert them
   here for the editor (the global rule would otherwise flatten the collage). */
.editor-styles-wrapper .universal-hero--text-left-photo-collage-right .universal-hero__photo--1 {
	transform: translateY(-0.75rem) !important;
}
.editor-styles-wrapper .universal-hero--text-left-photo-collage-right .universal-hero__photo--2 {
	transform: translateY(0.75rem) !important;
}
.editor-styles-wrapper .universal-hero--text-left-photo-collage-right .universal-hero__photo--3 {
	transform: translateY(1.5rem) !important;
}