/**
 * Variant CSS: hero--overlap-headline-pull-photo
 * Layer 2 — Variants Library (Path B Recipes architecture).
 *
 * Concept: editorial TYPE/PHOTO OVERLAP. Reading order:
 *   OPENER — kicker + a VERY large left-aligned display H1 sit on the page
 *            --background. The H1 carries a NEGATIVE margin-bottom, so the
 *            bottom of its type PULLS DOWN onto the top of the photo below —
 *            the headline straddles the surface/photo boundary (signature).
 *   PHOTO  — ONE wide landscape image (2:1), a real <img> so the recipe
 *            pipeline can swap its src per industry. Its top ~22% is fogged
 *            with a gradient built from the THEME --background (color-mix),
 *            so it melts into the surface above and the straddling glyphs
 *            stay legible on light AND dark themes.
 *   BELOW  — deck + ONE primary CTA sit UNDER the photo, left-aligned,
 *            back on the page surface.
 *   Mobile — the overlap reduces to a modest -0.3em, the photo takes a
 *            taller 3:2 crop, the CTA goes full-width, no 375px overflow.
 *
 * Distinct from hero--panoramic-strip-headline-over (there the H1 sits
 * ENTIRELY ON the photo, centered, light-on-dark-scrim), from
 * hero--overlap-card-on-photo (a content CARD overlaps the photo), and from
 * hero--headline-top-photo-band-bottom (H1 fully ABOVE the band, CTA riding
 * the band edge). HERE the headline itself crosses the photo's top edge and
 * the deck + CTA live below the photo. The straddling H1 is the signature.
 *
 * AA strategy: the H1 keeps the polarity-aware --ink on the page surface; the
 * photo zone it overlaps is fogged TOWARD that same surface color (gradient of
 * --background, 55% -> 0% over the top ~22%) PLUS a soft surface-colored halo
 * text-shadow around the glyphs — both are SURFACE blends painted on/around
 * the photo, never a text color (KI-020-safe: no --bg-main as foreground).
 * The CTA is a solid accent fill using the theme-audited pair
 * --cta-bg-primary / --cta-text-primary with --on-accent fallback (NOT
 * --on-dark — must stay legible on light accents like lime/butter/peach).
 * Kicker/deck sit on --background and use --accent / --text-secondary.
 *
 * Layout note: the section is constrained to a 1120px column (contentSize in
 * the pattern JSON). Direct children receive WP's injected
 * margin-inline auto — this CSS NEVER zeroes those horizontal margins on the
 * column children (only margin-block is touched), so the column never sticks
 * to the left edge of the full-width section (A8/A9 class). Everything is
 * left-aligned inside the column — no centered elements at all.
 *
 * Scope rule: EVERY selector starts with
 *   body.aibt-universal .universal-hero--overlap-headline-pull-photo
 * because the theme loads ALL variant CSS globally (role-level selectors leak).
 * Only @media / @keyframes / editor wrapper are left unscoped.
 *
 * @package AI_Base_Theme
 * @since 2026-06-11 (Path B Variants Library)
 *
 * Default photo: photo-1600585154340-be6161a56a0c — modern single-family home
 * exterior with large glazing under a CALM SKY top edge (the quiet upper band
 * hosts the fog + the straddling type cleanly). Suits real-estate / developer /
 * architecture demos. Pool alternatives (all landscape, calm-ish top edges):
 * photo-1469474968028-56623f02e42e (mountain lake, sky top — calmest),
 * photo-1497366754035-f200968a6e72 (modern office interior),
 * photo-1504674900247-0877df9cc836 (plated food, dark tabletop),
 * photo-1486406146926-c627a92ad1ab (glass skyscrapers — busier top, last pick).
 */

/* === Section shell ========================================================
   Page surface; inner column children own their gutters. Generous editorial
   top, calmer bottom (the CTA block closes the section). overflow:hidden is
   safe — the type/photo overlap happens INSIDE the section, mid-flow. */
body.aibt-universal .universal-hero--overlap-headline-pull-photo {
	position: relative;
	background: var(--background, #fff);
	color: var(--text-primary, #111);
	overflow: hidden;
	padding-block: calc(clamp(var(--space-7, 48px), 10vh, var(--space-9, 96px)) clamp(var(--space-7, 48px), 8vh, var(--space-9, 96px)) * var(--density, 1)) !important;
	padding-inline: 0 !important;
}

/* === Opener: kicker + straddling H1 ======================================
   Direct child of the 1120px constrained section: WP injects max-width +
   margin-inline auto (kept!). Flex column so the H1's negative bottom margin
   deterministically shrinks the opener's height and the photo slides up
   underneath the type. z-index lifts the whole opener above the photo. */
body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__opener {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-inline: clamp(var(--space-5, 24px), 5vw, var(--space-7, 48px));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-block: 0 !important;
}

/* Kicker — small caps eyebrow with the editorial accent dash, left-aligned. */
body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__kicker {
	position: relative;
	font-family: var(--font-body) !important;
	font-size: var(--text-xs, 12px) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest, 0.2em) !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	color: var(--accent, currentColor) !important;
	/* Flex item inside the padded opener: zeroed inline margins pin it to the
	   column's left edge (nothing here is centered — A8/A9 not applicable). */
	margin: 0 0 var(--space-4, 16px) 0 !important;
	padding-left: calc(var(--space-7, 48px) + var(--space-2, 8px));
}

body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__kicker::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: var(--space-7, 48px);
	height: var(--space-half, 2px);
	background: var(--accent, currentColor);
	transform: translateY(-50%);
}

/* Headline — THE SIGNATURE. Very large display type whose bottom edge pulls
   down onto the photo below via the negative margin. font-size/line-height/
   tracking come from the block's inline style.typography; this rule adds
   family, polarity ink, the pull, and the legibility halo. */
body.aibt-universal .universal-hero--overlap-headline-pull-photo h1.universal-hero__headline,
body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__headline {
	position: relative;
	z-index: 2;
	font-family: var(--font-display) !important;
	color: var(--ink, var(--text-primary, #111)) !important;
	max-width: 18ch;
	text-wrap: balance;
	overflow-wrap: break-word;
	/* The pull: em-based so the overlap scales with the type itself.
	   -3vw mid-track makes the dive deeper on wide screens, shallower on
	   narrow ones; clamped to a -0.6em…-0.3em window. */
	margin: 0 0 clamp(-0.6em, -3vw, -0.3em) 0 !important;
	/* Surface-colored halo: a soft glow of the THEME background around the
	   glyphs (light halo on light themes, dark on dark) — separates the
	   straddling letters from photo detail. A blend, not a text color. */
	text-shadow:
		0 var(--space-half, 2px) var(--space-4, 16px) color-mix(in srgb, var(--background, #fff) 72%, transparent),
		0 var(--space-px, 1px) var(--space-1, 4px) color-mix(in srgb, var(--background, #fff) 55%, transparent);
}

body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent, currentColor));
	font-weight: inherit;
}

/* === The wide photo (2:1) =================================================
   Direct child of the constrained section: WP's max-width 1120 + auto inline
   margins kept (centered column at desktop, full-bleed below 1120px). Only
   margin-block is zeroed so the H1's negative pull owns the seam (also kills
   any injected block-gap margin-block-start). */
body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__photo {
	position: relative;
	width: 100%;
	margin-block: 0 !important;
	border-radius: var(--decor-radius-photo, var(--decor-radius, 0));
	overflow: hidden;
	box-shadow: var(--decor-shadow, none);
	animation: aiss-hero-pull-photo-rise var(--duration-slower, 700ms) var(--ease-expressive, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	object-position: center;
}

/* Top fog — blends the photo's top ~22% into the page surface so the
   straddling type stays readable over the photo on light AND dark themes.
   KI-020-safe: --background here is a SURFACE blend painted ON the photo
   (it matches the section bg above the seam), never a foreground color. */
body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--background, #fff) 55%, transparent) 0%,
		color-mix(in srgb, var(--background, #fff) 30%, transparent) 11%,
		transparent 22%
	);
	pointer-events: none;
}

/* === Below the photo: deck + one primary CTA ============================== */
body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__below {
	position: relative;
	width: 100%;
	padding-inline: clamp(var(--space-5, 24px), 5vw, var(--space-7, 48px));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-block: clamp(var(--space-6, 32px), 5vh, var(--space-8, 64px)) 0 !important;
}

body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg, 20px) !important;
	line-height: var(--text-lg-lh, 1.5) !important;
	color: var(--text-secondary, color-mix(in srgb, var(--ink, #1a1a1a) 72%, transparent)) !important;
	max-width: 54ch;
	margin: 0 0 clamp(var(--space-5, 24px), 4vh, var(--space-6, 32px)) 0 !important;
}

body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__actions {
	margin: 0 !important;
	gap: var(--space-3, 12px);
}

/* Primary CTA — solid accent fill; text uses the theme-audited pair with
   --on-accent fallback (NOT --on-dark: must survive light accents). */
body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__cta .wp-block-button__link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-base, 16px);
	letter-spacing: var(--tracking-wide, 0.02em);
	padding: 1.05rem 2.4rem;
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cta-text-primary, var(--on-accent, #fff));
	background: var(--cta-bg-primary, var(--accent));
	border: var(--decor-border-width, 1px) solid var(--cta-bg-primary, var(--accent));
	border-radius: var(--decor-radius, 0);
	transition: background var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)),
		border-color var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)),
		transform var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
}

body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__cta .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--cta-bg-primary, var(--accent)) 86%, #000);
	border-color: color-mix(in srgb, var(--cta-bg-primary, var(--accent)) 86%, #000);
	transform: translateY(-2px);
}

body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent, currentColor);
	outline-offset: var(--focus-offset, 4px);
}

/* === Tablet ===============================================================
   The img carries an inline aspect-ratio from the block JSON, hence the
   !important on responsive crop changes. */
@media (max-width: 959px) {
	body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__photo img {
		aspect-ratio: 16 / 9 !important;
	}

	body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__deck {
		font-size: var(--text-md, 18px) !important;
	}
}

/* === Mobile ===============================================================
   Overlap reduces to a modest -0.3em (still straddling, never cramped),
   taller 3:2 crop, full-width CTA, no 375px overflow. */
@media (max-width: 640px) {
	/* Drop uppercase kicker tracking on the smallest screens (KI-003). */
	body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__kicker {
		letter-spacing: 0 !important;
	}

	body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__headline {
		font-size: clamp(2.1rem, 9.5vw, 3rem) !important;
		letter-spacing: -0.02em !important;
		max-width: 100%;
		margin-bottom: -0.3em !important;
	}

	body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__photo img {
		aspect-ratio: 3 / 2 !important;
	}

	body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__below {
		margin-block: clamp(var(--space-5, 24px), 6vw, var(--space-6, 32px)) 0 !important;
	}

	body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__deck {
		font-size: var(--text-base, 16px) !important;
	}

	body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__actions .wp-block-button,
	body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__actions .wp-block-button__link {
		width: 100%;
	}
}

/* === Motion =============================================================== */
@keyframes aiss-hero-pull-photo-rise {
	from {
		opacity: 0;
		transform: translateY(var(--space-4, 16px));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__photo {
		animation: none;
	}

	body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--overlap-headline-pull-photo .universal-hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* === Editor wrapper — no reveal animation in the locked editor canvas. ==== */
.editor-styles-wrapper .universal-hero--overlap-headline-pull-photo .universal-hero__photo {
	animation: none;
}