/* ==========================================================================
   Air Market - v9 mobile layer, Discover and editorial rails
   (V9-MOBILE-SPEC.md section 3.3). Owner: T2.2. CSS only, no markup or JS
   change.

   At <= 720px: .ed-grid-5, .ed-grid-3, .promo3 and .hero3 become
   horizontal scroll rails (grid-auto-flow: column today; the target is a
   flex row, one card = 78vw, scroll-snap, momentum scrolling) matching the
   App Store idiom this mock already imitates elsewhere. Use
   store-v9-mobile.css's `.v9-rail` primitive for this - its header
   documents the exact contract and, since none of these routes get a JS
   change, the "apply the same declarations directly to your own selector"
   form of that contract, not the class form. These rails are deliberately
   EXEMPT from the capture's overflow probe (the probe already skips
   legitimate overflow-x: auto ancestors) - overflow-x: auto here is the
   fix, not something to suppress.

   .v2-hero-copy drops one type-scale step at <= 480px and its CTA row
   wraps. Card art keeps its aspect-ratio; no portrait tile may exceed 60vh
   (this is the fix for the Collections full-screen-orange-tile frame the
   capture caught).

   HARD RULE, identical across all seven v9 sheets: every declaration in
   this file must live inside `@media (max-width: 720px)` or
   `@media (max-width: 480px)` (store-v9-mobile.css's BREAKPOINTS section
   explains why those two numbers and not a ladder). A rule outside either
   query is a desktop regression by definition - the >= 861px byte-identity
   bar this whole layer exists to hold depends on that being true of every
   one of the seven sheets, not just six of them.

   SCOPING: mirror the specificity of whatever you are overriding - see
   store-v9-mobile.css's SCOPING section for the exact prefixes. The
   editorial grids and hero copy are v2-era, widened by later designs:
   check each selector's own file for its actual `:is()` list rather than
   assuming the full `[data-ui="v2"..."v5"]` set applies - not every v2-era
   rule was widened the same way. Never !important.
   ========================================================================== */

/* Rules start here. */

/* --------------------------------------------------------------------------
   THE EDITORIAL RAILS (spec 3.3, first bullet).

   .ed-grid-5 (store.css:571), .ed-grid-3 (:572), .promo3 (:470) and .hero3
   (:591) are all v0-era rules - none of the four carries a [data-ui] gate at
   all, they are base layout every later design just inherited unmodified.
   store-v2.css only ever retouches border-radius on their CHILDREN
   (.promo-card, .ed-card .art, .hero3 .art), never the container's own
   display or grid-template-columns, so a bare selector at the same (0,1,0)
   specificity, loaded last by this sheet, is enough to win the cascade - no
   [data-ui] or [data-v6] prefix is needed to beat a rule that was never
   gated in the first place.

   Why a rail and not a narrower grid: each of these is a fixed 5-up or 3-up
   row of equal cards - exactly the shape the App Store solved with a
   horizontal shelf, not with a five-column-to-one-column collapse. Stacking
   .ed-grid-5 into a single column would spend FOUR extra page-lengths of
   vertical scrolling to get through one Discover section; a shelf keeps the
   page scannable in one vertical pass and moves the browsing gesture to the
   axis a phone is actually good at - the horizontal swipe every App Store
   shopper already knows, and the exact idiom V9-MOBILE-SPEC.md section 3.3
   names. It is also the literal fix for the recorded defect: squeezed into
   a fixed 3-up row on a 390px screen, .promo3's own copy - "Get creative
   with DeckBuilder AI" - had nowhere to go but one word per line ("Get /
   creati / with / DeckB / AI"), because .promo-card was rendering at
   roughly a third of the screen. Giving that same card 78vw (the width
   store-v9-mobile.css's rail primitive header suggests for editorial rails)
   is comfortably enough for the copy to wrap the way its font-size intends.

   This hand-applies the v9-rail primitive's four-declaration contract
   (store-v9-mobile.css's SHARED SCROLL-RAIL PRIMITIVE section, form 2 - "the
   common case") directly onto these selectors rather than adding a .v9-rail
   class, because none of these four routes get a JS/markup change: T2.2 is
   a CSS-only task against existing render functions in app.js. */
@media (max-width: 720px) {
  .ed-grid-5, .ed-grid-3, .promo3, .hero3 {
    --v9-rail-item: 78vw;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to the page's own edge instead of stopping short of it - the
       rail should feel like it runs under the gutter, the way the App
       Store's shelves do, with the FIRST card's left edge lined up with
       every other section's heading. var(--v3-gutter) already carries
       store-v9-mobile.css's 16px step-down at this width (a custom
       property inherits through the DOM tree, not through whichever
       selector declared it, so this unscoped rule still sees the
       v3/v4/v5-scoped redefinition); the fallback covers the vanishingly
       unlikely case this sheet loads before that one does. */
    margin-left: calc(var(--v3-gutter, 16px) * -1);
    margin-right: calc(var(--v3-gutter, 16px) * -1);
    padding-left: var(--v3-gutter, 16px);
    padding-right: var(--v3-gutter, 16px);
  }
  /* Firefox honours scrollbar-width above; WebKit/Blink need the pseudo-
     element hidden directly, same as store.css's own .hero-carousel does. */
  .ed-grid-5::-webkit-scrollbar,
  .ed-grid-3::-webkit-scrollbar,
  .promo3::-webkit-scrollbar,
  .hero3::-webkit-scrollbar { display: none; }

  .ed-grid-5 > .ed-card,
  .ed-grid-3 > .ed-card {
    flex: 0 0 var(--v9-rail-item);
    min-width: 0;
    scroll-snap-align: start;
  }
  .promo3 > .promo-card {
    flex: 0 0 var(--v9-rail-item);
    min-width: 0;
    scroll-snap-align: start;
  }
  .hero3 > .cell {
    flex: 0 0 var(--v9-rail-item);
    min-width: 0;
    scroll-snap-align: start;
  }
}

/* A scroll-snap "settle" is itself a motion effect - after a manual swipe
   the browser can animate the final alignment to the snap point even with
   no author transition involved. Turn the snapping off for anyone who has
   asked for less motion; the rail still scrolls freely, it just stops
   trying to lock onto a card boundary. Combined with max-width so this
   still lives entirely inside the media-query rule this whole layer
   requires - there is no bare `@media (prefers-reduced-motion)` block here. */
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .ed-grid-5, .ed-grid-3, .promo3, .hero3 { scroll-snap-type: none; }
}

/* --------------------------------------------------------------------------
   THE HERO CAROUSEL (spec 3.3, fourth bullet: make the hero carousel and
   the v6 recommendation rails "behave as rails ... and their arrow
   affordances either work at 44px or are hidden").

   .hero-carousel (store.css:421) is ALREADY a working rail at every width -
   flex row, overflow-x: auto, scroll-snap-type: x mandatory - it needs no
   grid-to-flex conversion the way .ed-grid-5 above does. .v6-rec-cards
   (store-v6-rec.css:61) and .v6-colls-row (store-v6-me.css, outside this
   file's ownership) are built the same way and need no change here either.
   Two things about .hero-carousel specifically are still wrong on a phone:

   1. Its bleed is hardcoded to the OLD 40px-class gutter (margin: 0 -36px;
      padding: 0 36px, store.css:427). Once store-v9-mobile.css redefines
      --v3-gutter to 16px under a 390px screen, that unrelated 36px constant
      makes the carousel bleed a different amount than .page itself does,
      wasting close to 20px of a 390px screen on each side for no reason.
      Route it through the same variable .page now reads, so the carousel's
      edge always tracks the page's, at every step this token ever takes.
   2. .hero-nav (store.css:457) is a 30x56 button sitting OUTSIDE the slide
      at left/right: -34px - there is no "outside the slide" left on a
      phone-width carousel, and 30px is under the 44px HIG floor regardless
      of where it sits. Rather than resize and reposition a control that
      would still only duplicate what swiping already does, hide it: this
      is the "hidden in favour of swiping" branch spec 3.3 explicitly
      allows for an arrow that cannot be made to work at 44px. (In the
      shipped v5/v6 build .hero-nav is in fact dead markup - only the
      v2()===false branch of statedHero() ever emits it, per app.js:1673's
      gate, and that branch never runs while data-ui stays "v5" - but the
      rule costs nothing at this width and stops it from becoming a live
      phone regression the day that gate changes.)
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .hero-carousel {
    margin-left: calc(var(--v3-gutter, 16px) * -1);
    margin-right: calc(var(--v3-gutter, 16px) * -1);
    padding-left: var(--v3-gutter, 16px);
    padding-right: var(--v3-gutter, 16px);
  }
  .hero-nav { display: none; }

  /* .hero-copy (store.css:444) is a fixed 46% of the slide, with a
     left-to-right gradient scrim behind it so the text sits over the art's
     darker side while the right 54% stays clear for the art itself. That
     math assumes a wide desktop slide; at a 390px slide width 46% is 179px,
     minus the slide's own 30px side padding leaves under 90px for a 27px
     bold h3 - measured overflow: "Bundles that do the whole job" clips at
     scrollWidth 106 against a 92px box (and worse, 106 against 60px, at
     320px). This is the same defect class as .promo-card's word-per-line
     wrap above, on a different container shape. Give the copy the full
     slide width on a phone and swap the sideways gradient for a bottom-
     weighted scrim that still darkens wherever the copy actually sits,
     rather than a strip down one side of a now full-width block. */
  .hero-copy {
    width: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.58) 65%);
  }
}

/* --------------------------------------------------------------------------
   THE STATED HERO'S TYPE SCALE (spec 3.3, second bullet).

   .v2-hero-copy h1 (store-v2.css:124) is `clamp(30px, 3.6vw, 52px)` - at any
   viewport under 30px / 0.036 = 833px wide the 3.6vw term is already
   smaller than the 30px floor, so the clamp has been sitting on that floor
   ever since store-v2.css's own 1080px stack breakpoint (:138) and never
   steps down again for a 390px phone. One notch is still owed at the
   smallest screens this store now supports: drop the floor itself at
   <= 480px. Scoped to match store-v2.css's own :is() list exactly, so this
   wins the tie on the SAME specificity every other v2-era override in this
   stack already relies on, rather than reaching for extra weight it does
   not need.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-hero-copy h1 {
    font-size: clamp(24px, 7vw, 30px);
    letter-spacing: -1px;
  }

  /* .v2-hero-cta (store-v2.css:149) is a fixed-gap flex row: the primary
     "See what's popular" button, plus - only when
     StoreFlags.showsSecurity is on - a second inline "How we check them"
     link. At 480px, with the button's own tap-target floor (T2.5's file,
     not this one) pushing its height up, the two no longer both fit on one
     line without the link's text truncating against the card edge. Wrapping
     is the only change this layer needs to make here; the button and link
     keep every other sizing rule they already have. */
  :root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-hero-cta {
    flex-wrap: wrap;
    row-gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   CARD ART HEIGHT CEILING (spec 3.3, third bullet: "Card art keeps its
   aspect-ratio; no portrait tile may exceed 60vh").

   An aspect-ratio box is only as safe as whatever sets its width. A single
   column of cards at full page width on a phone is exactly the shape the
   capture caught full-screen: a .v6-card-cover (aspect-ratio 16/9,
   store-v6-collection.css:214) rendered at nearly a full 390px column reads,
   in a screenshot, as a tile that eats the entire first screen before any
   title or byline is visible. Keep the aspect-ratio - removing it would
   fight the 16:9/16:10 compositions the generated art (assets/js/app.js's
   `art()`/`gradSVG()`) is drawn for - and add a height CEILING alongside it,
   so any tile, however its width ends up being computed at this or any
   future breakpoint, stops growing past 60% of the viewport's own height.
   This is a floor/ceiling pair with the desktop rule, not a replacement of
   it: aspect-ratio still drives the box everywhere the cap does not bind.

   Scope: the three card-art surfaces this file (and store-v6-collection.css,
   explicitly called out as part of T2.2's surface) owns - .ed-card .art
   (store.css:575, Discover/Bundles/Agents rails), .hero3 .art (store.css:596,
   the 3-up editorial heroes) and .v6-card-cover (the collection tile this
   defect was recorded against). .a-card/.a-shot - the app-listing card used
   by search, browse and the recommendation rails - is deliberately left
   alone: it is shared with surfaces this task does not own, and at its
   existing rail widths (15rem in .v6-rec-cell, for one) it is nowhere near
   the 60vh ceiling to begin with. */
@media (max-width: 720px) {
  .ed-card .art,
  .hero3 .art,
  :root[data-v6="on"] .v6-card-cover {
    max-height: 60vh;
  }
}