/* ════════════════════════════════════════════════════════════════════
   BRAND STATEMENT — BRAND FIRST wordmark + showcase video
   BEM block: .brand-statement

   Section caps at ~65vh — the entire composition (wordmark + video)
   sits in one view, no scrolling needed (Born&Bred style).

   Wordmark uses SVG with preserveAspectRatio="none" so letterforms
   stretch edge-to-edge in the container — the type IS the canvas.
   Video plays inside letters via <mask> + <foreignObject>.

   Two SVG variants:
     · --horizontal (desktop/tablet): BRAND + FIRST side by side
     · --stacked    (mobile):        BRAND over FIRST, both filling width
   ════════════════════════════════════════════════════════════════════ */

@layer components {

  .brand-statement.section {
    /* Diagonal airy gradient — top-left brighter, bottom-right slightly
       darker. Stays in the ink-blue family but with proper tonal range
       (~95% → ~88% L) so it reads as intentional depth, not flat. */
    background: linear-gradient(
      135deg,
      var(--primary-ultra-light) 0%,
      var(--surface-tinted) 50%,
      var(--neutral-light) 100%
    );
    /* Hard cap section to fit-in-one-view. */
    block-size: 90vh;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
  }

  .brand-statement__container {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    gap: var(--space-s);
    /* Section padding from .section primitive eats ~90-180px; container
       needs to fit wordmark + video + gap inside what remains. */
    padding-block: 0;
  }


  /* ── Wordmark — fixed-height blocks so the section never overflows */

  .brand-statement__wordmark {
    inline-size: 100%;
    flex: 0 0 auto;
  }

  /* Horizontal — desktop/tablet. Smaller fixed height so the video
     frame below has room to breathe. */
  .brand-statement__wordmark--horizontal {
    block-size: 14vh;
    display: block;
  }

  /* Stacked — mobile only. Taller because two stacked lines. */
  .brand-statement__wordmark--stacked {
    block-size: 32vh;
    display: none;
  }

  .brand-statement__svg {
    inline-size: 100%;
    block-size: 100%;
    display: block;
  }

  /* Mask <text> — fill: white reveals video through the letter shape */
  .brand-statement__svg-text {
    font-family: var(--font-heading);
    font-size: 14rem;
    font-weight: 800;
    letter-spacing: -0.275rem;
    text-transform: uppercase;
    fill: white;
  }

  .brand-statement__svg-text-stacked {
    font-family: var(--font-heading);
    font-size: 12rem;
    font-weight: 800;
    letter-spacing: -0.3rem;
    text-transform: uppercase;
    fill: white;
  }

  .brand-statement__svg-video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }


  /* ── Video frame — stacks below wordmark ─────────────────────── */

  .brand-statement__video {
    position: relative;
    inline-size: 100%;
    /* Video fills remaining flex space — no fixed aspect-ratio, height
       is determined by section cap minus wordmark + gap + padding.
       object-fit: cover on the inner <video> handles cropping. */
    flex: 1 1 0;
    min-block-size: 0;
    border-radius: var(--radius-l);
    overflow: hidden;
    background-color: var(--black);
    box-shadow:
      0 1.5rem 3rem color-mix(in oklch, var(--black) 35%, transparent),
      inset 0 0 0 var(--line-thin) color-mix(in oklch, var(--white) 8%, transparent);
  }

  .brand-statement__video-el {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .brand-statement__video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 60%,
      color-mix(in oklch, var(--primary-dark) 25%, transparent) 100%
    );
    pointer-events: none;
  }


  /* ── Mobile — swap to stacked variant ──────────────────────── */

  @media (max-width: 47.99em) {
    .brand-statement.section {
      /* Mobile keeps the same hard cap; stacked wordmark is sized
         in vh so it adapts. */
      block-size: 90vh;
    }

    .brand-statement__wordmark--horizontal {
      display: none;
    }

    .brand-statement__wordmark--stacked {
      display: block;
    }

    .brand-statement__video {
      border-radius: var(--radius-m);
    }
  }

}