/**
 * Variant CSS: hero--matted-wide-photo-under-copy
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: a quiet gallery-exhibition hero.
 *   COPY  - centered column on the page --background: kicker + large display H1 +
 *           a short deck + ONE primary CTA, all centered with generous whitespace
 *           (text only, no photo). Theme-bg text (--text-primary / --text-secondary
 *           / --accent), never --on-dark, so contrast is the theme's job (KI-020).
 *   FRAME - below the copy, ONE wide landscape print (3/2) sits inside a generous
 *           passe-partout MAT: an ink-tinted board, a thin accent keyline holding
 *           the photo off the edge, and a soft elevation — a framed print, not a
 *           full-bleed band. Real <img> so the recipe pipeline can swap its src
 *           per industry (a CSS background couldn't be overridden).
 *   Mobile - the mat padding shrinks, the photo keeps its 3/2 crop, and the CTA
 *            becomes a full-width button (no overflow).
 *
 * Distinct from hero--headline-top-photo-band-bottom: there the photo is a
 * full-bleed cinematic letterbox BAND reaching the section edge with the CTA
 * riding ON the photo. Here the photo is a CONTAINED, matted print and the CTA
 * lives WITH the copy above it — exhibition wall, not movie poster.
 *
 * AA strategy: the CTA is a SOLID filled button using the theme-audited
 * --cta-bg-primary / --cta-text-primary pair, so it clears AA on its OWN fill.
 * The mat is an ink-tint of the theme --background (4%): on a light theme it reads
 * a hair darker than the page; on a dark theme a hair lighter — a subtle board on
 * BOTH polarities. No hardcoded surface colours.
 *
 * Scope rule: EVERY selector starts with
 *   body.aibt-universal .universal-hero--matted-wide-photo-under-copy
 * because the theme loads ALL variant CSS globally (role-level selectors leak).
 * Only @media / @keyframes are left unscoped.
 *
 * @package AI_Base_Theme
 * @since 2026-06-11 (Path B Variants Library - matted gallery print)
 *
 * Default photo: photo-1600585154340-be6161a56a0c - a bright, calmly styled
 * modern interior (neutral palette). Landscape that crops cleanly to 3/2 and
 * suits photography / interiors / architecture / hospitality / premium brands.
 * Alternatives in pool: photo-1504674900247-0877df9cc836 (food/craft),
 * photo-1469474968028-56623f02e42e (landscape), photo-1486406146926-c627a92ad1ab
 * (architecture), photo-1497366754035-f200968a6e72 (workspace).
 */

/* === Section shell ========================================================
   Neutralize the default section padding-inline (the inner blocks own their
   gutters) but keep generous editorial top + bottom: the matted print needs
   air ALL around it, unlike a band that closes on the edge. */
body.aibt-universal .universal-hero--matted-wide-photo-under-copy {
	position: relative;
	background: var(--background, #fff);
	color: var(--text-primary, #111);
	overflow: hidden;
	padding-block: calc(clamp(var(--space-2xl), 11vh, var(--space-3xl)) clamp(var(--space-2xl), 9vh, var(--space-3xl)) * var(--density, 1)) !important;
	padding-inline: 0 !important;
	text-align: center;
}

/* === Centered copy column =================================================
   Constrained narrower than the print below so the type stays readable and the
   wide photo clearly reads as the "exhibited" piece. Centered descendant of a
   constrained alignfull section → horizontal auto margins (A8/A9). */
body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__copy {
	width: 100%;
	max-width: 48rem;
	margin: 0 auto clamp(var(--space-xl), 6vh, var(--space-2xl)) auto;
	padding-inline: clamp(var(--space-md), 5vw, var(--space-xl));
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Kicker - small centered accent label with a hairline rule under it (a quiet
   gallery placard). Centered child → auto inline margins (A8/A9). */
body.aibt-universal .universal-hero--matted-wide-photo-under-copy .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, currentColor) !important;
	margin: 0 auto var(--space-md) auto !important;
	padding-bottom: var(--space-2xs);
	position: relative;
	line-height: 1;
}

body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__kicker::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: var(--space-xl);
	height: 2px;
	background: var(--accent, currentColor);
	transform: translateX(-50%);
}

/* Headline - large display. font-size / line-height / tracking come from the
   block inline style.typography; this only sets family + colour + centring. */
body.aibt-universal .universal-hero--matted-wide-photo-under-copy h1.universal-hero__headline,
body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary, #111) !important;
	margin: 0 auto var(--space-md) auto !important;
	max-width: 20ch;
	text-wrap: balance;
}

body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent, currentColor));
	font-weight: inherit;
}

body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-normal) !important;
	color: var(--text-secondary, #555) !important;
	margin: 0 auto !important;
	max-width: 56ch;
}

/* === ONE primary CTA - sits WITH the copy, just under the deck ============= */
body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__actions {
	margin: clamp(var(--space-lg), 3vw, var(--space-xl)) auto 0 auto;
}

body.aibt-universal .universal-hero--matted-wide-photo-under-copy .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.15rem 2.6rem;
	color: var(--cta-text-primary, #fff);
	background: var(--cta-bg-primary, var(--text-primary, #111));
	border: var(--decor-border-width, 1px) solid var(--cta-border-primary, var(--text-primary, #111));
	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-snappy, ease),
		border-color var(--duration-fast, 240ms) var(--ease-snappy, ease),
		transform var(--duration-fast, 240ms) var(--ease-snappy, ease);
}

body.aibt-universal .universal-hero--matted-wide-photo-under-copy .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
	background: var(--accent-hover, var(--accent, currentColor));
	border-color: var(--accent-hover, var(--accent, currentColor));
	color: var(--on-accent, #fff);
	transform: translateY(-2px);
}

body.aibt-universal .universal-hero--matted-wide-photo-under-copy .wp-block-button.universal-hero__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent, currentColor);
	outline-offset: var(--focus-offset, 4px);
}

/* === The matted print =====================================================
   Frame = the passe-partout MAT: a generous ink-tinted board with a thin accent
   keyline and a soft outer elevation. The wide padding IS the passe-partout. */
body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__frame {
	width: 100%;
	max-width: var(--max-wide, 1100px);
	margin-inline: auto;
	background: color-mix(in srgb, var(--text-primary) 4%, var(--background));
	border-radius: var(--decor-radius, 14px);
	/* Generous mat padding (the passe-partout) — museum breathing room. */
	padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
	/* Thin inner accent keyline + soft outer frame shadow (elevation). */
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent),
		var(--decor-shadow-soft, var(--decor-shadow, none));
	/* Subtle reveal so the print "lands" under the copy. */
	animation: aiss-hero-matte-rise var(--duration-slow, 900ms) var(--ease-expressive, ease) both;
}

/* The print itself: a tighter keyline hugs the photo (inner mat line), then the
   image fills it with object-fit cover at a 3/2 landscape crop. */
body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__photo {
	margin: 0 !important;
	width: 100%;
	overflow: hidden;
	border-radius: calc(var(--decor-radius, 14px) - 6px);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 12%, transparent);
}

body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__photo img {
	display: block;
	width: 100%;
	/* The contained landscape print — the signature of this variant. */
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	object-position: center;
}

/* === Tablet =============================================================== */
@media (min-width: 641px) and (max-width: 959px) {
	body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__headline {
		font-size: clamp(2.4rem, 7vw, 3.75rem) !important;
		max-width: 22ch;
	}
}

/* === Mobile ===============================================================
   The mat padding shrinks (so the print isn't cramped), the photo holds 3/2,
   and the single CTA becomes a full-width button. */
@media (max-width: 640px) {
	body.aibt-universal .universal-hero--matted-wide-photo-under-copy {
		padding-block: calc(clamp(var(--space-xl), 8vh, var(--space-2xl)) clamp(var(--space-xl), 7vh, var(--space-2xl)) * var(--density, 1)) !important;
	}

	/* Drop uppercase kicker tracking on the smallest screens (KI-003). */
	body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__kicker {
		letter-spacing: var(--tracking-wide) !important;
	}

	body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__headline {
		font-size: clamp(2.1rem, 10vw, 3rem) !important;
		letter-spacing: -0.02em !important;
		max-width: 100%;
	}

	body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__deck {
		font-size: var(--text-base) !important;
	}

	/* CTA goes full-width for a comfortable tap target. */
	body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__actions {
		width: 100%;
	}

	body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__actions .wp-block-button,
	body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__actions .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}

	/* Tighter mat so the print stays generous inside the board on phones. */
	body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__frame {
		padding: clamp(var(--space-md), 5vw, var(--space-lg));
	}
}

/* === Motion =============================================================== */
@keyframes aiss-hero-matte-rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--matted-wide-photo-under-copy .universal-hero__frame {
		animation: none;
	}

	body.aibt-universal .universal-hero--matted-wide-photo-under-copy .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--matted-wide-photo-under-copy .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* === Editor wrapper - the block editor doesn't run the reveal, so make the
   matted print render immediately in the locked editor canvas. =============== */
.editor-styles-wrapper .universal-hero--matted-wide-photo-under-copy .universal-hero__frame {
	animation: none;
}