/* ============================================================================
   Global mobile CARD CAROUSEL — a systematic treatment so any card grid on the
   site turns into a horizontal, auto-scrolling, infinitely-looping, swipeable
   rail on phones (saving the tall vertical space a 1-column stack would take).
   Desktop/tablet keep their normal grid. Activated by assets/card-carousel.js,
   which adds `.cc-on` to a grid and clones its cards for the seamless loop.
   ========================================================================== */

@media (max-width: 700px) {
  .cc-on {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;   /* override the grid template */
    max-width: none !important;               /* some grids cap width + auto-centre */
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: stretch;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;                    /* Firefox */
    /* NO scroll-snap: this is a continuous marquee that JS drives frame-by-frame;
       proximity/mandatory snap would fight the auto-advance and stutter it. */
    scroll-behavior: auto;
  }
  .cc-on::-webkit-scrollbar { display: none; } /* WebKit — hide the bar */

  /* every direct child = one card in the rail; ~80vw so the next card peeks (a
     visual cue it scrolls), capped so it never gets silly-wide on big phones. */
  .cc-on > * {
    flex: 0 0 auto !important;
    width: min(80vw, 300px) !important;
    max-width: min(80vw, 300px) !important;
    margin: 0 !important;                     /* the rail owns the gap */
  }
  .cc-on > .cc-clone { pointer-events: none; } /* clones are decorative duplicates */
}