/**
 * Variant CSS: hero--full-bleed-center-overlay
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: ONE atmospheric full-bleed photo with the content block CENTERED on
 *   BOTH axes over a scrim. Kicker + large display H1 + 1-2 line deck + ONE
 *   primary CTA, all optically centered - a premium "destination" feel.
 *   Distinct from hero--full-bleed-photo-bottom-overlay (text bottom-LEFT):
 *   here everything is centered, so the protection cannot lean on the theme's
 *   BOTTOM-gradient --hero-scrim alone (a bottom gradient barely touches the
 *   optical centre). Instead this variant lays its OWN center-weighted vignette
 *   ON the photo as a guaranteed AA floor, then the theme --hero-scrim sits on
 *   top, and light themes additionally turn --hero-panel-* into a centred card.
 *
 * Text-on-photo protection - THREE cooperating layers (strongest -> weakest):
 *   1. ::before  base vignette ON the photo (radial centre-darken + soft uniform
 *      tint). ALWAYS present, variant-owned. Hardcoded rgba is allowed here - it
 *      is a scrim ON the photo, never a theme surface. This is the layer that
 *      keeps the CENTRED light text (dark themes' scrim-only mode) AA over ANY
 *      photo brightness, because the theme bottom-gradient never reaches centre.
 *   2. ::after   theme --hero-scrim on top (light themes add a soft one;
 *      paper-color-blocks / light-industrial-orange set it to `none` and lean on
 *      their solid panel instead - the layer simply renders nothing then).
 *   3. .panel    --hero-panel-* card. Invisible by default (transparent ->
 *      scrim+vignette mode for dark themes). A light theme fills it (glass or
 *      solid) + dark --hero-panel-text so the client's photo can't break
 *      contrast. The panel is ALWAYS in the DOM, just unstyled in dark mode.
 *
 * Scoping: EVERY selector starts with
 *   body.aibt-universal .universal-hero--full-bleed-center-overlay
 * because the theme loads ALL variant CSS globally (role-level selectors leak).
 *
 * @package AI_Base_Theme
 * @since 2026-05-29 (Path B Variants Library)
 */

/* === Section shell ========================================================
   Full-bleed photo stage. Flex-centre both axes so the panel is optically
   centred. Neutralize the default `body.aibt-universal section` padding - the
   inner content group owns all spacing. Dark fallback bg covers any gap before
   the photo paints. */
body.aibt-universal .universal-hero--full-bleed-center-overlay {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 0 !important;
	background: var(--background-dark, var(--ink, #111));
}

/* === Photo - fills the whole stage ======================================== */
body.aibt-universal .universal-hero--full-bleed-center-overlay .universal-hero__photo {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

body.aibt-universal .universal-hero--full-bleed-center-overlay .universal-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* === Layer 1: base centre-weighted vignette ON the photo ==================
   Variant-owned, ALWAYS present. A radial darken concentrated at the centre
   (where the text lives) + a light uniform tint floor. Guarantees AA for the
   centred light text on dark/scrim-only themes regardless of photo brightness.
   Hardcoded rgba is allowed ONLY here (a scrim ON the photo, not a surface). */
body.aibt-universal .universal-hero--full-bleed-center-overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(
			ellipse 80% 70% at 50% 50%,
			rgba(0, 0, 0, 0.58) 0%,
			rgba(0, 0, 0, 0.42) 45%,
			rgba(0, 0, 0, 0.18) 100%
		),
		linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.30) 100%);
}

/* === Layer 2: theme --hero-scrim on top ===================================
   Whatever extra treatment the theme directs. Light themes add a soft gradient;
   paper-color-blocks / light-industrial-orange set `none` -> renders nothing. */
body.aibt-universal .universal-hero--full-bleed-center-overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--hero-scrim, none);
}

/* === Content wrapper - centred column ===================================== */
body.aibt-universal .universal-hero--full-bleed-center-overlay .universal-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--max-wide, 1280px);
	margin: 0 auto;
	padding: clamp(var(--space-xl), 9vh, var(--space-2xl)) clamp(var(--space-md), 5vw, var(--space-xl));
	display: flex;
	justify-content: center;
}

/* === Layer 3: panel - centred card =======================================
   Invisible by default (transparent -> dark themes use scrim+vignette only).
   Light themes turn it into a contrast-safe glass/solid card via --hero-panel-*.
   container-type:inline-size lets the headline size against the PANEL width
   (cqi), so it auto-fits a narrow light-theme card AND stays large in the
   full-width dark scrim mode - the one selector that discriminates the two
   modes without reading the theme class. Centre the text content within. */
body.aibt-universal .universal-hero--full-bleed-center-overlay .universal-hero__panel {
	width: 100%;
	max-width: var(--hero-panel-max, 60ch);
	margin: 0 auto;
	text-align: center;
	background: var(--hero-panel-bg, transparent);
	-webkit-backdrop-filter: var(--hero-panel-blur, none);
	backdrop-filter: var(--hero-panel-blur, none);
	padding: var(--hero-panel-pad, 0);
	border: var(--hero-panel-border, 0);
	border-radius: var(--hero-panel-radius, var(--decor-radius, 0));
	box-shadow: var(--hero-panel-shadow, none);
	container-type: inline-size;
}

/* === Kicker =============================================================== */
body.aibt-universal .universal-hero--full-bleed-center-overlay .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.9;
	margin: 0 auto var(--space-md) auto !important;
	text-shadow: var(--hero-text-shadow, 0 1px 8px rgba(0, 0, 0, 0.45));
}

/* === Headline - display type, sized against the PANEL width ================
   font-size from cqi so it auto-fits a narrow light-theme card (lands near the
   lower clamp bound) and clamps to the full statement in the wide dark scrim
   mode. Overrides the block inline clamp on purpose. */
body.aibt-universal .universal-hero--full-bleed-center-overlay h1.universal-hero__headline,
body.aibt-universal .universal-hero--full-bleed-center-overlay .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--hero-panel-text, var(--text-on-photo, #fff)) !important;
	margin: 0 auto var(--space-md) auto !important;
	max-width: 20ch;
	line-height: 1.04;
	text-shadow: var(--hero-text-shadow, 0 2px 16px rgba(0, 0, 0, 0.45));
	font-size: clamp(2.6rem, 9.5cqi, 5.5rem) !important;
}

body.aibt-universal .universal-hero--full-bleed-center-overlay .universal-hero__headline em {
	font-style: italic;
	color: var(--hero-em-color, var(--hero-panel-text, var(--text-on-photo, #fff)));
	font-weight: inherit;
}

/* === Deck - 1-2 lines, centred ============================================ */
body.aibt-universal .universal-hero--full-bleed-center-overlay .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(--hero-panel-text, var(--text-on-photo, #fff)) !important;
	opacity: 0.94;
	max-width: 52ch;
	margin: 0 auto var(--space-lg) auto !important;
	text-shadow: var(--hero-text-shadow, 0 1px 10px rgba(0, 0, 0, 0.45));
}

/* === Primary CTA - solid, confident "destination" close ===================
   Uses the theme's AA-paired --cta-bg-primary / --cta-text-primary set. In dark
   scrim mode that is the accent fill + dark label (pops on the vignette); on the
   light themes the same set sits on the white panel (e.g. ink-on-white). The
   centred buttons block already centres it; ensure the link itself stays inline. */
body.aibt-universal .universal-hero--full-bleed-center-overlay .universal-hero__cta {
	margin: 0;
}

body.aibt-universal .universal-hero--full-bleed-center-overlay .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.6rem;
	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);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
	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;
	justify-content: center;
}

body.aibt-universal .universal-hero--full-bleed-center-overlay .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--full-bleed-center-overlay .wp-block-button.universal-hero__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--cta-text-primary, #fff);
	outline-offset: var(--focus-offset, 4px);
}

/* === Tablet =============================================================== */
@media (max-width: 959px) {
	body.aibt-universal .universal-hero--full-bleed-center-overlay {
		min-height: 80vh;
	}
}

/* === Mobile - same centred stack, comfortable padding ===================== */
@media (max-width: 781px) {
	body.aibt-universal .universal-hero--full-bleed-center-overlay {
		min-height: auto !important;
	}

	body.aibt-universal .universal-hero--full-bleed-center-overlay .universal-hero__content {
		padding-block: calc(clamp(var(--space-2xl), 16vh, 9rem) * var(--density, 1));
		padding-inline: clamp(var(--space-md), 7vw, var(--space-xl));
	}

	/* A panel can crowd a small viewport - let it span the comfortable column. */
	body.aibt-universal .universal-hero--full-bleed-center-overlay .universal-hero__panel {
		max-width: none;
	}

	body.aibt-universal .universal-hero--full-bleed-center-overlay .universal-hero__headline {
		font-size: clamp(2.3rem, 8.5vw, 3.6rem) !important;
		max-width: 16ch;
	}

	/* Strengthen the vignette a touch on mobile - the photo crops tighter so the
	   centre can be brighter; keeps the centred light text AA. */
	body.aibt-universal .universal-hero--full-bleed-center-overlay::before {
		background:
			radial-gradient(
				ellipse 95% 75% at 50% 50%,
				rgba(0, 0, 0, 0.60) 0%,
				rgba(0, 0, 0, 0.46) 50%,
				rgba(0, 0, 0, 0.26) 100%
			),
			linear-gradient(180deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.34) 100%);
	}
}

/* === Small mobile - drop uppercase tracking (KI-003) ====================== */
@media (max-width: 640px) {
	body.aibt-universal .universal-hero--full-bleed-center-overlay .universal-hero__kicker {
		letter-spacing: 0 !important;
	}

	body.aibt-universal .universal-hero--full-bleed-center-overlay .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--full-bleed-center-overlay .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--full-bleed-center-overlay .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* === Editor canvas - no entrance hidden-state here, but keep parity with the
   skeleton's editor override convention (content stays visible regardless). === */
.editor-styles-wrapper .universal-hero--full-bleed-center-overlay .universal-hero__panel {
	opacity: 1 !important;
	transform: none !important;
}