/**
 * Variant CSS: hero--glass-panel-on-photo
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: a full-bleed atmospheric PHOTO with a frosted GLASS content panel
 *   (translucent + backdrop-blur) floating CENTER-LEFT over the image, carrying
 *   kicker + display H1 + 1-2 line deck + ONE primary CTA. The glass card is the
 *   signature of this variant.
 *
 * Theme-driven legibility (the panel sits ON the photo, so rgba IS correct here):
 *   --hero-panel-bg     panel background. Light themes set a near-white glass
 *                       (rgba ~0.86) + dark --hero-panel-text. Dark themes define
 *                       NO panel token, so this FALLS BACK to a strong dark glass
 *                       (rgba(14,14,17,0.74)) that carries the light --text-on-photo.
 *                       0.74 alpha over a worst-case pure-white photo composites to
 *                       ~#4D4D4F -> white text clears 8.4:1 (AA), so the panel stays
 *                       legible even if the browser DROPS backdrop-filter (blur is a
 *                       progressive enhancement, never the sole contrast mechanism).
 *   --hero-panel-text   text colour inside the panel. Light: dark ink. Dark: falls
 *                       back to --text-on-photo (light). The bg/text fallbacks are a
 *                       matched PAIR: a theme overrides BOTH (light glass + dark ink)
 *                       or NEITHER (dark glass + light text) - never a mismatch.
 *   --hero-panel-blur / --hero-panel-pad / --hero-panel-max / --hero-panel-border /
 *   --hero-panel-radius / --hero-panel-shadow / --hero-scrim / --hero-em-color.
 *
 * The CTA uses the theme --cta-* tokens (solid primary) so it reads as the single
 * dominant action; accent comes from --accent / --hero-em-color (em word + rule).
 *
 * Scoping: EVERY selector starts with
 *   body.aibt-universal .universal-hero--glass-panel-on-photo
 * because the theme enqueues ALL variant CSS globally (role-level selectors leak).
 *
 * @package AI_Base_Theme
 * @since 2026-05-29 (Path B Variants Library)
 */

/* === Section shell ========================================================
   Full-bleed stage. Neutralize the default section padding (the photo must
   reach every edge) and give the absolute photo a sized parent. A dark base
   shows through only in the unlikely event the photo fails - it never blanks
   the layout. */
body.aibt-universal .universal-hero--glass-panel-on-photo {
	position: relative;
	min-height: clamp(34rem, 88vh, 54rem);
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 0 !important;
	background: var(--background-dark, var(--ink, #111));
	isolation: isolate;
}

/* === Photo - absolute fill, always visible ================================ */
body.aibt-universal .universal-hero--glass-panel-on-photo .universal-hero__photo {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

body.aibt-universal .universal-hero--glass-panel-on-photo .universal-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* === Scrim - theme overridable ============================================
   Default: a soft left-weighted wash that deepens the photo behind the panel
   (center-left) so the glass card's edge + shadow read on a bright photo,
   while the right half of the image stays open and atmospheric. A light theme
   can null this via --hero-scrim:none (its panel is already near-opaque); dark
   themes keep this default. Hardcoded rgba is allowed ONLY here (a scrim ON the
   photo, not a theme surface). */
body.aibt-universal .universal-hero--glass-panel-on-photo::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(
		--hero-scrim,
		linear-gradient(
			100deg,
			rgba(0, 0, 0, 0.55) 0%,
			rgba(0, 0, 0, 0.34) 38%,
			rgba(0, 0, 0, 0.08) 64%,
			rgba(0, 0, 0, 0) 100%
		)
	);
	z-index: 1;
	pointer-events: none;
}

/* === Content rail - holds the panel center-left in an ultra-wide container = */
body.aibt-universal .universal-hero--glass-panel-on-photo .universal-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--max-ultra, 1400px);
	margin: 0 auto;
	padding: clamp(var(--space-lg), 7vh, var(--space-2xl)) clamp(var(--space-md), 5vw, var(--space-xl));
}

/* === The glass panel - SIGNATURE =========================================
   container-type:inline-size lets the headline size itself against the PANEL
   width (cqi), so a long word wraps between words inside the card instead of
   overflowing. The backdrop-filter is a progressive enhancement; the bg alpha
   (light glass ~0.86 / dark fallback 0.74) carries contrast on its own. */
body.aibt-universal .universal-hero--glass-panel-on-photo .universal-hero__panel {
	background: var(--hero-panel-bg, rgba(14, 14, 17, 0.74));
	-webkit-backdrop-filter: var(--hero-panel-blur, blur(16px) saturate(1.15));
	backdrop-filter: var(--hero-panel-blur, blur(16px) saturate(1.15));
	color: var(--hero-panel-text, var(--text-on-photo, #fff));
	padding: var(--hero-panel-pad, clamp(1.75rem, 3.5vw, 2.75rem));
	max-width: var(--hero-panel-max, 44ch);
	width: 100%;
	border: var(--hero-panel-border, 1px solid rgba(255, 255, 255, 0.16));
	border-radius: var(--hero-panel-radius, var(--decor-radius, 14px));
	box-shadow: var(--hero-panel-shadow, 0 24px 70px rgba(0, 0, 0, 0.45));
	container-type: inline-size;
}

/* Thin accent rule above the kicker - a small editorial signature that anchors
   the card and reads on every theme (sits on --accent). */
body.aibt-universal .universal-hero--glass-panel-on-photo .universal-hero__panel::before {
	content: '';
	display: block;
	width: var(--space-lg);
	height: 2px;
	background: var(--accent);
	margin-bottom: var(--space-md);
}

/* === Kicker ============================================================== */
body.aibt-universal .universal-hero--glass-panel-on-photo .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(--hero-panel-text, var(--text-on-photo, #fff)) !important;
	opacity: 0.82;
	margin: 0 0 var(--space-md) 0 !important;
}

/* === Headline - display type, sized against the PANEL (cqi) =============== */
body.aibt-universal .universal-hero--glass-panel-on-photo h1.universal-hero__headline,
body.aibt-universal .universal-hero--glass-panel-on-photo .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--hero-panel-text, var(--text-on-photo, #fff)) !important;
	margin: 0 0 var(--space-md) 0 !important;
	max-width: 18ch;
	/* Size against the PANEL width: ~3rem inside the ~44ch card so long Polish
	   words wrap between words, scaling up on very wide panels. Overrides the
	   block inline clamp (which is keyed to the viewport, not the card). */
	font-size: clamp(2.2rem, 8.5cqi, 4rem) !important;
	line-height: 1.05 !important;
}

body.aibt-universal .universal-hero--glass-panel-on-photo .universal-hero__headline em {
	font-style: italic;
	color: var(--hero-em-color, var(--accent));
	font-weight: inherit;
}

/* === Deck =============================================================== */
body.aibt-universal .universal-hero--glass-panel-on-photo .universal-hero__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed, 1.65) !important;
	color: var(--hero-panel-text, var(--text-on-photo, #fff)) !important;
	opacity: 0.9;
	max-width: 46ch;
	margin: 0 0 var(--space-lg) 0 !important;
}

/* === Primary CTA - solid, single dominant action ========================= */
body.aibt-universal .universal-hero--glass-panel-on-photo .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.05rem 2.4rem;
	color: var(--cta-text-primary, #fff);
	background: var(--cta-bg-primary, var(--accent));
	border: var(--decor-border-width, 1px) solid var(--cta-border-primary, var(--accent));
	border-radius: var(--decor-radius, 0);
	transition: background var(--duration-fast, 240ms) var(--ease-default, ease),
		color var(--duration-fast, 240ms) var(--ease-default, ease),
		border-color var(--duration-fast, 240ms) var(--ease-default, ease),
		transform var(--duration-fast, 240ms) var(--ease-default, ease);
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
}

body.aibt-universal .universal-hero--glass-panel-on-photo .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
	background: var(--accent-hover, var(--accent));
	border-color: var(--accent-hover, var(--accent));
	color: var(--cta-text-primary, #fff);
	transform: translateY(-2px);
}

body.aibt-universal .universal-hero--glass-panel-on-photo .wp-block-button.universal-hero__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: var(--focus-offset, 4px);
}

/* === Tablet - keep the float, ease the rail gutters ====================== */
@media (max-width: 959px) {
	body.aibt-universal .universal-hero--glass-panel-on-photo {
		min-height: clamp(30rem, 76vh, 44rem);
	}

	body.aibt-universal .universal-hero--glass-panel-on-photo .universal-hero__panel {
		max-width: 38ch;
	}
}

/* === Mobile - panel goes near-full-width with comfortable insets ========== */
@media (max-width: 781px) {
	body.aibt-universal .universal-hero--glass-panel-on-photo {
		min-height: auto;
		align-items: flex-end;
	}

	body.aibt-universal .universal-hero--glass-panel-on-photo .universal-hero__content {
		padding-block: calc(clamp(var(--space-xl), 14vh, var(--space-2xl)) * var(--density, 1));
	}

	/* Strengthen the scrim into a bottom wash so the near-full-width panel
	   keeps a clean edge low on a busy photo. */
	body.aibt-universal .universal-hero--glass-panel-on-photo::before {
		background: var(
			--hero-scrim,
			linear-gradient(
				180deg,
				rgba(0, 0, 0, 0) 30%,
				rgba(0, 0, 0, 0.3) 62%,
				rgba(0, 0, 0, 0.6) 100%
			)
		);
	}

	body.aibt-universal .universal-hero--glass-panel-on-photo .universal-hero__panel {
		max-width: none;
	}

	body.aibt-universal .universal-hero--glass-panel-on-photo .universal-hero__headline {
		/* On a full-width card cqi gets large; cap it against the viewport. */
		font-size: clamp(2rem, 8vw, 3rem) !important;
	}
}

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

	body.aibt-universal .universal-hero--glass-panel-on-photo .wp-block-button.universal-hero__cta .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

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

	body.aibt-universal .universal-hero--glass-panel-on-photo .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* === Editor wrapper - block editor doesn't run scroll JS; keep visible ==== */
.editor-styles-wrapper .universal-hero--glass-panel-on-photo .universal-hero__panel {
	opacity: 1 !important;
	transform: none !important;
}