/**
 * Variant CSS: hero--full-photo-accent-duotone-wash
 * Layer 2 — Variants Library (Path B Recipes architecture).
 * Concept: full-bleed cover photo washed with a BRAND DUOTONE TINT — a full-frame ::after
 *   layer of color-mix(accent 38%, #000) at partial opacity with mix-blend-mode: color
 *   re-colors the whole photo toward the theme accent, so on every theme the hero
 *   auto-tints to the brand color (unified monochrome feel). Legibility does NOT depend
 *   on the wash (color blend preserves luminance): a standard cover dim (35) plus a
 *   directional left legibility scrim (::before) sit underneath and guarantee >=4.5
 *   contrast for the light copy (KI-020 safe). Copy = left-aligned kicker + H1 + deck +
 *   one CTA, vertically centered at the left in a ~36rem panel.
 * Distinctness: scrim-statement = neutral centered scrim; left-scrim-column = directional
 *   scrim WITHOUT tint; dark-radial-gradient = neutral vignette. Here the accent duotone
 *   brandwash over the entire frame is the signature.
 * Scoping: body.aibt-universal .universal-hero--full-photo-accent-duotone-wash
 * @since 2026-06-11 (Path B Variants Library)
 */

body.aibt-universal .universal-hero--full-photo-accent-duotone-wash {
	padding: 0 !important;
	position: relative;
	overflow: hidden;
	/* Keep the blended wash composited strictly inside the hero. */
	isolation: isolate;
	border-bottom: 1px solid var(--divider-primary, color-mix(in srgb, #000 8%, transparent));
}
body.aibt-universal .universal-hero--full-photo-accent-duotone-wash .wp-block-cover__image-background {
	object-fit: cover;
	/* Bias the photo subject toward the right, away from the left copy column. */
	object-position: 62% center;
}

/* Directional LEGIBILITY scrim under the copy column: strong at the left edge,
   fading out past the text zone. Paints above the photo, below the inner content. */
body.aibt-universal .universal-hero--full-photo-accent-duotone-wash::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(
		to right,
		color-mix(in srgb, #000 74%, transparent) 0%,
		color-mix(in srgb, #000 66%, transparent) 42%,
		color-mix(in srgb, #000 54%, transparent) 56%,
		color-mix(in srgb, #000 22%, transparent) 70%,
		transparent 82%
	);
}

/* SIGNATURE — accent duotone wash: tints the whole frame (photo + dims) toward the
   theme accent. mix-blend-mode: color takes hue/saturation from the wash and luminance
   from the layers below, so darkness (and therefore contrast) is untouched. */
body.aibt-universal .universal-hero--full-photo-accent-duotone-wash::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: color-mix(in srgb, var(--accent) 38%, #000);
	opacity: 0.42;
	mix-blend-mode: color;
}

/* Lift the copy above both overlay layers (the DOM-last ::after would otherwise
   paint over the core inner container, which ships at z-index 1). */
body.aibt-universal .universal-hero--full-photo-accent-duotone-wash .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(var(--space-xl, 3rem), 6vw, var(--space-3xl, 7rem)) clamp(var(--space-md, 1.25rem), 6vw, var(--space-2xl, 5rem));
}

/* Left panel: left-aligned, constrained width, vertically centered by the cover. */
body.aibt-universal .universal-hero--full-photo-accent-duotone-wash .universal-hero__panel {
	margin: 0;
	max-width: 36rem;
	text-align: left;
}
body.aibt-universal .universal-hero--full-photo-accent-duotone-wash .universal-hero__kicker {
	display: inline-block;
	font-family: var(--font-body) !important;
	font-size: var(--text-xs, 0.75rem) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest, 0.2em) !important;
	text-transform: uppercase !important;
	color: color-mix(in srgb, var(--accent) 38%, var(--on-dark, #fff)) !important;
	margin: 0 0 var(--space-md, 1.25rem) 0 !important;
	text-shadow: 0 1px 14px color-mix(in srgb, #000 60%, transparent);
}
body.aibt-universal .universal-hero--full-photo-accent-duotone-wash .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--on-dark, #fff) !important;
	margin: 0 0 var(--space-md, 1.25rem) 0 !important;
	max-width: 16ch;
	text-shadow: 0 2px 28px color-mix(in srgb, #000 50%, transparent);
}
body.aibt-universal .universal-hero--full-photo-accent-duotone-wash .universal-hero__headline em {
	font-style: italic;
	color: color-mix(in srgb, var(--accent) 55%, var(--on-dark, #fff));
	font-weight: inherit;
}
body.aibt-universal .universal-hero--full-photo-accent-duotone-wash .universal-hero__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg, 1.25rem) !important;
	line-height: var(--leading-relaxed, 1.6) !important;
	color: color-mix(in srgb, var(--on-dark, #fff) 92%, transparent) !important;
	max-width: 44ch;
	margin: 0 0 clamp(var(--space-lg, 2rem), 4vh, var(--space-xl, 3rem)) 0 !important;
	text-shadow: 0 1px 18px color-mix(in srgb, #000 55%, transparent);
}

/* Primary CTA: accent surface -> on-accent text (NEVER on-dark on accent). */
body.aibt-universal .universal-hero--full-photo-accent-duotone-wash .universal-hero__cta--primary .wp-block-button__link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-base, 1rem);
	letter-spacing: var(--tracking-wide, 0.02em);
	padding: 1.1rem 2.75rem;
	color: var(--cta-text-primary, var(--on-accent, #fff));
	background: var(--cta-bg-primary, var(--accent));
	border: 1px solid var(--cta-bg-primary, var(--accent));
	border-radius: var(--decor-radius, 0);
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
	transition: background var(--duration-fast, 200ms) var(--ease-default, ease), border-color var(--duration-fast, 200ms) var(--ease-default, ease), transform var(--duration-fast, 200ms) var(--ease-default, ease);
}
body.aibt-universal .universal-hero--full-photo-accent-duotone-wash .universal-hero__cta--primary .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--full-photo-accent-duotone-wash a:focus-visible {
	outline: 2px solid var(--on-dark, #fff);
	outline-offset: var(--focus-offset, 4px);
}

/* Mobile: copy drops to the bottom of the frame full-width; the left legibility
   scrim becomes a bottom-up gradient; CTA stretches full-width. Wash stays full-frame. */
@media (max-width: 781px) {
	body.aibt-universal .universal-hero--full-photo-accent-duotone-wash.has-custom-content-position.is-position-center-left {
		align-items: flex-end;
	}
	body.aibt-universal .universal-hero--full-photo-accent-duotone-wash .wp-block-cover__image-background {
		object-position: center center;
	}
	body.aibt-universal .universal-hero--full-photo-accent-duotone-wash::before {
		background-image: linear-gradient(
			to top,
			color-mix(in srgb, #000 80%, transparent) 0%,
			color-mix(in srgb, #000 58%, transparent) 32%,
			color-mix(in srgb, #000 20%, transparent) 58%,
			transparent 78%
		);
	}
	body.aibt-universal .universal-hero--full-photo-accent-duotone-wash .wp-block-cover__inner-container {
		padding: clamp(var(--space-lg, 2rem), 8vw, var(--space-2xl, 5rem)) clamp(var(--space-md, 1.25rem), 6vw, var(--space-lg, 2rem));
	}
	body.aibt-universal .universal-hero--full-photo-accent-duotone-wash .universal-hero__panel {
		max-width: 100%;
	}
}
@media (max-width: 640px) {
	body.aibt-universal .universal-hero--full-photo-accent-duotone-wash .universal-hero__headline {
		font-size: clamp(2.1rem, 9vw, 3rem) !important;
		max-width: 100%;
	}
	body.aibt-universal .universal-hero--full-photo-accent-duotone-wash .universal-hero__kicker {
		letter-spacing: 0.08em !important;
	}
	body.aibt-universal .universal-hero--full-photo-accent-duotone-wash .universal-hero__cta--primary .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--full-photo-accent-duotone-wash .wp-block-button__link {
		transition: none;
	}
	body.aibt-universal .universal-hero--full-photo-accent-duotone-wash .universal-hero__cta--primary .wp-block-button__link:hover {
		transform: none;
	}
}