/**
 * Variant CSS: hero--wide-photo-bleed-right-copy-left
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: a clean asymmetric editorial split.
 *   LEFT  (~42%) - the copy column on the PLAIN theme surface (--background):
 *           kicker + display H1 + short deck + ONE accent CTA, vertically
 *           centered. Its left padding aligns the copy with the GLOBAL content
 *           edge on wide viewports (max() against the centered content rail).
 *           NO accent band, NO stats row, NO collage - quiet typography only.
 *   RIGHT (~58%) - ONE large landscape photo that BLEEDS to the RIGHT viewport
 *           edge (the section is alignfull and the media column has no right
 *           padding) at full hero height (grid min-height clamp(420px, 78vh,
 *           760px)), object-fit:cover. Real <img> so the recipe pipeline can
 *           swap its src per industry (a CSS background can't be overridden).
 *   The minimal text-on-surface split + the hard right-edge bleed IS the
 *   signature of this variant.
 *   Mobile (<=781) - photo stacks on TOP as a shorter ~48vh banner, copy
 *           below at full width; the CTA goes full-width at <=640.
 *
 * Distinct from the other split heroes:
 *   - accent-band-left-photo-right: there the text half is a SATURATED accent
 *     colour band; here the copy sits on the plain theme surface.
 *   - split-stats-photo-right: there a row of mini-stats rides under the deck;
 *     here there are no numbers - just kicker / H1 / deck / CTA.
 *   - text-left-photo-collage-right: there the media half is a 3-photo
 *     staggered collage; here ONE uninterrupted full-bleed photo.
 *   - asymmetric-offset-photo: there the photo is contained inside the content
 *     width and offset over an accent block; here it is flush with the
 *     viewport edge at full hero height.
 *   - diagonal-type-photo-split: there a clip-path diagonal seam over a shared
 *     photo background; here the seam is a clean vertical between two columns.
 *
 * AA strategy: all copy sits on --background and uses --text-primary /
 *   --text-secondary / --accent (theme-audited pairs - contrast is the
 *   theme's responsibility, never hardcoded). The CTA is a SOLID --accent
 *   fill with --on-accent ink (NOT --on-dark: invisible on light accents;
 *   QC-theme-token-parity guarantees both tokens in all 22 themes). The focus
 *   ring is --accent on the plain surface (>=3:1 by theme audit). The only
 *   rgba() is a soft seam scrim ON the photo (allowed - it sits on the image,
 *   not on a theme surface).
 *
 * Scope rule: EVERY selector starts with
 *   body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left
 * because the theme loads ALL variant CSS globally (role-level selectors
 * leak). Only @media / @keyframes are left unscoped.
 *
 * Default photo: photo-1497366754035-f200968a6e72 - bright modern office
 * interior (landscape, generous depth, crops cleanly to a tall right panel).
 * From the approved pool for this build wave (2026-06-11). Distinct from the
 * gym default of accent-band-left-photo-right and the skyscraper default of
 * headline-top-photo-band-bottom.
 *
 * @package AI_Base_Theme
 * @since 2026-06-11 (Path B Variants Library - wide photo bleed right, copy left)
 */

/* === Section shell ========================================================
   Neutralize the default section padding entirely: the grid owns all spacing
   and the media column must reach the exact right viewport edge (the
   signature bleed). overflow:hidden clips the photo entrance motion. */
body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left {
	position: relative;
	background: var(--background, #fff);
	color: var(--text-primary, #111);
	padding: 0 !important;
	overflow: hidden;
}

/* === Asymmetric split grid (~42/58) =======================================
   minmax(0, *fr) tracks so a long unbroken word can never force horizontal
   overflow at narrow widths. The clamp'd min-height (not raw vh - A5 guard)
   gives the hero its tall editorial presence. */
body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
	gap: 0;
	align-items: stretch;
	width: 100%;
	max-width: none;
	min-height: clamp(420px, 78vh, 760px);
}

/* === LEFT - the copy column =============================================== */
body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	min-width: 0;
	padding-block: calc(clamp(var(--space-xl), 10vh, var(--space-2xl)) * var(--density, 1));
	/* Left gutter aligns the copy with the global content edge once the
	   viewport exceeds the content rail; below that, a fluid clamp gutter. */
	padding-left: max(clamp(var(--space-md), 5vw, var(--space-xl)), calc((100vw - var(--max-wide, 1280px)) / 2));
	padding-right: clamp(var(--space-lg), 4.5vw, var(--space-2xl));
}

/* === Kicker - uppercase label with a short accent tick above ============== */
body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .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 0 var(--space-md) 0 !important;
	line-height: 1.4;
}

body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__kicker::before {
	content: "";
	display: block;
	width: var(--space-lg);
	height: 2px;
	background: var(--accent, currentColor);
	margin-bottom: var(--space-sm);
}

/* === Headline - display serif/sans per theme ==============================
   font-size / line-height / tracking come from the block inline
   style.typography; this only sets family + colour + measure. */
body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left h1.universal-hero__headline,
body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary, #111) !important;
	margin: 0 0 var(--space-md) 0 !important;
	max-width: 15ch;
	text-wrap: balance;
}

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

/* === Deck ================================================================= */
body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .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, #555) !important;
	margin: 0 !important;
	max-width: 46ch;
}

/* === ONE primary CTA - solid accent fill, on-accent ink ===================
   --on-accent (NOT --on-dark) so the label stays readable on light accents
   (lime / tan / butter / peach) as well as dark ones. Hover swaps to the
   audited --accent-hover within the <250ms budget. */
body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__actions {
	margin-top: clamp(var(--space-lg), 5vh, var(--space-xl));
}

body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .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(--on-accent, #fff);
	background: var(--accent, var(--text-primary, #111));
	border: var(--decor-border-width, 1px) solid var(--accent, var(--text-primary, #111));
	border-radius: var(--decor-radius, 0);
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
	justify-content: 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--wide-photo-bleed-right-copy-left .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));
	transform: translateY(-2px);
}

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

/* === RIGHT - the full-bleed media column ==================================
   The column itself is the sized box (grid track stretches it to the full
   hero height); the figure fills it absolutely so the wp:image markup needs
   no aspect-ratio of its own and the img covers edge to edge. */
body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__media {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: 0;
}

body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__photo {
	position: absolute;
	inset: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	animation: aiss-hero-bleed-right-reveal var(--duration-slow, 900ms) var(--ease-expressive, ease) both;
}

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

/* Soft seam scrim on the photo's inner edge - depth only, so a very light
   photo never melts into the copy surface at the join. Hardcoded rgba is
   allowed ONLY here (a scrim ON the photo, not a theme surface). */
body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0) 18%);
	pointer-events: none;
	z-index: 1;
}

/* === Tablet / mid widths (782-959) - keep the split, ease the measure ===== */
@media (max-width: 959px) {
	body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__grid {
		grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
		min-height: clamp(380px, 64vh, 600px);
	}

	body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__copy {
		padding-right: clamp(var(--space-md), 4vw, var(--space-lg));
	}
}

/* === Mobile (<=781) - photo TOP (shorter banner), copy below ==============
   The H1 stays first in DOM source (copy precedes media); the visual flip is
   pure CSS order inside the flex stack. */
@media (max-width: 781px) {
	body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__grid {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__media {
		order: 0;
		width: 100%;
		height: clamp(15rem, 48vh, 26rem);
	}

	body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__copy {
		order: 1;
		width: 100%;
		padding-block: calc(clamp(var(--space-lg), 6vh, var(--space-xl)) clamp(var(--space-xl), 9vh, var(--space-2xl)) * var(--density, 1));
		padding-left: clamp(var(--space-md), 7vw, var(--space-xl));
		padding-right: clamp(var(--space-md), 7vw, var(--space-xl));
	}

	/* Seam scrim flips horizontal: a whisper of grounding along the photo's
	   bottom edge where the copy takes over. */
	body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__media::after {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0.10) 100%);
	}

	body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__headline {
		max-width: 18ch;
	}
}

/* === Small mobile (<=640) ================================================= */
@media (max-width: 640px) {
	/* Cap uppercase tracking on the smallest screens (KI-003 / A5 guard). */
	body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__kicker {
		letter-spacing: 0 !important;
	}

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

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

	body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__media {
		height: clamp(13rem, 44vh, 20rem);
	}

	/* Full-width CTA for a comfortable tap target. */
	body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__actions {
		width: 100%;
	}

	body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__actions .wp-block-button,
	body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__actions .wp-block-button__link {
		width: 100%;
	}
}

/* === Motion =============================================================== */
@keyframes aiss-hero-bleed-right-reveal {
	from {
		opacity: 0;
		transform: translateX(28px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__photo {
		animation: none;
	}

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

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

/* === Editor wrapper - the block editor runs no reveal timeline; force the
   photo to its final visible state so nothing sits hidden at opacity 0. ==== */
.editor-styles-wrapper .universal-hero--wide-photo-bleed-right-copy-left .universal-hero__photo {
	animation: none;
}