/* ===========================================================
   Mobile premium pass — additive only, scoped to small screens.
   Nothing here overrides desktop (min-width:641px) styles.
   =========================================================== */

@media (max-width:640px){

  /* --- 1. Safety net: never let an overflowing child force a
     horizontal crop. main already has overflow-x-hidden, this
     just guarantees no element inside can push past 100vw. --- */
  html,body{overflow-x:hidden;width:100%}
  .flex>*{min-width:0}

  /* --- 2. Tighter, more intentional vertical rhythm.
     Desktop py-28 / mt-16 read as generous on a 27" monitor;
     on a 6" screen the same fixed rem values just push content
     off-screen and feel like dead space, not "premium". --- */
  section[class*="py-28"]{padding-top:3.25rem!important;padding-bottom:3.25rem!important}
  .mt-16{margin-top:2.75rem!important}
  .mt-28{margin-top:3.25rem!important}

  /* --- 3. Nav pills: guarantee they can never spill into the
     next cell (e.g. if a locale swaps in a longer word) while
     keeping the single-line look whenever it fits. --- */
  .hero-nav-link{white-space:normal!important;line-height:1.2!important;overflow-wrap:anywhere}

  /* --- 4. Horizontally-scrollable blocks (tables, JSON sample)
     get a visible affordance instead of feeling "cut off": a
     soft right-edge fade + native momentum scrolling. --- */
  .overflow-x-auto{
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  }
  .overflow-x-auto:has(table){padding-right:4px}

  /* --- 5. Modal chrome: bigger tap targets + respect the
     iPhone notch / home-indicator safe areas. --- */
  .jrv-close,.jrv-admin{
    min-height:44px;
    min-width:44px;
    padding:.6rem 1rem;
    top:max(10px,env(safe-area-inset-top));
  }
  .jrv-close{right:max(8px,env(safe-area-inset-right))}
  .jrv-admin{left:max(8px,env(safe-area-inset-left))}
  .jrv-overlay{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}

  /* --- 6. Icon grid: slightly smaller marks + gap so four-per-
     row still breathes on narrow phones once it reaches sm. --- */
  .jv-icon-img{width:3rem;height:3rem}

  /* --- 7. Skin stage: keep the floating animation from making
     the card taller than it needs to be on short viewports. --- */
  .jv-skin-stage{height:7rem}
}

@media (max-width:380px){
  /* Extra-small phones (SE-class): trim once more. */
  section[class*="py-28"]{padding-top:2.5rem!important;padding-bottom:2.5rem!important}
  .hero-copy h1{margin-top:.6rem!important}
  .jv-icon-grid{gap:.75rem!important}
}