/**
 * Variant CSS: hero--full-photo-lower-third-band
 * Layer 2 — Variants Library (Path B Recipes architecture).
 *
 * Concept: full-bleed cinematic cover photo where the top two-thirds of the
 *   frame stay clean and ALL copy lives in a solid, dark LOWER-THIRD BAND
 *   pinned to the bottom edge — like a broadcast "lower third" / film title
 *   card. Inside the band a horizontal row: copy-block left (kicker + H1 +
 *   deck) and the single primary CTA right. On phones the band stacks (copy
 *   then full-width CTA).
 *
 * Distinct from full-bleed-photo-bottom-overlay by: the copy sits on a SOLID,
 *   sharply-edged dark band with its OWN background (a broadcast title card),
 *   NOT a soft gradient melting into the photo. Distinct from
 *   full-photo-scrim-statement by: condensed bottom band in a horizontal
 *   copy<->CTA layout instead of a centred full-frame statement.
 *
 * AA strategy: the band paints its own dark surface
 *   (color-mix(in srgb, #000 82%, var(--accent))), so the light text
 *   (--on-dark) reads regardless of which photo pixels sit behind the band —
 *   legibility never depends on the image (KI-020 safe; we never use --bg-main
 *   as a foreground). The CTA is a SOLID filled button on the theme-audited
 *   --cta-bg-primary / --cta-text-primary pair, self-contained AA on its own
 *   fill. A short scrim fades the band's TOP edge up into the photo so the seam
 *   reads as intentional (hardcoded rgba allowed ONLY here — a scrim, not a
 *   theme surface).
 *
 * Scope rule: EVERY selector starts with
 *   body.aibt-universal .universal-hero--full-photo-lower-third-band
 * because the theme loads ALL variant CSS globally (role-level selectors leak).
 * Only @media / @keyframes are left unscoped.
 *
 * @package AI_Base_Theme
 * @since 2026-06-11 (Path B Variants Library)
 *
 * Default photo: photo-1486406146926-c627a92ad1ab — looking up at glass
 * skyscrapers (downtown financial district, blue-grey premium architecture).
 * Cinematic landscape that crops cleanly full-bleed and suits architecture /
 * real-estate / hospitality / travel. The recipe pipeline can swap the cover
 * url per industry. Pool alternatives: photo-1469474968028-56623f02e42e
 * (mountain lake), photo-1481833761820-0509d3217039 (coastal road),
 * photo-1600585154340-be6161a56a0c (modern house), photo-1517248135467-4c7edcad34c4
 * (restaurant interior).
 */

/* === Cover shell ==========================================================
   Kill the default cover padding; the band owns all the inner gutters. Pin the
   inner container to the BOTTOM so the band always lands on the lower edge even
   if a theme overrides contentPosition. */
body.aibt-universal .universal-hero--full-photo-lower-third-band {
	padding: 0 !important;
	border-bottom: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.08));
}

body.aibt-universal .universal-hero--full-photo-lower-third-band .wp-block-cover__image-background {
	object-fit: cover;
	object-position: center;
}

body.aibt-universal .universal-hero--full-photo-lower-third-band .wp-block-cover__inner-container {
	width: 100%;
	/* Push the band to the bottom edge regardless of contentPosition. */
	margin-block: 0;
	margin-top: auto;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* === The solid lower-third band ===========================================
   ~one-third of the cover height visually, full bleed, with its OWN dark
   surface. A short top-edge scrim fades the band up into the photo so the hard
   edge reads as a deliberate title card, not a clipped box. */
body.aibt-universal .universal-hero--full-photo-lower-third-band .universal-hero__band {
	position: relative;
	width: 100%;
	margin: 0;
	/* Solid near-black band tinted toward the brand accent (dark tint). */
	background: color-mix(in srgb, #000 82%, var(--accent, #000));
	color: var(--on-dark, #fff);
	padding-block: calc(clamp(var(--space-lg, 2rem), 4vh, var(--space-2xl, 5rem)) * var(--density, 1));
	padding-inline: clamp(var(--space-md, 1.25rem), 6vw, var(--space-2xl, 5rem));
	box-sizing: border-box;
}

/* Scrim that fades the band's TOP edge up into the photo (depth + soft seam).
   Sits ABOVE the band but BELOW its content. */
body.aibt-universal .universal-hero--full-photo-lower-third-band .universal-hero__band::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: clamp(3rem, 12vh, 9rem);
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, color-mix(in srgb, #000 82%, var(--accent, #000)) 100%);
	pointer-events: none;
}

/* === Horizontal band row: copy left, CTA right ============================ */
body.aibt-universal .universal-hero--full-photo-lower-third-band .universal-hero__band-row {
	position: relative;
	width: 100%;
	max-width: var(--max-wide, 1280px);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(var(--space-md, 1.25rem), 3vw, var(--space-2xl, 5rem));
	box-sizing: border-box;
}

/* Copy block — grows to fill, but never forces overflow (min-width:0). */
body.aibt-universal .universal-hero--full-photo-lower-third-band .universal-hero__copy {
	flex: 1 1 22rem;
	min-width: 0;
	margin: 0;
}

/* Kicker — small accent rule, brightened so it clears AA on the dark band. */
body.aibt-universal .universal-hero--full-photo-lower-third-band .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(--accent, #fff) 55%, #fff) !important;
	margin: 0 0 var(--space-sm, 0.75rem) 0 !important;
	line-height: 1.2;
}

/* Headline — slightly smaller display since it lives inside a band.
   font-size/line-height/tracking come from the block inline style; this only
   sets family + colour + measure. */
body.aibt-universal .universal-hero--full-photo-lower-third-band h1.universal-hero__headline,
body.aibt-universal .universal-hero--full-photo-lower-third-band .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--on-dark, #fff) !important;
	margin: 0 0 var(--space-sm, 0.75rem) 0 !important;
	max-width: 22ch;
	text-wrap: balance;
}

body.aibt-universal .universal-hero--full-photo-lower-third-band .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-lower-third-band .universal-hero__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-base, 1rem) !important;
	line-height: var(--leading-relaxed, 1.6) !important;
	color: color-mix(in srgb, var(--on-dark, #fff) 82%, transparent) !important;
	margin: 0 !important;
	max-width: 52ch;
}

/* === CTA — solid filled button, self-contained AA ========================= */
body.aibt-universal .universal-hero--full-photo-lower-third-band .universal-hero__actions {
	flex: 0 0 auto;
	margin: 0;
}

body.aibt-universal .universal-hero--full-photo-lower-third-band .wp-block-button.universal-hero__cta .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.5rem;
	color: var(--cta-text-primary, #fff);
	background: var(--cta-bg-primary, var(--accent, #fff));
	border: var(--decor-border-width, 1px) solid var(--cta-border-primary, var(--cta-bg-primary, var(--accent, #fff)));
	border-radius: var(--decor-radius, 0);
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	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-lower-third-band .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
	background: var(--accent-hover, color-mix(in srgb, var(--cta-bg-primary, var(--accent, #fff)) 86%, #000));
	border-color: var(--accent-hover, color-mix(in srgb, var(--cta-bg-primary, var(--accent, #fff)) 86%, #000));
	transform: translateY(-2px);
}

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

/* === Tablet =============================================================== */
@media (max-width: 781px) {
	body.aibt-universal .universal-hero--full-photo-lower-third-band .universal-hero__headline {
		font-size: clamp(1.85rem, 5.5vw, 2.6rem) !important;
		max-width: 24ch;
	}
}

/* === Mobile ===============================================================
   Band stacks: copy first, CTA second as a full-width button. Box-border
   padding keeps everything inside 375px (no horizontal overflow). */
@media (max-width: 640px) {
	body.aibt-universal .universal-hero--full-photo-lower-third-band .universal-hero__band {
		padding-block: calc(clamp(var(--space-lg, 2rem), 5vh, var(--space-xl, 3rem)) * var(--density, 1));
	}

	body.aibt-universal .universal-hero--full-photo-lower-third-band .universal-hero__band-row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-lg, 2rem);
	}

	/* Drop uppercase kicker tracking on the smallest screens (KI-003). */
	body.aibt-universal .universal-hero--full-photo-lower-third-band .universal-hero__kicker {
		letter-spacing: 0.04em !important;
	}

	body.aibt-universal .universal-hero--full-photo-lower-third-band .universal-hero__headline {
		font-size: clamp(1.75rem, 8.5vw, 2.5rem) !important;
		max-width: 100%;
		letter-spacing: -0.015em !important;
	}

	body.aibt-universal .universal-hero--full-photo-lower-third-band .universal-hero__deck {
		max-width: 100%;
	}

	/* CTA becomes a full-width button under the copy. */
	body.aibt-universal .universal-hero--full-photo-lower-third-band .universal-hero__actions {
		width: 100%;
	}

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

/* === Motion =============================================================== */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--full-photo-lower-third-band .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--full-photo-lower-third-band .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* === Editor wrapper — the locked editor canvas doesn't stretch the cover the
   same way; make sure the band still reads at the bottom without odd clipping. */
.editor-styles-wrapper .universal-hero--full-photo-lower-third-band .wp-block-cover__inner-container {
	justify-content: flex-end;
}