/*!
 * JustPorn - centered swipe snap for thumbnail sliders (2026-11-13 d)
 * Touch devices (phones, tablets in portrait): after a swipe the card always stops CENTERED.
 * Initial position is unchanged: snap positions are clamped to the scroll range, so the first card
 * (scrollLeft 0) and the last card (scrollLeft max) keep their natural start/end alignment. Nothing jumps on load.
 * Desktop (mouse) is not affected. Rollback = remove the <link> from include_footer_general.tpl.
 *
 * Scrollers (all native overflow-x, no Swiper/JS slider):
 *   homepage "Watched right now" row (ul.grid-temp), homepage geo/models row,
 *   homepage "Recommended for you" row, homepage Shorts track, video-page related row in the player (.jp-rel-row)
 * Not touched: category chips (#swiper1) and Related/Latest tabs (.jp-tabs) - variable-width pills, not thumbnails.
 *
 * One card per swipe instead of free momentum: set --jp-snap-stop:always (see NOTES.md).
 *
 * b: + desktop / mouse: cards get scroll-snap-align:center too (container snap type is NOT changed:
 * rows stay `proximity`, Shorts stays `mandatory`). Reason: the arrow buttons (jp-snap-20261112b.js) scroll so that a card is
 * centered; with `start` alignment the browser would pull the row back to a start position after the smooth scroll.
 *
 * d (2026-11-13): arrows only, JS (CSS identical to c). c (2026-11-13): Safari / iPhone. The snap rules below now apply on (pointer:coarse) OR (hover:none) OR iOS/iPadOS
 * (@supports (-webkit-touch-callout:none)), width < 1024px. Same rules. + Shorts arrows are visible on touch devices (the original CSS
 * hid them). jp-snap-20261113c.js adds the JS fallback that centers the card when the native snap does not.
 */
@media (pointer:coarse) and (max-width:1023px),(hover:none) and (max-width:1023px){
  :root{--jp-snap-stop:normal}

  /* containers: proximity -> mandatory */
  .container>#custom_list_videos_videos_watched_right_now_items>.grid-temp,
  .container>#custom_list_videos_videos_watched_right_now_items~#custom_list_videos_videos_wich_geo_models_items,
  #custom_list_videos_jp_recommendations_home_items,
  .jp-shorts-row .jp-shorts-track,
  .player-related-videos .player-related-videos-container.jp-rel-row{
    scroll-snap-type:x mandatory
  }

  /* cards: start -> center (selectors mirror the originals so they win by order + equal specificity) */
  .container>#custom_list_videos_videos_watched_right_now_items>.grid-temp>li,
  .container>#custom_list_videos_videos_watched_right_now_items~#custom_list_videos_videos_wich_geo_models_items>.thumb,
  .container>#custom_list_videos_videos_watched_right_now_items>.grid-temp>.jp-row-more-item,
  .container>#custom_list_videos_videos_watched_right_now_items~#custom_list_videos_videos_wich_geo_models_items>.jp-row-more-item,
  #custom_list_videos_jp_recommendations_home_items>.thumb,
  #custom_list_videos_jp_recommendations_home_items>.jp-row-more-item,
  .jp-shorts-row .jp-shorts-track>.jp-shorts-item,
  .player-related-videos .player-related-videos-item.jp-rel-card{
    scroll-snap-align:center;
    scroll-snap-stop:var(--jp-snap-stop)
  }
}
@supports (-webkit-touch-callout:none){@media (max-width:1023px){
  :root{--jp-snap-stop:normal}

  /* containers: proximity -> mandatory */
  .container>#custom_list_videos_videos_watched_right_now_items>.grid-temp,
  .container>#custom_list_videos_videos_watched_right_now_items~#custom_list_videos_videos_wich_geo_models_items,
  #custom_list_videos_jp_recommendations_home_items,
  .jp-shorts-row .jp-shorts-track,
  .player-related-videos .player-related-videos-container.jp-rel-row{
    scroll-snap-type:x mandatory
  }

  /* cards: start -> center (selectors mirror the originals so they win by order + equal specificity) */
  .container>#custom_list_videos_videos_watched_right_now_items>.grid-temp>li,
  .container>#custom_list_videos_videos_watched_right_now_items~#custom_list_videos_videos_wich_geo_models_items>.thumb,
  .container>#custom_list_videos_videos_watched_right_now_items>.grid-temp>.jp-row-more-item,
  .container>#custom_list_videos_videos_watched_right_now_items~#custom_list_videos_videos_wich_geo_models_items>.jp-row-more-item,
  #custom_list_videos_jp_recommendations_home_items>.thumb,
  #custom_list_videos_jp_recommendations_home_items>.jp-row-more-item,
  .jp-shorts-row .jp-shorts-track>.jp-shorts-item,
  .player-related-videos .player-related-videos-item.jp-rel-card{
    scroll-snap-align:center;
    scroll-snap-stop:var(--jp-snap-stop)
  }
}}

/* desktop / mouse / wide screens: only the alignment of the cards changes (type unchanged) */
@media (pointer:fine),(min-width:1024px){
  .container>#custom_list_videos_videos_watched_right_now_items>.grid-temp>li,
  .container>#custom_list_videos_videos_watched_right_now_items~#custom_list_videos_videos_wich_geo_models_items>.thumb,
  .container>#custom_list_videos_videos_watched_right_now_items>.grid-temp>.jp-row-more-item,
  .container>#custom_list_videos_videos_watched_right_now_items~#custom_list_videos_videos_wich_geo_models_items>.jp-row-more-item,
  #custom_list_videos_jp_recommendations_home_items>.thumb,
  #custom_list_videos_jp_recommendations_home_items>.jp-row-more-item,
  .jp-shorts-row .jp-shorts-track>.jp-shorts-item{
    scroll-snap-align:center
  }
}

/* c: Shorts arrows on touch / phones (the original CSS: @media (hover:none),(max-width:767px){.jp-shorts-nav{display:none}}).
   Same round button as on desktop, inside the row so it is not cut by the screen edge. Tap = jp-snap JS centers a card. */
@media (hover:none),(max-width:767px){
  .jp-shorts-nav{display:flex;width:36px;height:36px;margin-top:-18px;top:36%}
  .jp-shorts-nav.jp-prev{left:6px}
  .jp-shorts-nav.jp-next{right:6px}
}
@media (hover:none){
  .jp-shorts-nav:hover{background:var(--rd-surface,#1b1b20);color:var(--rd-text,#fff)}   /* no sticky orange "hover" after a tap */
}