/* ══════════════════════════════════════════════════════════════════════════
   Site-wide closing CTA + demo video modal
   ══════════════════════════════════════════════════════════════════════════

   Rendered by the neve_after_primary hook in functions.php on every main-query
   page, replacing reusable block 1432 (the light-green Gutenberg cover block).

   The one decision the rest of this file follows from: this file owns NO
   typography, colour or spacing values. Those all come from static-pages/
   shared.css, which functions.php now enqueues site-wide, and the CTA markup is
   wrapped in a .static-page element so shared.css's .sp-* rules apply to it.
   That is what makes "the same styles as the voice-to-text page" true by
   construction instead of true until someone edits one copy and not the other.
   Every heading size, button, gradient and vertical rhythm here is literally
   the same rule that draws the CTA at the bottom of that page.

   Enqueueing shared.css everywhere is safe because every selector in it is
   scoped to .static-page — the only exceptions are a handful of .voice__*
   animation rules whose class names exist nowhere else on the site.

   So what is left for this file is exactly two things:

   1. The card shell. The voice-to-text page's CTA is a full-bleed band; here it
      is an inset rounded card with a white gutter, which is the shape the green
      block had and the shape that keeps the CTA from merging into the dark
      footer directly beneath it.

   2. The five layout rules Tailwind supplied on the static pages. Tailwind is a
      CDN JIT script loaded only in shared-head.html, and putting a runtime
      compiler on every page of the site to get "flex" and "gap:14px" would be a
      bad trade, so those few utilities are written out here instead.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1. Card shell ───────────────────────────────────────────────────────── */

/* The white band the card sits in. 60px matches the margin the green block
   carried, which is what put its bottom edge clear of the footer rather than
   overlapping it. */
/* Full width is stated rather than inherited. This band is a direct child of
   Neve's .wrapper, which is a flex column, so it sits alongside the header,
   main and footer and stretches like they do — but only for as long as nothing
   gives it an auto inline margin or a definite width, either of which turns a
   flex item into shrink-to-fit. Saying it outright costs one declaration and
   removes the dependency. */
.bs-cta {
    width: 100%;
    align-self: stretch;
    background: #ffffff;
    padding: 60px 24px;
}

/* Width is a single knob. 1320px is wider than the 1200px .sp-container the
   static pages set their content in, so the CTA reads as deliberately broader
   than the page above it — at the green block's 1170px it was actually
   narrower than the content, which made it look inset by accident rather than
   by design. The band's 24px padding keeps a gutter at every viewport below
   that, so the cap never needs a media query of its own.

   overflow:hidden is load-bearing, not tidiness: it clips the panel's gradient
   and its glow layer to the rounded corners. Without it the gradient paints
   square corners over the radius. */
.bs-cta__card {
    max-width: 1320px;
    margin-inline: auto;
    border-radius: 20px;
    overflow: hidden;
}

/* The inner <section> is .sp-panel-dark .sp-on-dark .sp-section, so its
   gradient, its 64px vertical rhythm and all of its on-dark colours come from
   shared.css untouched. The only override is the horizontal padding: inside a
   1170px card the container's own 24px reads as too tight for centred text at
   this heading size. */
.bs-cta__card .sp-container {
    padding-inline: 40px;
}
@media (min-width: 768px) {
    .bs-cta__card .sp-container {
        padding-inline: 70px;
    }
}


/* ── 2. Layout utilities standing in for Tailwind ────────────────────────── */

.bs-cta__inner   { position: relative; text-align: center; }
.bs-cta__lede    { max-width: 28rem; margin-inline: auto; }  /* max-w-md mx-auto */
.bs-cta__actions {                                            /* flex flex-wrap  */
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;                                            /* gap-3.5         */
    justify-content: center;
}

/* The demo trigger is a <button>, because it opens a dialog rather than going
   somewhere — but it has to sit on the same optical baseline as the <a> beside
   it, and browsers give buttons their own font and metrics. */
.bs-cta__demo {
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}


/* ── 3. Demo video modal ─────────────────────────────────────────────────── */

/* Hidden with the `hidden` attribute rather than a class so it is inert to
   assistive tech and to tab order before it is ever opened, with no JS needed
   to establish that. display:flex has to be re-asserted against the UA's
   [hidden]{display:none} once it opens, hence the :not() pairing below. */
.bs-cta-modal[hidden] { display: none; }

.bs-cta-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;          /* above Neve's sticky header */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(9, 20, 19, 0.82);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.22s ease;
}
.bs-cta-modal.is-open { opacity: 1; }

/* 16:9 by aspect-ratio, capped by BOTH axes: capping only the width overflows
   the viewport on a short landscape phone, which is exactly the case where the
   close button ends up off-screen. */
.bs-cta-modal__dialog {
    position: relative;
    width: 100%;
    max-width: min(1100px, 100%);
    max-height: calc(100vh - 48px);
    aspect-ratio: 16 / 9;
    background: #000000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75);
    transform: translateY(8px) scale(0.99);
    transition: transform 0.22s ease;
}
.bs-cta-modal.is-open .bs-cta-modal__dialog { transform: none; }

.bs-cta-modal__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000000;
}

.bs-cta-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.bs-cta-modal__close:hover,
.bs-cta-modal__close:focus-visible { background: rgba(0, 0, 0, 0.8); }

/* Unmute prompt. Autoplay is only permitted while muted, on every current
   browser — so the video always starts silent and this is the affordance that
   turns the sound on. It removes itself on first use, and also as soon as the
   viewer unmutes through the native controls, which is why the script watches
   the volumechange event rather than only this button's click. */
.bs-cta-modal__unmute {
    position: absolute;
    left: 50%;
    bottom: 68px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.94);
    color: #152927;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.6);
}
.bs-cta-modal__unmute[hidden] { display: none; }

/* Scroll lock. Applied to <html> rather than <body> because iOS Safari keeps
   scrolling the body behind a fixed overlay otherwise. */
.bs-cta-scroll-lock,
.bs-cta-scroll-lock body {
    overflow: hidden;
}

@media (max-width: 560px) {
    .bs-cta { padding: 40px 16px; }
    .bs-cta__card .sp-container { padding-inline: 24px; }
    .bs-cta-modal { padding: 12px; }
    .bs-cta-modal__unmute { bottom: 56px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .bs-cta-modal,
    .bs-cta-modal__dialog {
        transition: none;
    }
    .bs-cta-modal__dialog { transform: none; }
}