/* ===== SWIPE ROWS (cycle 83) =====
   Shared by index.html (with style.css), games.html and podcasts.html (which carry their own
   stylesheets), so it lives in its own file rather than in style.css.
   One rule for the phone pattern that the homepage topic chips (cycle 68), the podcast cast (cycle 77)
   and the games hub's daily links and filter chips (cycle 82) each used to carry a copy of. Put
   class "swipe-row" on a row of pick-one items and, if you want the nudge, "swipe-hint" on an
   aria-hidden paragraph next to it. At 600 px and below the row becomes a single snap-scrolling
   strip (the row scrolls, the page does not; a focused child scrolls itself into view) and the hint
   shows. Above 600 px the classes do nothing, so the row keeps its own wrapping layout. Children
   keep their own sizes; give them at least 40 px, and links or buttons stay on one line. */
.swipe-hint { display: none; color: #636E72; font-size: 0.8rem; margin: 0.35rem 0 0; }
@media (max-width: 600px) {
  /* The selector is doubled on purpose: games.html and podcasts.html style the same rows in their own
     <style> blocks, which come after this link and would win a tie. */
  .swipe-row.swipe-row {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; position: relative;
    overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .swipe-row.swipe-row::-webkit-scrollbar { display: none; }
  .swipe-row.swipe-row > * { flex: 0 0 auto; scroll-snap-align: start; }
  .swipe-row.swipe-row > a, .swipe-row.swipe-row > button { white-space: nowrap; }
  .swipe-hint { display: block; }
}
/* Tablet variant (cycle 128): add "swipe-row-tablet" next to "swipe-row" (and "swipe-hint-tablet"
   next to "swipe-hint") and the same strip holds up to 900 px. For a row of tall cards such as the
   podcast cast, where a 601 to 900 px grid stacks two rows of 356 to 444 px cards and pushes the
   first episode to 1,530 px or more; a row of chips wraps fine at those widths and stays "swipe-row" only.
   The declarations repeat the phone block on purpose: CSS cannot share one block across two media
   ranges with different selectors. Keep the two blocks identical. */
@media (max-width: 900px) {
  .swipe-row-tablet.swipe-row-tablet {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; position: relative;
    overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .swipe-row-tablet.swipe-row-tablet::-webkit-scrollbar { display: none; }
  .swipe-row-tablet.swipe-row-tablet > * { flex: 0 0 auto; scroll-snap-align: start; }
  .swipe-row-tablet.swipe-row-tablet > a, .swipe-row-tablet.swipe-row-tablet > button { white-space: nowrap; }
  .swipe-hint-tablet { display: block; }
}