/* covers-mobile.css — mobile responsive fix for The Elusive List cover art.
 *
 * PROBLEM
 *   Every bespoke cover in covers.css (~300 venues) is hand-composed with
 *   FIXED pixel sizes — font-size: 324px, bottom: 40px, dot grids in px, etc.
 *   They were designed for the 168-covers gallery card (~480px wide @ 16/10).
 *   On mobile the .cover box shrinks (a 2-col sibling card is ~170px wide; the
 *   venue hero is full viewport), but the fixed-px artwork DOES NOT shrink, so
 *   text overflows, monograms blow past the frame, and nameplates get clipped.
 *
 * FIX (global — one rule fixes all ~300 covers at once, no per-venue edits)
 *   Treat each .cover as a CSS container and render its .cover-inner on a fixed
 *   480px "design canvas" (the original art reference width), then uniformly
 *   scale that whole canvas down to the cover's real width with
 *   transform: scale(100cqw / 480). Because every bespoke child lives inside
 *   .cover-inner, scaling the canvas scales ALL of them proportionally — fonts,
 *   positions, gaps, gradients, dot grids — so each design stays exactly as
 *   composed, just smaller. Nothing about the per-venue rules is touched.
 *
 * SCOPE / SAFETY
 *   Wrapped in @media (max-width: 720px) — the SAME breakpoint the site already
 *   uses for its mobile overrides (covers-banner.css is min-width:721px desktop;
 *   site.css mobile guards are max-width:720px). On desktop this file is a
 *   complete no-op, so existing desktop covers are byte-for-byte unchanged.
 *
 * WHY A SEPARATE FILE
 *   covers.css is GENERATED (scripts/extract_covers.py — "Do not hand-edit").
 *   Keeping the fix in its own stylesheet, loaded AFTER covers.css, means a
 *   regenerate of covers.css never clobbers it. Load order gives it the cascade
 *   win it needs.
 */

@media (max-width: 720px) {

  /* Make every cover an INLINE-SIZE container so .cover-inner can scale to it.
     We only use cqw (a WIDTH unit), so inline-size is all we need — and unlike
     `container-type: size` it does NOT contain the block (height) axis. With
     `size`, Safari resolves the cover's height in a second layout pass, so on
     first paint the cover renders short/wrong and the cqw-scaled art briefly
     starts small then jumps to full size ("starts small then expands", and
     looks clipped mid-load). With inline-size the height comes straight from
     aspect-ratio:16/10 on the first pass — stable, no flicker — while cqw still
     resolves from the already-known width. */
  .cover {
    container-type: inline-size;
    /* keep overflow:hidden from covers.css so the scaled canvas is clipped
       cleanly to the frame; restated here defensively. */
    overflow: hidden;
  }

  /* THE CLIP FIX: grid cards (.r-card) pin `.cover { height: 180px }` inline (a
     desktop proportion). But the art canvas is scaled by WIDTH to a 16:10 box —
     e.g. a 348px-wide cover scales the 480×300 canvas to 348×217.5 — so the box
     is ~38px too short and the bottom of the art (the venue NAME) clips off into
     the card body. Let aspect-ratio:16/10 (from covers.css) govern on mobile so
     the box height matches the scaled canvas exactly → nothing clips. Scoped to
     .r-card so the venue-hero / sibling covers are untouched; !important beats
     the per-page inline height:180px that loads after this file. */
  .r-card .cover { height: auto !important; }

  /* Lay the inner content out on the original 480px-wide design canvas and
     scale the whole thing down to the real cover width.
       480 x 300 == 16/10, the reference the bespoke px values were drawn for.
       scale factor = container-width / 480, expressed in cqw
                      (100cqw == full container width). */
  .cover .cover-inner {
    /* override covers.css's `inset:0` — we want a fixed-size canvas pinned
       top-left, NOT a box stretched to the (small) cover. */
    inset: auto;
    top: 0;
    left: 0;
    width: 480px;
    height: 300px;
    transform-origin: top left;
    /* scale factor must be UNITLESS: length / length -> number.
       100cqw == the cover's real width; 480px == the design-canvas width. */
    transform: scale(calc(100cqw / 480px));
    /* flex centering from covers.css still applies within the 480x300 canvas,
       which is exactly the space the art was authored against. */
  }

  /* The tier-pill is a UI chrome element (not part of the bespoke art) and is a
     sibling of .cover-inner, positioned against .cover directly. It must stay
     readable and pinned to the real (small) cover corner, so DO NOT let the
     canvas scaling touch it — it isn't inside .cover-inner, so it's already
     unaffected. Nudge it a touch smaller on tiny cards for proportion. */
  .cover .tier-pill {
    transform: none;
  }
}

/* Extra shrink headroom for very narrow 2-up cards.
   100cqw already adapts continuously, so no per-width tweaks are needed;
   this block is intentionally empty of magic numbers — the cqw math handles
   170px, 360px, 390px and everything between identically. */