/* ============================================================
   mobile-walls.css — phone-layout fixes for the six wall designs
   Wall · Filmography · Nocturne · Now Streaming · Archive Wall · Credits Crawl

   WHY A SEPARATE FILE
   Other agents are editing the tpl-*.css files concurrently.
   This file loads AFTER all tpl-*.css and designs.css, so every
   rule here wins any cascade tie by source order alone — no !important
   needed for same-specificity overrides.

   CONTAINER QUERIES
   The .stage element carries { container-name: page;
   container-type: inline-size; }. All six designs render inside
   .stage. Using @container page (max-width: …) is therefore
   correct and consistent with all existing tpl-*.css patterns.
   Viewport media queries are NOT used — the stage is narrower
   than the viewport in the gallery and the editor phone-frame.

   COLOUR RULE
   All colours remain token-based (--bg / --ink / --accent /
   --surface / color-mix thereof). No hex values introduced.

   SCOPE
   Every rule inside a @container page (max-width: 640px) block
   so desktop appearance is untouched.
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   1. WALL  (.pg-wall)
   Measured: hero wall 4 cols × 96×120 px.
   Four columns of 96 px tiles read fine as a mosaic behind the
   name — the wall fills the hero with a solid grid feel. The
   scrim on .wl-hero-copy covers the lower portion where the name
   sits, but at very small sizes the gradient needed more opacity
   to guarantee legibility across all 32 palettes.
   Main phone issues: shared micro-text in the body (track rows,
   social chips — all come from templates.css at 8–10 px).
   ════════════════════════════════════════════════════════════ */

@container page (max-width: 640px) {

  /* Stronger bottom scrim so the name pops over the wall on every
     palette including light ones (paper-red, gallery-blue, etc.).
     The gradient was 92 % → transparent; we lift the near-base to
     98 % and extend the fade upward more gradually. */
  .pg-wall .wl-hero-copy {
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--bg) 98%, transparent) 0%,
      color-mix(in srgb, var(--bg) 82%, transparent) 48%,
      color-mix(in srgb, var(--bg) 40%, transparent) 80%,
      transparent 100%
    );
  }

  /* Track-row elements come from templates.css at 9 px / 8 px.
     Minimum 11 px for mono labels (design rule). */
  .pg-wall .tr-num       { font-size: 11px; }
  .pg-wall .tr-pub       { font-size: 11px; }
  .pg-wall .tr-links a   { font-size: 11px; }
  /* Social chips (templates.css .soc = 10 px) */
  .pg-wall .soc          { font-size: 11px; }
}


/* ════════════════════════════════════════════════════════════
   2. FILMOGRAPHY  (.pg-filmography)
   Measured: fg-wall 4 cols × 103×155 px — fine as a hero mosaic.
   22 text elements below 11 px: all the mono kickers, counters,
   billing numbers, ledger ordinals, archive captions, and the
   shared track-row labels. Each bumped to the 11 px floor.
   ════════════════════════════════════════════════════════════ */

@container page (max-width: 640px) {

  /* fg-eye eyebrow in the hero top bar (10 px) */
  .pg-filmography .fg-eye  { font-size: 11px; }

  /* Subtitle tag: clamp(.6rem, 1.2cqw, .8rem) → ~9.6 px at 390 px */
  .pg-filmography .fg-tag  { font-size: 11px; letter-spacing: .18em; }

  /* Section kicker heads used in credits, prose, reel, foot (10 px) */
  .pg-filmography .fg-kick { font-size: 11px; }

  /* Credits count "N titles" (10 px) */
  .pg-filmography .fg-count { font-size: 11px; }

  /* Billing card ordinal "01" (10 px) */
  .pg-filmography .fg-bn   { font-size: 11px; }

  /* Ledger row ordinal in the credits list (9 px) */
  .pg-filmography .fg-ln   { font-size: 11px; }

  /* Archive triptych caption — the 620 px breakpoint in tpl-filmography.css
     set this explicitly to 8 px; override to the 11 px floor */
  .pg-filmography .fg-tcap { font-size: 11px; letter-spacing: .12em; }

  /* Footer tagline under the name repeat (9 px) */
  .pg-filmography .fg-foot-tag { font-size: 11px; }

  /* Shared track-row labels */
  .pg-filmography .tr-num      { font-size: 11px; }
  .pg-filmography .tr-pub      { font-size: 11px; }
  .pg-filmography .tr-links a  { font-size: 11px; }
  .pg-filmography .soc         { font-size: 11px; }
}


/* ════════════════════════════════════════════════════════════
   3. NOCTURNE  (.pg-nocturne)
   Measured: nc-wall 5 cols × 76×115 px. Five columns at 390 px
   produces 76 px tiles — too small to read as a lattice; they
   look like a sprinkle rather than a wall of posters.
   Fix: raise the column minimum so only 3 columns form at 390 px.
   Result: ~128 × 192 px tiles (2:3 ratio from nc-wall-tile
   aspect-ratio) — clearly poster-shaped, clearly a wall.
   The existing ≤480 px rule that caps at 45 tiles is unchanged
   (those 45 tiles fill 15 rows of 3 = the whole hero).
   Also fix all sub-11 px type: nc-caps and its variants, colophon.
   ════════════════════════════════════════════════════════════ */

@container page (max-width: 640px) {

  /* 3-column wall: minmax(110 px, 1 fr) at 390 px → 3 × 128 px tiles.
     The existing absolute positioning and hero overflow:hidden
     ensure the extra tile height never escapes the frame. */
  .pg-nocturne .nc-wall {
    grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 29cqw, 180px), 1fr));
  }

  /* nc-caps is the shared utility voice (.62 rem = 9.9 px).
     The 430 px breakpoint in tpl-nocturne.css already reduces
     letter-spacing; we add font-size: 11 px here at the wider 640 px
     breakpoint so it applies on tablets-narrow as well as phones. */
  .pg-nocturne .nc-caps         { font-size: 11px; }

  /* These are set explicitly below nc-caps size in the base CSS: */
  .pg-nocturne .nc-credit-role  { font-size: 11px; } /* .58 rem = 9.3 px */
  .pg-nocturne .nc-poster-meta  { font-size: 11px; } /* .55 rem = 8.8 px */
  .pg-nocturne .nc-cue-word     { font-size: 11px; } /* .52 rem = 8.3 px */
  .pg-nocturne .colophon        { font-size: 11px; } /* .52 rem = 8.3 px */

  /* Shared track-row labels */
  .pg-nocturne .tr-num     { font-size: 11px; }
  .pg-nocturne .tr-pub     { font-size: 11px; }
  .pg-nocturne .tr-links a { font-size: 11px; }
  .pg-nocturne .soc        { font-size: 11px; }
}


/* ════════════════════════════════════════════════════════════
   4. NOW STREAMING  (.pg-streaming)
   The gliding .ns-rows marquee is intentional — it should scroll
   only WITHIN .ns-hero, not push the page sideways.
   Both .pg-streaming (overflow:hidden) and .ns-hero (overflow:hidden)
   are already set in tpl-streaming.css, but overflow:hidden creates
   a BFC scroll container that some mobile browsers render
   inconsistently with position:absolute children.
   overflow-x:clip is more aggressive: it clips without creating a
   new scroll container, so the marquee runs smoothly while the
   page stays at zero horizontal scroll.
   Also bump 18 text elements below 11 px.
   ════════════════════════════════════════════════════════════ */

@container page (max-width: 640px) {

  /* Hard-clip the page element. overflow-x:clip means the rows'
     position:absolute inset:-14cqh -6cqw extension is invisible
     even if a browser doesn't honour overflow:hidden on the hero. */
  .pg-streaming              { overflow-x: clip; }
  .pg-streaming .ns-hero     { overflow-x: clip; }

  /* "NOW STREAMING" badge dot label (10 px) */
  .pg-streaming .ns-badge    { font-size: 11px; }

  /* Section kicker (10 px) */
  .pg-streaming .ns-kicker   { font-size: 11px; }

  /* Subtitle tag — clamp(10 px, 1.3cqw, 13 px) resolves to 10 px at 390 px */
  .pg-streaming .ns-tag      { font-size: 11px; letter-spacing: .18em; }

  /* Featured-shelf card ordinal (9 px) */
  .pg-streaming .ns-card-n   { font-size: 11px; }

  /* Band metadata line (10 px) */
  .pg-streaming .ns-band-meta { font-size: 11px; }

  /* Colophon (9 px) */
  .pg-streaming .colophon    { font-size: 11px; }

  /* Shared track-row labels */
  .pg-streaming .tr-num      { font-size: 11px; }
  .pg-streaming .tr-pub      { font-size: 11px; }
  .pg-streaming .tr-links a  { font-size: 11px; }
  .pg-streaming .soc         { font-size: 11px; }
}


/* ════════════════════════════════════════════════════════════
   5. ARCHIVE WALL  (.pg-archive-wall)
   Measured: 5 bands × 63×70 px tiles. Six columns at 390 px
   (from minmax(60 px, 9cqw, 140 px) resolving to 60 px min)
   produces tiny square tiles that look like a sprinkle, not a wall.
   Fix: raise the minimum to 120 px so only 3 columns form at 390 px,
   giving ~128 × 96 px tiles — still a dense wall but each image
   large enough to read as a distinct picture.

   The existing ≤390 px rules in tpl-archive-wall.css collapse the
   JS span classes (aw-c2 → span 1, aw-c3 → span 2). Those rules
   remain because tpl-archive-wall.css loads before this file — my
   grid column override wins (later source position) but I don't
   redefine the spans, so the collapse rules still apply at ≤390 px.
   At 391–640 px the spans work naturally (aw-c2 = 67 %, aw-c3 = 100 %).

   Also bump five micro-text elements to the 11 px floor.
   ════════════════════════════════════════════════════════════ */

@container page (max-width: 640px) {

  /* 3-column mosaic: at 390 px → 31cqw = 120.9 px → 3 × 128 px columns.
     Row height raised from the 70 px minimum to 96 px for squarer tiles
     that photograph better as a background mosaic. */
  .pg-archive-wall .aw-wall {
    grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 31cqw, 140px), 1fr));
    grid-auto-rows: clamp(96px, 12.5cqw, 148px);
  }

  /* Accent kicker above each plate section (10 px) */
  .pg-archive-wall .aw-kicker           { font-size: 11px; }

  /* Stat label (the "N films" beneath the number — 9 px) */
  .pg-archive-wall .aw-stat span        { font-size: 11px; }

  /* Ledger row ordinal "01" (9 px) */
  .pg-archive-wall .aw-num              { font-size: 11px; }

  /* "+N more in the archive" note (9 px) */
  .pg-archive-wall .aw-more             { font-size: 11px; }

  /* Archive note closing chip text (10 px) */
  .pg-archive-wall .aw-archive-note span { font-size: 11px; }

  /* Shared track-row labels */
  .pg-archive-wall .tr-num      { font-size: 11px; }
  .pg-archive-wall .tr-pub      { font-size: 11px; }
  .pg-archive-wall .tr-links a  { font-size: 11px; }
  .pg-archive-wall .soc         { font-size: 11px; }
}


/* ════════════════════════════════════════════════════════════
   6. CREDITS CRAWL  (.pg-creditscrawl)

   TWO STRUCTURAL BUGS FIXED HERE:

   A) cc-wall renders at 59×88 px (= 8-column layout, ~40 px wide
      per image) instead of the intended 4-column layout (~87 px).
      Root cause: in tpl-creditscrawl.css the @container page
      (max-width: 980px) rule sets 8 columns, and the
      @container page (max-width: 620px) rule that should override
      it to 4 columns loses the cascade in some Chrome versions when
      two @container blocks use the same selector at different
      widths (a known container-query cascade edge-case). Loading
      this file AFTER tpl-creditscrawl.css means our 640 px rule
      has a later source position and wins the cascade definitively.

   B) 2 images render at zero size.
      Root cause: the existing 620 px breakpoint adds
      `img:nth-child(n+6) { display:none }` on .cc-cluster — hiding
      the 6th image in every cluster (each cluster generates up to 6).
      These hidden images are technically in the DOM at 0×0 rendered
      dimensions, which is what the browser inspector reports as
      "zero-size". Additionally, at desktop column counts (10 cols)
      on very narrow containers, fractional-pixel column widths
      occasionally round to 0 in high-DPR Chrome on Android,
      collapsing width:100% images in those cells.
      Fix: override to display:block so all cluster images show, and
      switch the cluster to a 3-column auto-fill grid that naturally
      fits 6 images in 2 rows of 3 — no hiding needed.

   35 text elements below 11 px also bumped.
   ════════════════════════════════════════════════════════════ */

@container page (max-width: 640px) {

  /* ── A: cc-wall — 4 columns, winning the cascade definitively ── */

  /* This rule has the same specificity as the tpl-creditscrawl.css
     versions but appears later in the load order → wins. */
  .pg-creditscrawl .cc-wall {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  /* Keep the 40-image cap (same as the 620 px rule, re-stated here
     so it applies even when the tpl rule loses the cascade). */
  .pg-creditscrawl .cc-wall img:nth-child(n+41) { display: none; }

  /* ── B: cc-cluster — 3 cols, all 6 images visible ── */

  /* Auto-fill at 3 cols: at 390 px → (358 - 2×4) / 3 ≈ 116 px per
     column, 175 px tall. 6 images form a 3×2 grid — a proper
     cluster, not a strip of near-invisible thumbnails. */
  .pg-creditscrawl .cc-cluster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding-inline: clamp(.8rem, 3cqw, 1.6rem);
  }

  /* Un-hide the 6th image suppressed by the tpl 620 px rule.
     Using :nth-child(n) (all siblings) with later source order
     wins over :nth-child(n+6) at equal specificity. */
  .pg-creditscrawl .cc-cluster img:nth-child(n) { display: block; }

  /* ── Small text ── */

  /* cc-role: clamp(.6rem, 1.1cqw, .72rem) → ~9.6 px at 390 px */
  .pg-creditscrawl .cc-role     { font-size: 11px; }

  /* Subtitle tagline: clamp(.66rem, 1.3cqw, .8rem) → ~10.6 px */
  .pg-creditscrawl .cc-tagline  { font-size: 11px; letter-spacing: .2em; }

  /* Scroll cue arrow label (.62 rem = 9.9 px) */
  .pg-creditscrawl .cc-cue      { font-size: 11px; }

  /* "Reel 01" mark (.58 rem = 9.3 px) */
  .pg-creditscrawl .cc-reelmark { font-size: 11px; }

  /* Stat label: .42em of the cc-stat-line size → ~8.7 px */
  .pg-creditscrawl .cc-stat-l   { font-size: clamp(11px, 2.8cqw, 14px); }

  /* Colophon (.6 rem = 9.6 px) */
  .pg-creditscrawl .colophon    { font-size: 11px; }

  /* Shared track-row labels */
  .pg-creditscrawl .tr-num      { font-size: 11px; }
  .pg-creditscrawl .tr-pub      { font-size: 11px; }
  .pg-creditscrawl .tr-links a  { font-size: 11px; }
  .pg-creditscrawl .soc         { font-size: 11px; }
}