/* ════════════════════════════════════════
   V5 MARQUEE HERO
   Editorial hero for inner pages — oversized words bookending a small
   16:9 image placeholder, with the "WORD WORD" pair tiled horizontally
   so the marquee bleeds past both viewport edges no matter how wide
   the window goes.

   Mirrors the portfolio.html .pf-reel-hero pattern but generic and
   image-based (no Vimeo iframe / cursor / modal).

   Usage:
     <section class="mq-hero" aria-label="...">
       <h1 class="mq-hero-srtitle">…</h1>
       <div class="mq-hero-row" aria-hidden="true">
         <div class="mq-hero-tile" data-mq-tile-left>
           <span class="mq-hero-word">Word</span>
           <span class="mq-hero-word">Word</span>
         </div>
         <span class="mq-hero-frame">
           <img src="…" alt="">
         </span>
         <div class="mq-hero-tile" data-mq-tile-right>
           <span class="mq-hero-word">Word</span>
           <span class="mq-hero-word">Word</span>
         </div>
       </div>
     </section>

   Pairs with assets/js/v5-marquee-hero.js for the tile-cloning logic.
   Color uses currentColor / inherit so it follows the body palette
   on each page (abyss text on tusk pages, tusk text on abyss pages).
════════════════════════════════════════ */

.mq-hero {
  position: relative;
  /* body.has-v5-page-nav already pads for the fixed nav clearance.
     Marquee padding here is just visible breathing room above + below
     the row — keeps the gap consistent across pages. */
  padding: 2.5rem 0 2rem;
  /* CLS guard: reserves vertical space before web font + JS tile-clone
     finish so content below doesn't jump. Matches the word font-size
     (≈ line-height 0.92) plus the top + bottom padding. */
  min-height: calc(clamp(5rem, 17vw, 13rem) * 0.92 + 4.5rem);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1023px) {
  .mq-hero {
    padding: 2rem 0 1.5rem;
    min-height: calc(clamp(5rem, 17vw, 13rem) * 0.92 + 3.5rem);
  }
}

.mq-hero-row {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.75rem);
  width: max-content;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Tiles flanking the image — JS clones enough <span> pairs at runtime
   to overflow the viewport in both directions. */
.mq-hero-tile {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.75rem);
  flex-shrink: 0;
}

.mq-hero-word {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(5rem, 17vw, 13rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: inherit;
}

/* 16:9 image placeholder — height bound to the cap-height of the
   surrounding words (Inter cap-height ≈ 0.72em). Width derived
   explicitly via calc() to dodge the aspect-ratio + width: auto
   ambiguity on flex items (was rendering ~20:9 in some browsers).
   Border radius matches the portfolio reel. */
.mq-hero-frame {
  position: relative;
  flex-shrink: 0;
  font-size: clamp(5rem, 17vw, 13rem);
  height: 0.72em;
  width: calc(0.72em * 16 / 9);
  border-radius: 0.85rem;
  overflow: hidden;
  background: var(--jxm-abyss);
  display: block;
}
.mq-hero-frame img,
.mq-hero-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* SR-only h1 — replaces the visible giant page-title for screen readers */
.mq-hero-srtitle {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Mobile: same horizontal overflow, smaller words. Padding here is
   just visible breathing — body padding-top already clears the nav. */
@media (max-width: 720px) {
  .mq-hero {
    padding: 1.5rem 0 1rem;
    min-height: calc(clamp(3.5rem, 18vw, 6rem) * 0.92 + 2.5rem);
  }
  .mq-hero-word { font-size: clamp(3.5rem, 18vw, 6rem); }
  .mq-hero-frame { font-size: clamp(3.5rem, 18vw, 6rem); }
}