/**
 * Variant CSS: hero--accent-band-left-photo-right
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: a confident, brand-saturated 50/50 vertical split.
 *   LEFT  - a SOLID colour BAND (the theme --accent) carrying the message:
 *           kicker + large SANS display H1 + short deck + ONE inverted CTA. All
 *           band text is on-accent-safe (--cta-text-primary, the theme's audited
 *           text-on-accent ink), so it clears AA on the brand colour itself.
 *   RIGHT - ONE photo filling the entire right half edge-to-edge at full hero
 *           height (object-fit:cover). Real <img> so the recipe pipeline can swap
 *           src per industry.
 *   Mobile (<=781) - band on TOP, photo BELOW, clean full-width stack.
 *
 * Distinct from the split-photo heroes (photo + neutral-text-on-background): here
 * the text half is a SATURATED brand band, not a neutral surface - a colour-block,
 * not a text column.
 *
 * AA strategy (all 9 themes) - the central risk in an accent-text band is text
 *   trapped on a colour fill at low contrast. Resolved per theme by data
 *   (measured 2026-05-29):
 *     - The band background = --accent. The band text uses --cta-text-primary,
 *       which is the theme's AUDITED text-on-accent / on-CTA-fill ink. On the four
 *       white/paper themes that token is WHITE and the accent is deep enough that
 *       white clears AA (azure 5.7:1, ink-minimal 17.8:1, vermilion 5.2:1, red
 *       5.6:1). On the four dark themes the accent is LIGHT (lime/brass/champagne/
 *       yellow) and --cta-text-primary is the theme's DARK ink, clearing AA on the
 *       light accent (lime 15.4:1, brass 8.3:1, champagne 8.5:1, yellow 11.2:1).
 *       (--on-accent is NOT used: on brass/dramatic it is wrongly #FFFFFF, which
 *       fails on the light accent - the theme files warn about exactly this.)
 *     - The CTA is INVERTED so it always separates from the band (KI-020 guard):
 *       its fill = --cta-text-primary (the band-text colour) and its label = the
 *       --accent band colour. That makes the CTA the band-text-colour rectangle
 *       with brand-colour type - both the >=3:1 fill/band separation and the
 *       >=4.5:1 label/fill text contrast pass in every theme (same measured pairs
 *       as above: 5.2-17.8:1).
 *     - light-industrial-orange exception (foot of file): its --accent (#D9521F)
 *       is a mid-tone where BOTH white (4.06:1) and ink (4.66:1) sit on the AA
 *       knife-edge for small text - the theme even deepens its OWN conversion band
 *       for this reason. Per the AA mandate, this theme's band FALLS BACK to
 *       --background-dark (#1A1A1A) with --text-on-dark (white, 17.4:1): still a
 *       bold, saturated dark band, but bulletproof AA.
 *
 * Hardcoded values: none on theme surfaces. The only rgba() is a scrim ON the
 *   photo (allowed - it sits on the image, not a theme surface). Semantic tokens
 *   only (--accent, --cta-text-primary, --background-dark, --text-on-dark,
 *   --text-primary/-secondary, --font-display/-body, --space-*, --tracking-*,
 *   --decor-*, --divider-*, --duration-*, --ease-*).
 *
 * Scoping: EVERY selector starts with
 *   body.aibt-universal .universal-hero--accent-band-left-photo-right
 * because the theme loads ALL variant CSS globally (role-level selectors leak,
 * fatal).
 *
 * @package AI_Base_Theme
 * @since 2026-05-29 (Path B Variants Library - 20-hero expansion)
 */

/* === Section shell ========================================================
   Neutralize the default `body.aibt-universal section` padding so the band and
   the photo each reach the viewport edge and the seam is exact. The grid owns
   all spacing. Section background = --accent so any sub-pixel gap at the seam
   reads as part of the band, never a light flash. */
body.aibt-universal .universal-hero--accent-band-left-photo-right {
	position: relative;
	padding: 0 !important;
	background: var(--accent);
	overflow: hidden;
	isolation: isolate;
}

/* === 50/50 grid ===========================================================
   Override the columns block (flex + gap) with a hard two-track grid so the
   seam is exact and the photo bleeds to the RIGHT edge. Source order is
   band-then-media, so the band is naturally on the left on desktop. */
body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
	margin: 0;
	min-height: clamp(34rem, 88vh, 56rem);
	max-width: none;
}

/* wp:column wrappers - strip block defaults (flex-basis, padding, margins). */
body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__col {
	flex-basis: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0; /* allow long words to wrap inside the grid track */
	position: relative;
}

/* === LEFT - the accent BAND =============================================== */
body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__col--band {
	background: var(--accent);
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 1;
	/* Generous editorial gutters; airier at the outer margin, tighter at the seam. */
	padding-block: calc(clamp(var(--space-xl), 9vh, var(--space-2xl)) * var(--density, 1)) !important;
	padding-inline: clamp(var(--space-lg), 6vw, calc(var(--space-2xl) + 1rem)) clamp(var(--space-lg), 5vw, var(--space-2xl)) !important;
}

/* Darker accent seam riding the join (a thin bar in the band-text colour at a
   low opacity so it reads as a tonal edge on the band, never a stray line).
   Decorative UI graphic (not text), so it is exempt from the 4.5:1 text rule. */
body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__col--band::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 6px;
	background: var(--cta-text-primary, var(--text-on-dark, #fff));
	opacity: 0.18;
	z-index: 3;
}

body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__panel {
	width: 100%;
	max-width: 34rem;
	margin: 0;
}

/* Thin tick above the kicker in the band-text colour - a small editorial
   signature that reads on the band in every theme. */
body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__panel::before {
	content: "";
	display: block;
	width: var(--space-lg);
	height: 3px;
	background: var(--cta-text-primary, var(--text-on-dark, #fff));
	margin-bottom: var(--space-md);
}

/* === Kicker - uppercase index label, on-accent ink ======================== */
body.aibt-universal .universal-hero--accent-band-left-photo-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(--cta-text-primary, var(--text-on-dark, #fff)) !important;
	opacity: 0.86; /* slight step-down from the H1 while staying well above AA */
	margin: 0 0 var(--space-md) 0 !important;
}

/* === Headline - SANS display, the focal point =============================
   Force --font-body so the H1 stays a confident sans even on serif-display
   themes (brass/dramatic). font-size/line-height/weight come from the block
   inline style.typography. Colour = the on-accent ink. */
body.aibt-universal .universal-hero--accent-band-left-photo-right h1.universal-hero__headline,
body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__headline {
	font-family: var(--font-body) !important;
	color: var(--cta-text-primary, var(--text-on-dark, #fff)) !important;
	margin: 0 !important;
	max-width: 14ch;
	text-wrap: balance;
}

/* The accent <em> word - on the band, the accent colour itself would vanish, so
   the emphasis is carried by the on-accent ink at full weight (the surrounding
   H1 is already 700; the em keeps the same ink but stays semantically marked).
   No italic - this is a bold sans poster headline. */
body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__headline em {
	font-style: normal;
	color: inherit;
	font-weight: inherit;
	/* A subtle underline tick in the band-text colour marks the emphasis word
	   without relying on a colour swap that the band would swallow. */
	box-shadow: inset 0 -0.08em 0 0 currentColor;
	padding-bottom: 0.02em;
}

/* === Deck ================================================================= */
body.aibt-universal .universal-hero--accent-band-left-photo-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(--cta-text-primary, var(--text-on-dark, #fff)) !important;
	opacity: 0.92;
	max-width: 40ch;
	margin: var(--space-lg) 0 0 0 !important;
}

/* === Inverted CTA - the band-text-colour rectangle with brand-colour type ===
   On a colour band the normal accent-fill CTA would be band-on-band (invisible,
   KI-020). Invert it: fill = the on-accent ink (--cta-text-primary), label = the
   --accent band colour. Both the >=3:1 fill/band separation and the >=4.5:1
   label/fill text contrast pass in every theme (measured). */
body.aibt-universal .universal-hero--accent-band-left-photo-right .wp-block-buttons {
	margin-top: clamp(var(--space-lg), 5vh, var(--space-xl));
}

body.aibt-universal .universal-hero--accent-band-left-photo-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(--accent);
	background: var(--cta-text-primary, var(--text-on-dark, #fff));
	border: var(--decor-border-width, 1px) solid var(--cta-text-primary, var(--text-on-dark, #fff));
	border-radius: var(--decor-radius, 0);
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		opacity var(--duration-fast, 240ms) var(--ease-default, ease),
		transform var(--duration-fast, 240ms) var(--ease-default, ease);
}

/* Hover - lift + a slight fade so the inverted fill stays readable but signals
   interactivity. Opacity-only keeps the AA pair intact (no colour swap that
   could break contrast on a given theme). */
body.aibt-universal .universal-hero--accent-band-left-photo-right .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}

/* Focus ring - in the band-text colour so it lands at >=3:1 on the band. */
body.aibt-universal .universal-hero--accent-band-left-photo-right .wp-block-button.universal-hero__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--cta-text-primary, var(--text-on-dark, #fff));
	outline-offset: var(--focus-offset, 4px);
}

/* === RIGHT - media column ================================================= */
body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__col--media {
	align-self: stretch;
}

body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__photo {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

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

/* Soft scrim along the seam edge - adds depth so a light photo never bleeds
   into the band at the join. Hardcoded rgba is allowed ONLY here (a scrim ON
   the photo, not a theme surface). */
body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__col--media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 22%);
	z-index: 1;
	pointer-events: none;
}

/* === Tablet / mid widths (641-959) - keep the split, ease the gutters ===== */
@media (max-width: 959px) {
	body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__grid {
		min-height: clamp(28rem, 72vh, 44rem);
	}

	body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__col--band {
		padding-inline: clamp(var(--space-md), 5vw, var(--space-xl)) clamp(var(--space-md), 4vw, var(--space-lg)) !important;
	}
}

/* === Mobile (<=781) - band on TOP, photo BELOW, full-width stack ===========
   Source order is band-then-media, already correct (message leads on mobile). */
@media (max-width: 781px) {
	body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__grid {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__col--band {
		order: 0;
		width: 100%;
		padding-block: calc(clamp(var(--space-xl), 9vh, var(--space-2xl)) * var(--density, 1)) !important;
		padding-inline: clamp(var(--space-md), 7vw, var(--space-xl)) !important;
	}

	/* Seam relaxes to a horizontal tonal bar along the BOTTOM of the band (the
	   join between the stacked band + photo). */
	body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__col--band::after {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		height: 5px;
	}

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

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

	/* Photo becomes a sized banner below the band (absolute fill needs a sized
	   parent). */
	body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__col--media {
		order: 1;
		width: 100%;
		height: clamp(17rem, 50vh, 26rem);
	}

	/* Seam scrim flips to a top gradient on the stacked photo. */
	body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__col--media::before {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0) 24%);
	}
}

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

	body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__headline {
		font-size: clamp(2.3rem, 11vw, 3.4rem) !important;
		max-width: 100%;
	}

	body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__deck {
		font-size: var(--text-base, 1.05rem) !important;
	}

	/* Stack CTA full-width for a comfortable tap target. */
	body.aibt-universal .universal-hero--accent-band-left-photo-right .wp-block-button.universal-hero__cta {
		width: 100%;
	}

	body.aibt-universal .universal-hero--accent-band-left-photo-right .wp-block-button.universal-hero__cta .wp-block-button__link {
		width: 100%;
	}

	body.aibt-universal .universal-hero--accent-band-left-photo-right .universal-hero__col--media {
		height: clamp(15rem, 44vh, 22rem);
	}
}

/* === Reduced motion ======================================================= */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--accent-band-left-photo-right .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}

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

/* === Editor wrapper override (no entrance JS in the block editor; force the
   final visible state so nothing is hidden by a transform). ================= */
.editor-styles-wrapper .universal-hero--accent-band-left-photo-right .universal-hero__panel,
.editor-styles-wrapper .universal-hero--accent-band-left-photo-right .universal-hero__photo {
	opacity: 1 !important;
	transform: none !important;
}

/* === light-industrial-orange: dark-band FALLBACK =========================
   Its --accent (#D9521F) is a mid-tone where BOTH white (4.06:1) and ink
   (4.66:1) sit on the AA knife-edge for small text - the theme deepens its own
   conversion band for exactly this. Here the band FALLS BACK to --background-dark
   (#1A1A1A) with --text-on-dark (white, 17.4:1): still a bold saturated dark
   band, but bulletproof AA. The CTA inverts to a white fill with a dark
   (#1A1A1A) label (17.4:1). Loaded after this file via the theme stylesheet
   raises specificity (body + theme class), so it wins the source-order tie.
   2026-05-29. == */
body.aibt-universal.aibt-theme-light-industrial-orange .universal-hero--accent-band-left-photo-right,
body.aibt-universal.aibt-theme-light-industrial-orange .universal-hero--accent-band-left-photo-right .universal-hero__col--band {
	background: var(--background-dark);
}

body.aibt-universal.aibt-theme-light-industrial-orange .universal-hero--accent-band-left-photo-right .universal-hero__col--band::after,
body.aibt-universal.aibt-theme-light-industrial-orange .universal-hero--accent-band-left-photo-right .universal-hero__panel::before {
	background: var(--text-on-dark, #fff);
}

body.aibt-universal.aibt-theme-light-industrial-orange .universal-hero--accent-band-left-photo-right .universal-hero__kicker,
body.aibt-universal.aibt-theme-light-industrial-orange .universal-hero--accent-band-left-photo-right .universal-hero__headline,
body.aibt-universal.aibt-theme-light-industrial-orange .universal-hero--accent-band-left-photo-right .universal-hero__deck {
	color: var(--text-on-dark, #fff) !important;
}

body.aibt-universal.aibt-theme-light-industrial-orange .universal-hero--accent-band-left-photo-right .wp-block-button.universal-hero__cta .wp-block-button__link {
	color: var(--background-dark);
	background: var(--text-on-dark, #fff);
	border-color: var(--text-on-dark, #fff);
}

body.aibt-universal.aibt-theme-light-industrial-orange .universal-hero--accent-band-left-photo-right .wp-block-button.universal-hero__cta .wp-block-button__link:focus-visible {
	outline-color: var(--text-on-dark, #fff);
}