/* =========================================================================
   mobile-motion.css — sitewide mobile motion utilities (≤640px only)
   Desktop/tablet layout is NEVER touched: every rule is inside the ≤640px
   query, so adding these classes to a desktop grid is a no-op above 640px.

   Utilities:
     .m-rail        horizontal scroll-snap rail of cards (edge-to-edge, peek)
     .m-rail--sm    narrower items (≈3-up feel) for compact cards
     .m-rail--inset rail that respects container padding (no full-bleed)
     .m-pills       horizontal swipeable pill/tab row (for filters & badges)
     .m-pills--bleed  full-bleed variant of the pill row

   Marquees (auto-scroll loops) are wired per-page with a clone set — see
   about.css / packages-hub.css. This file holds only the swipe utilities.
   Created 2026-05-29 (pt29 mobile-UX rollout). Cards/grids override Tailwind
   + page grids via !important per feedback_mobile_rail_pattern.
   ========================================================================= */

@media (max-width: 640px) {

  /* ---- horizontal scroll-snap RAIL ---------------------------------- */
  .m-rail {
    display: flex !important;
    grid-template-columns: none !important;   /* defeat any grid */
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* full-bleed to the screen edges, first card aligned to the 24px gutter */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 2px 24px 16px;
    scroll-padding-left: 24px;
  }
  .m-rail::-webkit-scrollbar { display: none; }
  .m-rail > * {
    flex: 0 0 80% !important;
    min-width: 80% !important;
    scroll-snap-align: start;
  }
  .m-rail--sm > * { flex-basis: 64% !important; min-width: 64% !important; }
  .m-rail--inset {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* ---- horizontal PILL / TAB scroller -------------------------------- */
  .m-pills {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 10px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    max-width: none !important;
  }
  .m-pills::-webkit-scrollbar { display: none; }
  .m-pills > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }
  .m-pills--bleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 4px 24px 12px;
  }

  /* subtle fade hint on the right edge so users know it scrolls */
  .m-rail, .m-pills--bleed {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%);
  }

  /* ---- auto-rolling MARQUEE (auto-loop). Needs a duplicated 2nd set
     (.m-marquee-clone items) + a clipping parent (overflow:hidden). ---- */
  .m-marquee {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content;
    grid-template-columns: none !important;
    gap: 0 !important;
    animation: mMarquee 26s linear infinite;
    will-change: transform;
  }
  .m-marquee > * { flex: 0 0 auto !important; }
  .m-marquee-clone { display: inline-flex !important; }
  .m-marquee:active { animation-play-state: paused; }
}

/* clones hidden off-mobile; keyframes + reduced-motion guard */
.m-marquee-clone { display: none; }
@keyframes mMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .m-marquee { animation: none !important; } }