/* mobswipe v1.1 · reusable, opt-in mobile swipe rows (NextRising AI own code, 2026-11-03, ruling MOB-SWIPE-01).
   v1.1 = Music v1 (v226_musicshow_v1) + the a11y additions from Arhal's prog_polish copy: focus ring on the row, a bit more
   bottom padding so card shadows are not clipped. Card width stays 84% (next card peeks ~12.6% at 390px, inside the 12-15% rule).
   Apply: add data-mobswipe to the element whose DIRECT children are the cards (ul, div.grid, ...). Load this CSS + mobswipe.js on the page.
   Only at max-width:768px. Desktop is untouched (no rule below applies above 768px, and the JS adds nothing there).
   Native touch scrolling with CSS scroll-snap (no JS drag). Dots: 8px dot in a 44px hit area.
   Options (CSS custom properties on the row or an ancestor): --mobswipe-w (card width, default 84%), --mobswipe-gap (12px),
   --mobswipe-dot (dot colour, default #14204A), --mobswipe-dot-on (active dot, default #5534C9). data-mobswipe="dark" = light dots for dark bands.
   v1.1 options: --mobswipe-bleed (default 0) (set inline on the row) lets the row run into the parent's side padding so soft card shadows are not cut off at the
   row edge (set it to the parent's padding, e.g. 20px; cards still snap to the normal content edge); --mobswipe-pb (bottom padding, default 18px).
   Do not use on price or format choice cards. */
@media (max-width:768px){
  [data-mobswipe]{display:flex!important;flex-wrap:nowrap!important;gap:var(--mobswipe-gap,12px)!important;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-padding-inline:0;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;
    scrollbar-width:none;grid-template-columns:none!important;max-width:100%;min-width:0;padding-top:4px;padding-bottom:var(--mobswipe-pb,18px);margin-bottom:0;border-radius:12px}
  /* bleed only when the row sets it (Music rows without it are unchanged) */
  [data-mobswipe][style*="--mobswipe-bleed"]{max-width:calc(100% + 2*var(--mobswipe-bleed));margin-inline:calc(-1*var(--mobswipe-bleed))!important;
    padding-inline:var(--mobswipe-bleed)!important;scroll-padding-inline:var(--mobswipe-bleed);border-radius:0}
  [data-mobswipe]:focus-visible{outline:3px solid #7A5AF8;outline-offset:3px}
  [data-mobswipe]::-webkit-scrollbar{display:none}
  [data-mobswipe]>*{flex:0 0 var(--mobswipe-w,84%)!important;max-width:var(--mobswipe-w,84%)!important;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;margin:0!important}
  .mobswipe-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin:0;padding:0;grid-column:1 / -1}
  .mobswipe-dots button{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
  .mobswipe-dots button::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--mobswipe-dot,#14204A);opacity:.28;transition:opacity .25s,width .25s}
  .mobswipe-dots button[aria-current="true"]::before{opacity:1;width:18px;background:var(--mobswipe-dot-on,#5534C9)}
  .mobswipe-dots button:focus-visible{outline:3px solid #7A5AF8;outline-offset:-6px;border-radius:999px}
  .mobswipe-dots.is-dark button::before{background:#E8ECF7}
  .mobswipe-dots.is-dark button[aria-current="true"]::before{background:#FEC623}
  [data-mobswipe="dark"]:focus-visible,.mobswipe-dots.is-dark button:focus-visible{outline-color:#FEC623}
}
@media (max-width:768px) and (prefers-reduced-motion:reduce){.mobswipe-dots button::before{transition:none}}