/**
 * Variant CSS: hero--full-bleed-photo-bottom-overlay
 * Layer 2 — Variants Library (Path B Recipes architecture).
 *
 * Text-on-photo protection is THEME-DRIVEN (2026-05-28):
 *   --hero-scrim       full-bleed overlay gradient over the photo (default: dark bottom)
 *   --hero-panel-bg    text panel background (default: transparent → scrim-only mode)
 *   --hero-panel-text  text colour inside the panel (default: --text-on-photo)
 *   --hero-panel-blur / --hero-panel-pad / --hero-panel-max / --hero-panel-border /
 *   --hero-panel-radius / --hero-panel-shadow / --hero-text-shadow
 * A dark/atmospheric theme leaves the defaults (scrim + light text). A light theme
 * sets a solid/translucent panel + dark text so the client's photo can't break
 * contrast — the panel is always in the DOM, just invisible when not styled.
 *
 * @package AI_Base_Theme
 * @since 2026-05-27 (Phase 2 Path B — extracted z piwnica-hero)
 */

body.aibt-universal .universal-hero--full-bleed-photo-bottom-overlay {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--background-dark, var(--ink));
}

body.aibt-universal .universal-hero--full-bleed-photo-bottom-overlay .universal-hero__photo {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

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

/* Full-bleed scrim — theme overridable. Default: dark bottom gradient. */
body.aibt-universal .universal-hero--full-bleed-photo-bottom-overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(
		--hero-scrim,
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0) 35%,
			rgba(0, 0, 0, 0.45) 65%,
			rgba(0, 0, 0, 0.85) 100%
		)
	);
	z-index: 1;
	pointer-events: none;
}

body.aibt-universal .universal-hero--full-bleed-photo-bottom-overlay .universal-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--max-ultra, 1400px);
	margin: 0 auto;
	padding: clamp(3rem, 6vh, 5rem) clamp(var(--space-md), 5vw, var(--space-xl));
}

/* Text panel — invisible by default (scrim-only). Light themes turn it into a
   contrast-safe card via the --hero-panel-* tokens.
   container-type:inline-size lets the headline size itself against the PANEL
   inline size (cqi), so it auto-shrinks inside a narrow light-theme glass card
   and stays large in the full-width dark scrim mode. This is the one selector
   that discriminates the two modes without reading the theme class. */
body.aibt-universal .universal-hero--full-bleed-photo-bottom-overlay .universal-hero__panel {
	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);
	max-width: var(--hero-panel-max, none);
	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;
}

body.aibt-universal .universal-hero--full-bleed-photo-bottom-overlay .universal-hero__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 500 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	color: var(--hero-panel-text, var(--text-on-photo, #fff)) !important;
	opacity: 0.85;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-hero--full-bleed-photo-bottom-overlay h1.universal-hero__headline,
body.aibt-universal .universal-hero--full-bleed-photo-bottom-overlay .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-lg) 0 !important;
	max-width: 18ch;
	text-shadow: var(--hero-text-shadow, 0 2px 12px rgba(0, 0, 0, 0.4));
	/* Size against the PANEL width: in a narrow light-theme glass card (~430px)
	   this lands near ~3rem so long words wrap between words, not mid-word; in
	   the full-width dark scrim mode (~1300px) it clamps to the 6rem statement.
	   Overrides the block inline clamp (6rem cap was breaking words in panels). */
	font-size: clamp(2.4rem, 11cqi, 6rem) !important;
}

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

/* CTA — outline using the panel/photo text colour */
body.aibt-universal .universal-hero--full-bleed-photo-bottom-overlay .wp-block-button.universal-hero__cta .wp-block-button__link {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--text-base);
	letter-spacing: var(--tracking-wide);
	padding: 1.1rem 2.5rem;
	color: var(--hero-panel-text, var(--text-on-photo, #fff));
	background: transparent;
	border: var(--decor-border-width, 1px) solid var(--hero-panel-text, var(--text-on-photo, #fff));
	border-radius: var(--decor-radius, 0);
	transition: all 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--full-bleed-photo-bottom-overlay .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
	background: var(--accent, currentColor);
	color: var(--cta-text-primary, var(--background-dark, #000));
	border-color: var(--accent, currentColor);
}

/* Keyboard focus ring — light on the photo/scrim (was missing — keyboard a11y). */
body.aibt-universal .universal-hero--full-bleed-photo-bottom-overlay .wp-block-button.universal-hero__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--hero-panel-text, var(--text-on-photo, #fff));
	outline-offset: var(--focus-offset, 4px);
}

/* Respect reduced-motion: drop the CTA transition. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--full-bleed-photo-bottom-overlay .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}
}

/* === Mobile === */
@media (max-width: 781px) {
	body.aibt-universal .universal-hero--full-bleed-photo-bottom-overlay {
		min-height: auto !important;
	}

	body.aibt-universal .universal-hero--full-bleed-photo-bottom-overlay .universal-hero__headline {
		font-size: clamp(2.2rem, 8vw, 3.5rem) !important;
	}

	/* On mobile a panel can crowd the viewport — let it span full width. */
	body.aibt-universal .universal-hero--full-bleed-photo-bottom-overlay .universal-hero__panel {
		max-width: none;
	}
}

/* Drop uppercase kicker tracking on the smallest screens (KI-003). */
@media (max-width: 640px) {
	body.aibt-universal .universal-hero--full-bleed-photo-bottom-overlay .universal-hero__kicker {
		letter-spacing: 0 !important;
	}
}