/**
 * Variant CSS: hero--full-photo-bottom-kicker-bar
 * Layer 2 — Variants Library (Path B Recipes architecture).
 *
 * Concept: full-bleed cinematic cover photo where the main copy (centered
 *   display H1 + short deck + one primary CTA, light text) floats in the
 *   UPPER-MIDDLE of the frame, and the KICKER is demoted to a slim,
 *   full-width INFO BAR pinned to the VERY BOTTOM edge of the photo — a thin
 *   translucent dark strip with centered, letter-spaced uppercase text, like
 *   a news ticker / engraved signature plate.
 *
 * Distinct from full-photo-scrim-statement by: the kicker does NOT sit above
 *   the headline — it leaves the statement entirely and becomes a bottom
 *   signature strip, while the copy block rides ABOVE the frame's center.
 *   Distinct from full-photo-lower-third-band by: the bottom strip holds ONLY
 *   the kicker (a thin translucent ticker, not a solid title card carrying all
 *   the copy). Distinct from full-photo-top-headline-bar by: the bar lives at
 *   the BOTTOM and demotes the kicker, instead of promoting the headline up top.
 *
 * AA strategy: light statement text sits on the cover's 45% black dim PLUS a
 *   soft vertical scrim (darker at the top third where the copy floats and at
 *   the bottom edge under the bar), with text-shadows as belt-and-braces — the
 *   same audited approach as full-photo-scrim-statement. The kicker bar paints
 *   its own translucent dark surface (color-mix 55% black over the dim+scrim
 *   stack ≈ 80%+ effective black), so its light text never depends on photo
 *   pixels. The CTA is a SOLID filled button: background var(--accent) with
 *   text var(--on-accent) — NEVER --on-dark, which is invisible on bright
 *   accents (charcoal-mono-luxe / butter / peach). KI-020 safe: --bg-main is
 *   never used as a foreground color.
 *
 * Scope rule: EVERY selector starts with
 *   body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar
 * because the theme loads ALL variant CSS globally (role-level selectors leak).
 * Only @media / @keyframes are left unscoped (editor wrapper excepted).
 *
 * @package AI_Base_Theme
 * @since 2026-06-11 (Path B Variants Library — bottom kicker-bar hero)
 *
 * Default photo: photo-1517248135467-4c7edcad34c4 — warm restaurant interior
 * with wooden tables and pendant lights (landscape, crops cleanly full-bleed).
 * Suits gastronomy / hospitality / craft studios; the recipe pipeline can swap
 * the cover url per industry. Pool alternatives: photo-1544161515-4ab6ce6db874
 * (spa stones), photo-1469474968028-56623f02e42e (mountain lake),
 * photo-1486406146926-c627a92ad1ab (glass skyscrapers),
 * photo-1600585154340-be6161a56a0c (modern house).
 */

/* === Cover shell ==========================================================
   Kill the default cover padding so the kicker bar can touch the exact bottom
   (and side) edges; the statement carries its own gutters instead. */
body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar {
	padding: 0 !important;
	border-bottom: 1px solid var(--divider-primary, color-mix(in srgb, #000 8%, transparent));
}

body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .wp-block-cover__image-background {
	object-fit: cover;
	object-position: center;
}

/* Soft vertical scrim layered over the flat dim: darker where the statement
   floats (upper-middle) and at the very bottom under the kicker bar, clearer
   through the lower-middle so the photo can breathe. */
body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .wp-block-cover__background {
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, #000 32%, transparent) 0%,
		color-mix(in srgb, #000 16%, transparent) 38%,
		transparent 62%,
		color-mix(in srgb, #000 42%, transparent) 100%
	);
}

/* Stretch the inner container to the full cover height and stack it as a
   column: statement first (auto margins center it in the free space above the
   bar), kicker bar last (pinned to the bottom edge). */
body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .wp-block-cover__inner-container {
	width: 100%;
	margin-block: 0;
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

/* === Statement (upper-middle copy) ========================================
   Auto block margins center the BOX in the space above the bar; the larger
   bottom padding biases the visible copy ABOVE the geometric center — the
   "upper-middle" hang that defines this variant. */
body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .universal-hero__statement {
	width: 100%;
	margin-block: auto;
	padding-top: calc(clamp(var(--space-lg, 2rem), 5vh, var(--space-xl, 3rem)) * var(--density, 1));
	padding-bottom: calc(clamp(var(--space-xl, 3rem), 13vh, var(--space-3xl, 7rem)) * var(--density, 1));
	padding-inline: clamp(var(--space-md, 1.25rem), 6vw, var(--space-2xl, 5rem));
	box-sizing: border-box;
}

/* Headline — oversized light display type, centered (A8/A9: margin-inline auto). */
body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--on-dark, #fff) !important;
	margin: 0 auto var(--space-md, 1.25rem) !important;
	max-width: 18ch;
	text-wrap: balance;
	text-shadow: 0 2px 30px color-mix(in srgb, #000 45%, transparent);
}

body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .universal-hero__headline em {
	font-style: italic;
	color: color-mix(in srgb, var(--accent, #fff) 70%, #fff);
	font-weight: inherit;
}

body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .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;
	margin: 0 auto clamp(var(--space-lg, 2rem), 4vh, var(--space-xl, 3rem)) !important;
	max-width: 46ch;
	text-shadow: 0 1px 20px color-mix(in srgb, #000 45%, transparent);
}

/* === CTA — solid filled button, self-contained AA on its own fill ========= */
body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .universal-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-inline: auto;
}

body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .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.05rem 2.6rem;
	/* Text on the --accent surface MUST be --on-accent (NEVER --on-dark):
	   bright accents (lime/butter/peach/charcoal-mono-luxe) need dark ink. */
	color: var(--on-accent, #fff);
	background: var(--accent);
	border: var(--decor-border-width, 1px) solid 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, 240ms) var(--ease-snappy, ease),
		border-color var(--duration-fast, 240ms) var(--ease-snappy, ease),
		transform var(--duration-fast, 240ms) var(--ease-snappy, ease);
}

body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .universal-hero__cta--primary .wp-block-button__link:hover {
	background: var(--accent-hover, color-mix(in srgb, var(--accent) 86%, #000));
	border-color: var(--accent-hover, color-mix(in srgb, var(--accent) 86%, #000));
	transform: translateY(-2px);
}

body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .universal-hero__cta--primary .wp-block-button__link:focus-visible {
	outline: 2px solid var(--on-dark, #fff);
	outline-offset: var(--focus-offset, 4px);
}

/* === Bottom kicker bar — the signature move ===============================
   A slim translucent dark strip glued to the photo's bottom edge: thin top
   keyline, optional glass blur, and ONLY the letter-spaced kicker inside. */
body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .universal-hero__kickerbar {
	width: 100%;
	margin: 0;
	background: color-mix(in srgb, #000 55%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-top: var(--decor-border-width, 1px) solid color-mix(in srgb, #fff 22%, transparent);
	padding-block: calc(clamp(var(--space-sm, 0.75rem), 1.8vh, var(--space-md, 1.25rem)) * var(--density, 1));
	padding-inline: clamp(var(--space-md, 1.25rem), 6vw, var(--space-2xl, 5rem));
	box-sizing: border-box;
}

/* Kicker — ticker-style centered uppercase micro-type (A8/A9: margin-inline auto). */
body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .universal-hero__kicker {
	display: 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(--on-dark, #fff) 90%, transparent) !important;
	margin: 0 auto !important;
	max-width: none;
	line-height: 1.5;
}

/* === Mobile ===============================================================
   Statement stays centered; CTA becomes a full-width button; the kicker bar
   drops its wide tracking (KI-003) and wraps without horizontal overflow. */
@media (max-width: 640px) {
	body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .universal-hero__headline {
		font-size: clamp(2.05rem, 8.8vw, 2.8rem) !important;
		letter-spacing: -0.015em !important;
		max-width: 100%;
	}

	body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .universal-hero__deck {
		font-size: var(--text-base, 1rem) !important;
		max-width: 100%;
	}

	body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .universal-hero__statement {
		padding-bottom: calc(clamp(var(--space-lg, 2rem), 9vh, var(--space-2xl, 5rem)) * var(--density, 1));
	}

	body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .universal-hero__actions {
		width: 100%;
	}

	body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .universal-hero__actions .wp-block-button,
	body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .universal-hero__actions .wp-block-button__link {
		width: 100%;
		justify-content: center;
		white-space: normal;
	}

	body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .universal-hero__kicker {
		letter-spacing: 0.04em !important;
	}
}

/* === Motion =============================================================== */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .universal-hero__cta--primary .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--full-photo-bottom-kicker-bar .universal-hero__cta--primary .wp-block-button__link:hover {
		transform: none;
	}
}

/* === Editor wrapper — keep the column stack (statement above, bar at the
   bottom) readable inside the locked editor canvas. */
.editor-styles-wrapper .universal-hero--full-photo-bottom-kicker-bar .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
}