/* =====================================================================
   mobile-base.css — defensive mobile baselines.
   =====================================================================
   Loaded EARLY so per-page inline <style> rules still win where they
   exist. No !important — these are defaults, not overrides. Safe to drop
   onto any page; pages that already have detailed mobile media queries
   are unaffected because their cascade comes later.
   ===================================================================== */

/* iOS Safari auto-zooms when a tapped input has font-size < 16px. Floor
   every interactive control at 16px so tapping never triggers zoom. */
@media (max-width: 980px){
  input, textarea, select { font-size: max(16px, 1rem); }
}

@media (max-width: 760px){
  /* Tap targets — Apple HIG minimum is 44×44. Apply to every clickable
     primitive that's likely to be a tap target. */
  button,
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-action,
  .btn-session,
  a.btn,
  a.btn-primary,
  a.btn-secondary {
    min-height: 44px;
  }

  /* Inputs / textareas / selects — comfortable tap height + 16px font */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input:not([type]),
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }

  /* Body — make sure content respects safe-area on notched phones. Most
     pages already pad 18-28px; we just ensure the safe-area inset is
     additive so nothing tucks under the iOS notch / dynamic island. */
  body {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  /* Hero blocks — shrink padding/radius so the hero feels at-home on
     a phone instead of dominating the screen. */
  .hero {
    padding: 22px 18px;
    border-radius: 22px;
  }
  .hero-sub {
    font-size: 13px;
    line-height: 1.4;
  }

  /* Cards — trim padding/radius. */
  .card {
    padding: 18px 16px;
    border-radius: 16px;
  }

  /* Back link — compact pill so it doesn't dominate the top of the page. */
  .back-link {
    font-size: 11px;
    padding: 0 12px 0 8px;
    height: 38px;
  }

  /* Action stacks / tile grids — stack to a single column when there's
     no explicit grid override on the element. Pages that set their own
     grid-template-columns inline keep their layout. */
  .action-stack:not([style*="grid-template"]) {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Generic horizontal scroll guard — kills accidental overflow that
     causes the dreaded mobile sideways-scroll.
     ONLY applied to <html>, not <body>. Clamping BOTH ancestors with
     overflow-x:hidden breaks vertical scroll in Chrome's mobile-emulator
     (wheel/touch events fail to resolve to a scroll container when both
     ancestors define their own overflow boxes). Putting the clamp on
     html alone keeps sideways scroll suppressed while letting the body
     bubble vertical scroll up to the viewport correctly. */
  html {
    overflow-x: hidden;
    overflow-y: auto;
  }
  /* Defensive: override per-page body rules that set overflow-x:hidden
     (a few pages do this in their own <style>). Use !important so the
     mobile cascade wins on phone-sized viewports without us having to
     hunt down every per-page declaration. */
  body {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  /* Generic two-column grids the codebase uses — stack on phones. */
  .row.two-col,
  .row.three-col,
  .grid.two-col,
  .grid.three-col,
  .field-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Even narrower phones — pull padding in another notch. */
@media (max-width: 380px){
  .hero { padding: 18px 14px; }
  .card { padding: 14px 12px; }
}
