/* 11 — Hero
   Owns: the hero card, its type scale, and its actions row
   Depends on: 01-tokens, 02-base (.btn family), 10-sections (.rw-eyebrow)

   ── Markup contract ─────────────────────────────────────────
   A BB HTML module whose CSS Class field is `rw-hero__inner`, placed in a row
   whose class field is `rw-hero`. BB renders an HTML module as a single
   element — `.fl-module.fl-module-html.fl-html.fl-node-<id>` — with the
   authored HTML as its DIRECT children (verified on the live page). So the
   module element is itself the card; no wrapper div is needed.

     <p   class="rw-eyebrow">Video Production &amp; Camera Rental · South Florida</p>
     <div class="rw-hero__title">Experienced <span>filmmakers</span></div>
     <div class="rw-hero__text">
       <p>If you have a story to tell…</p>
       <p>Full production crews, cameras and creative direction — …</p>
     </div>
     <div class="rw-hero__actions">
       <a class="btn btn-primary"         href="/portfolio/">Portfolio</a>
       <a class="btn btn-outline-neutral" href="/get-a-quote/">Get a quote</a>
     </div>

   The title is a div, not an h1: hero copy often is not the page's true
   heading, so the heading level is left to the content below it.

   NOT set here, because the builder owns them (see 10-sections.css):
   the row's background image, its min-height, and the column width the card
   sits in. All three are content or geometry — set them in the BB editor. */

/* The card. A plain surface panel; it reads as an overlay only because the row
   behind it carries a photo. */
.rw-hero__inner {
    padding: clamp(20px, 4vw, 40px);
    background-color: var(--surface);
    /* Makes this the query container the title sizes against — see the
       font-size note there. Safe on a BB module element: the card's inline
       size comes from its parent (100%, or the 40% cap below), never from its
       contents, so inline-size containment changes nothing about the layout. */
    container-type: inline-size;
}

/* The 50% cap is desktop-only. Below the BB column stacking breakpoint the
   column is already full width, so a 50% cap would resolve against it and
   collapse the card to roughly 143px on a 390px phone — narrower than the
   buttons inside it. Full width is the correct mobile behaviour; what the
   video does behind it is a separate decision. */
@media (min-width: 768px) {
    .rw-hero__inner { max-width: 30%; }
}

/* Mobile: the card runs full width, so without this the background video sits
   entirely behind it and never reads as motion. Push the card down to leave a
   band of video visible above it.

   A margin on the card rather than padding on the row, deliberately: row
   geometry belongs to the builder (see 10-sections.css), so putting it here
   keeps it from competing with any mobile row padding set in the editor. The
   row's own padding-block sits above this, so the visible band is the sum of
   the two — roughly 160px at 390px wide. */
   
@media (max-width: 992px) {
   
      .rw-hero .fl-row-content-wrap {
         aspect-ratio: 16/6;
         display: none;
      }
   
       .rw-hero__inner { display: none; }
       
       .rw-hero__mobile-video { display: flex; }
       
       .rw-hero__mobile-video .fl-row-content-wrap { width: 100%; display: flex; }
       .rw-hero__mobile-text { display: flex; }
   }
   
   
   
@media (max-width: 767px) {
    .rw-hero__inner { margin-top: clamp(120px, 30vw, 200px); }
}

.rw-hero__title {
    margin: 0 0 var(--spacing-lg);
    font-family: var(--font-display);
    font-weight: 700;
    /* THE CEILING IS THE CARD, NOT THE VIEWPORT, and it has to be: the card's
       content box does not grow monotonically with the viewport. Measured,
       "PROFESSIONAL" — the longest unbreakable word — renders at 5.281x the
       font-size, against a content box of 246px at 768, 240px at 900, 280px at
       1024, 336px at 1200. It NARROWS between 768 and 900 because the padding
       clamp grows on 4vw while the 40% card does not keep pace.

       So the tightest point is ~900px, and any linear vw ramp small enough to
       fit there is needlessly small at 1600 where there is 150px to spare.
       17cqi is 17% of the card's content box, which holds the longest word at
       about 90% of the available width at every size.

       min() keeps the existing clamp as the normal behaviour and only lets the
       container term bite where the card is genuinely too narrow — so mobile
       (40px) and wide desktop (62.4px) are untouched, and only the pinched
       768-1200 band comes down.

       The plain clamp is declared first ON PURPOSE. A browser without cqi
       support treats the min() line as invalid and falls back to it, which is
       exactly today's behaviour rather than no font-size at all. */
    font-size: clamp(1.6rem, 1.4rem + 4.4vw, 2.0rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--black);
}

/* The second line takes the accent. display:block supplies the line break, so
   where the title wraps stays a styling decision rather than a <br> frozen into
   the content. */
.rw-hero__title span {
    display: block;
    color: var(--accent);
}

.rw-hero__text {
    margin: 0 0 var(--spacing-lg);
    color: var(--text-muted);
}

.rw-hero__text p {
   font-size: clamp(13px, 1.5vw, 16px);
}


.rw-hero__text p:last-child { margin-bottom: 0; }

.rw-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
}