/* JUX FM RADIO — MOBILE SCROLL, 2026-11-01 / GDD-aligned.
   The supplied Greu de Difuzat reference scrolls its .page .content element
   within a full-screen .page/.container.  JUX's previous mobile styles
   converted ONLY the homepage into a scrolling body and added short-height
   media overrides. On iOS/Android browser-toolbar collapse this changed the
   headline/player positioning and could yield two scroll roots.

   Keep ONE scroll root, .page > .container > .content, like the reference.
   Content/hero dimensions use the stable SMALL viewport (svh), not the dynamic
   viewport. No resize/scroll JS, scroll locking, or user-zoom suppression.
   This file intentionally loads LAST after the site's other CSS rules.
*/
@media screen and (max-width: 900px) {
  html {
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    -webkit-text-size-adjust: 100%;
  }
  body.jux-site-v3:not(.jux-v3-independent):has(.page) {
    height: 100% !important;
    min-height: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    touch-action: auto !important;
  }
  body.jux-site-v3:not(.jux-v3-independent) .page {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    inset: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  body.jux-site-v3:not(.jux-v3-independent) .page > .container {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    inset: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    background-color: transparent !important;
  }
  body.jux-site-v3:not(.jux-v3-independent) .page > .container > .content {
    position: relative !important;
    display: block !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y pinch-zoom !important;
    scroll-behavior: auto !important;
  }
  /* Secondary pages already have their own content sections; keep their
     natural height and let the common scroll container do the scrolling. */
  body.jux-site-v3 .page .section_player,
  body.jux-site-v3 .page .section_player .gap,
  body.jux-site-v3 .page .section_player .gap .gap_row,
  body.jux-site-v3 .page .section_player .gap .gap_row .column {
    max-width: 100% !important;
  }
  /* One stable scene behind the inner scroll; it cannot intercept touches. */
  body.jux-site-v3::before {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100lvh !important;
    pointer-events: none !important;
    background-position: center center, 75% center !important;
    background-size: 100% 100%, auto 100% !important;
  }
  .jux-v3-header { max-width: 100% !important; }
}

@media screen and (max-width: 600px) {
  /* Fixed spacing across Safari / Chrome / Opera / Brave and Android browsers.
     Old max-height:700px / :650px overrides varied when toolbars collapsed. */
  body.jux-home .page .container .content .section_player {
    min-height: 100svh !important;
  }
  body.jux-home .page .container .content .section_player .gap .gap_row .column .column_wrap .widget_wrap {
    height: auto !important;
    min-height: 100svh !important;
    padding: 80px 8px 9px !important;
    align-content: center !important;
    justify-content: center !important;
  }
  body.jux-home .page .container .content .section_player .gap .gap_row .column .column_wrap .widget_wrap .jux-headline-kicker {
    margin-bottom: clamp(15px, 2.3svh, 22px) !important;
  }
  body.jux-home .page .container .content .section_player .gap .gap_row .column .column_wrap .widget_wrap .player .player_container .player_row .play_button .play_button_container .play_button_wrap .button_play .button_play_container a.jux-glass-circle {
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    min-height: 84px !important;
    max-width: 84px !important;
    max-height: 84px !important;
  }
  body.jux-home .page .container .content .section_player .gap .gap_row .column .column_wrap .widget_wrap .player .info_player {
    padding-top: 9px !important;
  }
  body.jux-home .jux-v3-relocated-social { margin-top: 7px !important; }
}
@media screen and (max-width: 375px) {
  body.jux-home .page .container .content .section_player .gap .gap_row .column .column_wrap .widget_wrap .player .player_container .player_row .play_button .play_button_container .play_button_wrap .button_play .button_play_container a.jux-glass-circle {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    min-height: 78px !important;
    max-width: 78px !important;
    max-height: 78px !important;
  }
}

/* JUX FM 2026-11-08: iOS uses a tall, brightly painted native scroll thumb
   for the inner page scroller; on content changes it can appear to jump.
   Hide ONLY the page indicator, never the scrolling itself or the custom
   neon menu indicator. */
@media screen and (max-width: 900px) {
  body.jux-site-v3:not(.jux-v3-independent) .page > .container > .content {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  body.jux-site-v3:not(.jux-v3-independent) .page > .container > .content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

/* JUX FM 2026-11-08 — iPhone: single native page scroll on HOME only.
   The former nested .content scroll box can conflict with Safari viewport
   changes and the jump-to-section / back-to-top actions. Keep the rest of
   the site's pages and the separate mobile-menu scroller untouched. */
@media screen and (max-width: 900px) {
  html:has(body.jux-home) {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    overscroll-behavior-x: none;
  }
  body.jux-site-v3.jux-home:not(.jux-v3-independent) {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }
  body.jux-site-v3.jux-home:not(.jux-v3-independent) .page,
  body.jux-site-v3.jux-home:not(.jux-v3-independent) .page > .container {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.jux-site-v3.jux-home:not(.jux-v3-independent) .page > .container > .content {
    position: relative !important;
    display: block !important;
    flex: none !important;
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
    overflow: visible !important;
    touch-action: pan-y pinch-zoom !important;
  }
  /* Safari keeps the natural body scroll indicator; no custom thumb or
     forced scroll animation during finger gestures. */
}