/* NOWNA Kaizen Release 4 — mobile swipe / navigation polish. CSS only; one new file.
   Scope: the three legacy NOW / HOT / WOW carousels, the NOW toggle and the header links, on touch-sized viewports.
   Brings the legacy rows up to the swipe standard the NOW timeline row already has (snap · contained overscroll · peek).
   Changes NO order, NO content, NO source, NO identifier, NO script. NOW Signal and the rolling timeline are untouched. */
@media (max-width: 900px) {
  #now .carousel-wrapper .carousel,
  #hot .carousel-wrapper .carousel,
  #wow .carousel-wrapper .carousel {
    scroll-snap-type: x proximity;            /* proximity, not mandatory: a free flick is never fought */
    overscroll-behavior-x: contain;           /* reaching a row's end must not trigger page / back-swipe navigation */
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 0;
    scrollbar-width: none;                    /* the peek, not a desktop scrollbar, is the mobile affordance */
  }
  #now .carousel-wrapper .carousel::-webkit-scrollbar,
  #hot .carousel-wrapper .carousel::-webkit-scrollbar,
  #wow .carousel-wrapper .carousel::-webkit-scrollbar { display: none; }
  #now .carousel-wrapper .carousel > .card,
  #hot .carousel-wrapper .carousel > .card,
  #wow .carousel-wrapper .carousel > .card { scroll-snap-align: start; }
}
@media (max-width: 576px) {
  /* Baseline: two 162px cards + margins fill a 338px row exactly, so nothing shows that the row continues.
     Cards become 10% smaller IN PROPORTION (162x170 -> 146x153) so about a sixth of the third card is always visible.
     The row stays inside its container: no negative margins, no page overflow. */
  #now .carousel-wrapper .carousel > .card,
  #hot .carousel-wrapper .carousel > .card,
  #wow .carousel-wrapper .carousel > .card { width: 146px; height: 153px; }
}
@media (max-width: 900px) and (pointer: coarse), (max-width: 576px) {
  /* 44px minimum touch height without changing how anything looks: the hit area grows, the text does not move. */
  #now button.now-timeline-toggle { min-height: 44px; align-items: center; padding-block: 0; }
  header #navLinks a.page-link { min-height: 44px; display: inline-flex; align-items: center; }
}