/* ------------------------------------------------------------------
   Mobile / narrow-viewport fixes.

   The pages ship desktop-sized inline styles and no breakpoints, so
   these rules need !important to win against the inline declarations.
   Everything here is layout only — no colours, type faces or copy.
   ------------------------------------------------------------------ */

@media (max-width: 767px) {

  /* NOTE: do NOT use `overflow-x: hidden` on html/body here. This body
     carries a fixed height, so hidden forces overflow-y to `auto`, makes
     the body its own scroll container and pins window.scrollY at 0 --
     which silently breaks the scroll-driven pointer and sticky header.
     The overflow sources are fixed individually below instead. */
  img, svg, video { max-width: 100%; }

  /* --- page gutters: 48px is too generous at phone widths --- */
  header, section, footer { padding-left: 20px !important; padding-right: 20px !important; }

  /* --- header: let items wrap instead of crushing each other --- */
  header { flex-wrap: wrap !important; column-gap: 12px !important; row-gap: 8px !important; }
  header a { white-space: nowrap !important; }

  /* The wordmark is a fixed 200px crop window with overflow:hidden, so a
     flex squeeze silently chops it to "JASO". Pin its size, then scale
     the whole crop down and reclaim the freed layout width. */
  header > div:first-child {
    flex: 0 0 auto !important;
    transform: scale(.72);
    transform-origin: left center;
    margin-right: -56px !important;
  }

  /* --- cards with desktop-sized inner gutters --- */
  div[style*="padding:56px 56px"] { padding: 26px 20px 24px !important; }
  div[style*="px 48px"], div[style*="px 52px"] { padding-left: 20px !important; padding-right: 20px !important; }
  div[style*="border-radius:32px"] { border-radius: 20px !important; }

  /* --- multi-column grids collapse to one column ---
     auto-fit + a 320px minimum can't fit a 375px screen once padding
     is accounted for, so the track overflows instead of wrapping. */
  [style*="minmax(320px"], [style*="minmax(240px"], [style*="minmax(230px"],
  [style*="minmax(220px"], [style*="minmax(180px"], [style*="minmax(150px"],
  [style*="minmax(70px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="gap: 48px"], [style*="gap:48px"] { gap: 28px !important; }

  /* --- headings must be allowed to wrap --- */
  h1 { white-space: normal !important; font-size: clamp(30px, 10.5vw, 44px) !important; }
  h2 { overflow-wrap: break-word; }

  /* --- long mono pills wrap rather than run off the edge --- */
  span[style*="border-radius: 999px"], span[style*="border-radius:999px"] {
    white-space: normal !important;
    max-width: 100% !important;
  }

  /* --- the decorative scroll-following hand stays, but shrinks (its
         size comes from getPtr() in the page script). It must never
         swallow a tap, so it stops receiving pointer events here. --- */
  .scroll-finger { pointer-events: none !important; }

  /* --- pill links must stay pills: once the text wraps to 2-3 lines
         inside a 999px radius the button renders as a blob. --- */
  a[style*="border-radius:999px"], a[style*="border-radius: 999px"] {
    white-space: nowrap !important;
  }

  /* The header's "Full job description" link duplicates the hero link
     directly below it; dropping it keeps the sticky bar to one row. */
  header a.nav-secondary { display: none !important; }
}