/* ============================================================================
   jp-marketing-mobile-v3.css — marketing-site mobile guardrails — v1.7.19
   ----------------------------------------------------------------------------
   Loaded by EVERY desktop marketing page (the _mobile twins keep their own
   Block 46.1 stack). Two jobs:

   1 · GUARDRAILS — desktop marketing pages are still what phones see between
       760px and the redirect (tablets, ?desktop=1 escape hatch, pages without
       twins). These rules stop the classic failures: horizontal scroll,
       overflowing media, hero type that doesn't scale, sub-44px CTAs.
   2 · CONSISTENCY — the shared JP-HERO / jp-nav / footer blocks render
       identically across all ~40 pages instead of inheriting each page's
       local quirks.

   Conservative by design: only shared block classes + element-level media
   guards. No page-specific selectors — bespoke fixes belong in the page or
   its _mobile twin. Desktop ≥1024px: zero effect.
   ========================================================================== */

/* ── Tablet + phone (≤1023px): media can never overflow its column ──────── */
@media (max-width: 1023px) {
  img, svg, video, iframe, canvas { max-width: 100%; height: auto; }
}

/* ── Phone band (≤760px — matches the Block 45 redirect breakpoint) ─────── */
@media (max-width: 760px) {
  /* the #1 marketing-page bug: sideways scroll from one wide element */
  html, body { overflow-x: clip; }

  /* shared hero block — fluid type, stacked CTAs, full-width tap targets */
  .jp-hero-h1 { font-size: clamp(27px, 7.6vw, 40px) !important;
    line-height: 1.14 !important; overflow-wrap: break-word; }
  .jp-hero-sub { font-size: clamp(13.5px, 4vw, 17px) !important;
    line-height: 1.55 !important; }
  .jp-hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
  .jp-hero-btn { min-height: 46px; display: inline-flex; align-items: center;
    justify-content: center; flex: 1 1 160px; text-align: center; }

  /* data tables on text pages scroll instead of squishing */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code { overflow-x: auto; max-width: 100%; }

  /* shared footer columns stack with breathing room */
  footer [class*="col"], footer [class*="grid"] { min-width: 0; }

  /* forms: 16px floor prevents iOS focus zoom; comfortable targets */
  input, select, textarea { font-size: 16px !important; }
  button, a[class*="btn"], [role="button"] { min-height: 44px; }

  /* whitespace rhythm: stop double-padded sections from eating the fold */
  section { padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right)); }
}

/* ── Small phones (≤390px) ──────────────────────────────────────────────── */
@media (max-width: 390px) {
  .jp-hero-h1 { font-size: clamp(24px, 7.2vw, 30px) !important; }
  .jp-hero-btn { flex-basis: 100%; }
}