/* ═════════════════════════════════════════════════════════════════════════
   CLOSING CTA BAND (W-091) — component styles

   The full-width bottom-of-page closer between the thin promo banner and the
   floating sticky-cta. Layouts (centered / split / contained), backgrounds
   (solid / gradient / image / video), and the contrast-safe overlay scrim are
   ALL pure CSS; cta-band.js is progressive enhancement only (video pause,
   async capture, desktop click-to-copy, mobile sticky handoff).

   STACKING (spec §8.5): the root sets `isolation:isolate` to open its own
   stacking context, then layers video -> scrim -> content -> pause-toggle by
   DOM ORDER using positioned elements only — NO z-index token is spent (and no
   bare z-index integer either). Every layer is position:absolute except the
   content wrapper (position:relative); painted last-in-DOM = topmost.

   Variant sheets are @imported so the loader (which enqueues only cta-band.css)
   pulls them on the same request.
   ═════════════════════════════════════════════════════════════════════════ */
/* ── ONE COMPOSITION (Wave S) ────────────────────────────────────────────
   This component ships exactly ONE composition: a full-width closing band - heading plus actions, centred, split or contained.

   That is a feature. One composition is why it is responsive, accessible and
   identical on two hundred sites, and why a client build can place it without
   re-deciding anything. It is also a hard limit: the component cannot express
   a SECOND composition, and making it try — nesting it, stacking modifiers on
   it, overriding its grid from a client sheet — is how a page ends up fighting
   its own components and still looking generic.

   FOR AN AMPLIFY OR ELEVATE SECTION, DO NOT BEND THIS COMPONENT. Take one of:
     • RAW mode — author the section's markup directly, or
     • hand-author to the class contract on the spatial utilities:
       .hzo-grid + .hzo-span-* / .hzo-rowspan-* / --hzo-grid-template,
       .hzo-bleed, .hzo-pull-* / .hzo-z-*, .hzo-section--edge-*, .hzo-measure-*.
   Both are the STANDARD route for a high-intensity section, not an escape
   hatch, and the composition plan is what says which sections those are.

   PLUMBING AND PROOF COMPONENTS ARE UNAFFECTED. Every JS widget and every
   proof/data component (reviews, credentials, ratings, schema) stays
   mandatory — never hand-roll those. This note is about LAYOUT only.
   ────────────────────────────────────────────────────────────────────────── */

@import './cta-band-split.css?ver=1787769613';
@import './cta-band-contained.css?ver=1787769613';

.hzo-cta-band {
    position: relative;
    isolation: isolate;                 /* own stacking context — see header */
    overflow: hidden;
    padding: var(--space-2xl) var(--space-lg);
    background: var(--hzo-cta-bg, var(--brand));
    color: var(--text-on-brand, #fff);
}

/* ── Background variants ─────────────────────────────────────────────────── */
/* --gradient-brand-sweep IS the literal that used to sit here (tokens.css) — one
   definition of the fleet's diagonal brand wash, shared with .hzo-mega-cta. */
.hzo-cta-band--bg-gradient { background: var(--hzo-cta-gradient, var(--gradient-brand-sweep, linear-gradient(135deg, var(--brand), var(--brand-deep)))); }
.hzo-cta-band--bg-image,
.hzo-cta-band--bg-video {
    background-color: var(--brand-deep);            /* fallback under the media */
    background-image: var(--hzo-cta-image, none);   /* image url / video poster */
    background-size: cover;
    background-position: center;
}

/* Decorative background <video> — muted/loop/aria-hidden, painted first. */
.hzo-cta-band__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* AA-floor overlay scrim (color-mix). Strength/tint come from the handler as
   --hzo-cta-overlay (%) + --hzo-cta-overlay-color; only rendered when > 0. */
.hzo-cta-band__scrim {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--hzo-cta-overlay-color, var(--brand-deep)) var(--hzo-cta-overlay, 55%), transparent);
    pointer-events: none;
}

/* Content wrapper — positioned (relative) so it paints above the absolute
   video + scrim purely by DOM order. */
.hzo-cta-band__inner {
    position: relative;
    max-width: var(--container-max-width, 1350px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* ── Centered (default) ──────────────────────────────────────────────────── */
.hzo-cta-band--centered .hzo-cta-band__inner { text-align: center; align-items: center; }
.hzo-cta-band--centered .hzo-cta-band__copy { max-width: 46rem; }
.hzo-cta-band--centered .hzo-cta-band__actions { justify-content: center; }

/* ── Copy column ─────────────────────────────────────────────────────────── */
.hzo-cta-band__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-smd, 12px);
}
.hzo-cta-band__eyebrow {
    margin: 0;
    font-size: var(--eyebrow-size, 15px);
    font-weight: var(--fw-semibold, 600);
    letter-spacing: var(--tracking-wide, 0.05em);
    text-transform: uppercase;
    opacity: var(--opacity-muted, 0.85);
}
.hzo-cta-band__heading {
    margin: 0;
    text-wrap: balance;
    color: inherit;
}
.hzo-cta-band__subhead {
    margin: 0;
    max-width: var(--prose-max-width, 65ch);
    font-size: 1.125rem;
    line-height: var(--lh-relaxed, 1.7);
    opacity: 0.92;
}
.hzo-cta-band--centered .hzo-cta-band__subhead { margin-inline: auto; }

/* ── Trust line + star rating ────────────────────────────────────────────── */
.hzo-cta-band__trust {
    margin: 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: 0.95rem;
    opacity: 0.9;
}
.hzo-cta-band__rating {
    position: relative;
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1;
    white-space: nowrap;
}
.hzo-cta-band__stars-base { color: color-mix(in srgb, currentColor 35%, transparent); }
.hzo-cta-band__stars-fill {
    position: absolute;
    inset: 0;
    overflow: hidden;
    width: var(--hzo-cta-stars, 100%);
    color: #f6c945;                     /* warm review-star gold (not a brand hue) */
}

/* ── Actions ─────────────────────────────────────────────────────────────── */
.hzo-cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}
.hzo-cta-band__action { display: inline-flex; align-items: center; gap: var(--space-sm); }
.hzo-cta-band__icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ── Inline capture (reuses .hzo-input-group) ────────────────────────────── */
.hzo-cta-band__capture { width: 100%; max-width: 32rem; }
.hzo-cta-band--centered .hzo-cta-band__capture { margin-inline: auto; }
.hzo-cta-band__capture .hzo-input-group { max-width: none; }
/* In-flight submit-lock: dimmed but the spinner/text still read (forced-colors
   safe — never the ONLY busy signal). */
.hzo-cta-band__submit[aria-busy="true"],
.hzo-cta-band__submit.is-loading { opacity: var(--opacity-muted, 0.65); }
/* Invalid capture field — a VISIBLE border + ring, never suppressed (G49). */
.hzo-cta-band__capture input[aria-invalid="true"] {
    border-color: var(--error, #dc2626);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--error, #dc2626) 30%, transparent);
}
.hzo-cta-band__capture-status {
    margin: var(--space-sm) 0 0;
    font-size: 0.9rem;
}
.hzo-cta-band__capture-status.is-error { color: color-mix(in srgb, #fff 88%, var(--error)); }
.hzo-cta-band--text-dark .hzo-cta-band__capture-status.is-error { color: var(--error-text, #991b1b); }
/* Confirmation swap fragment (JS replaces the input-group with this). */
.hzo-cta-band__confirm {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.05rem;
    font-weight: var(--fw-semibold, 600);
}

/* ── Text scheme ─────────────────────────────────────────────────────────── */
.hzo-cta-band--text-light { color: var(--heading-color-on-dark, #fff); }
.hzo-cta-band--text-light .hzo-cta-band__heading,
.hzo-cta-band--text-light .hzo-cta-band__eyebrow { color: var(--heading-color-on-dark, #fff); }
.hzo-cta-band--text-dark { color: var(--text-body); }
.hzo-cta-band--text-dark .hzo-cta-band__heading,
.hzo-cta-band--text-dark .hzo-cta-band__eyebrow { color: var(--text-heading); }
.hzo-cta-band--text-dark .hzo-cta-band__eyebrow { color: var(--brand-text); }

/* ── Video pause/play control — visible at rest (WCAG 2.2.2), painted last ── */
.hzo-cta-band__video-toggle {
    position: absolute;
    right: var(--space-lg);
    bottom: var(--space-lg);
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 1px solid var(--surface-border, transparent);
    border-radius: var(--radius-pill);
    background: var(--surface, #fff);
    color: var(--on-surface, var(--text-heading));
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--fw-semibold, 600);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-standard);
}
.hzo-cta-band__video-toggle:hover { background: var(--bg-alt); }
.hzo-cta-band__video-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ── Visually-hidden capture label (associated <label>, never a placeholder) ─ */
.hzo-cta-band__sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Focus ring floor (real outline — forced-colors + box-shadow-unreliable) ─ */
.hzo-cta-band .hzo-btn:focus-visible,
.hzo-cta-band__capture input:focus-visible { outline-offset: 2px; }

/* ── Environment ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    /* Ambient gradient/video motion is class/JS-gated; kill control transitions
       and any reveal travel here (content must never stay opacity:0). */
    .hzo-cta-band__video-toggle { transition: none; }
    .hzo-cta-band.hzo-reveal { opacity: 1 !important; transform: none !important; }
}

@media print {
    /* Force the band visible if .hzo-reveal left it hidden (G13); drop the
       decorative chrome; keep the copy + actions legible on paper. */
    .hzo-cta-band { background: none !important; color: #000 !important; }
    .hzo-cta-band.hzo-reveal { opacity: 1 !important; transform: none !important; }
    .hzo-cta-band__video,
    .hzo-cta-band__scrim,
    .hzo-cta-band__video-toggle { display: none !important; }
    .hzo-cta-band__heading,
    .hzo-cta-band__eyebrow { color: #000 !important; }
    /* Expose the destination of each action so a printed page keeps the number/URL. */
    .hzo-cta-band__action[href]::after {
        content: " (" attr(href) ")";
        font-weight: 400;
        font-size: 0.85em;
    }
}

@media (forced-colors: active) {
    /* The color-mix scrim is dropped by the OS; don't rely on it for contrast.
       Give text a real system pairing and the toggle a real border. */
    .hzo-cta-band { background: Canvas; color: CanvasText; }
    .hzo-cta-band__scrim { display: none; }
    .hzo-cta-band__heading,
    .hzo-cta-band__eyebrow,
    .hzo-cta-band--text-light,
    .hzo-cta-band--text-light .hzo-cta-band__heading,
    .hzo-cta-band--text-light .hzo-cta-band__eyebrow { color: CanvasText; }
    .hzo-cta-band__video-toggle { border: 1px solid CanvasText; }
}