/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-OPTIMIZE — Boil-the-Lake systemic pass (2026-05-31)

   Loads LAST in app.blade.php (after buttons-v2.css, before @stack('styles')),
   so single-class overrides win the cascade without !important wars.
   Page-scoped CSS (@stack) still loads after this and may intentionally override.

   Scope: ALL rules live inside @media (max-width: 767.98px). Desktop UNTOUCHED.
   Spec: _strategy/04-mobile-first-rules.md (17px reading floor, 14px hard floor,
   ≥44–48px tap targets, no 2-col under 768px). Evidence: _strategy/mobile-boil-the-lake/.

   Philosophy: SURGICAL. The site is already visually clean on mobile. Bring
   genuinely-too-small text up + fix tap targets + collapse stray 2-col grids —
   without crudely blowing up every label. Tertiary/fine-print text floors at 14.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

  /* ── 1. TYPE FLOOR SAFETY NET ─────────────────────────────────────────
     --fs-xs was 13px, --fs-sm was 15px ("never 15" rule). Nudge the small
     tokens up so every component referencing them clears the 14px hard floor.
     Conservative bump — keeps micro-labels small but legal. */
  :root {
    --fs-xs: 14px;   /* was 13 */
    --fs-sm: 16px;   /* was 15 — "never 15" */
  }

  /* ── 2. MOBILE NAV DRAWER (mob-*) — all 62 pages ──────────────────────
     Drawer is well-built; section heads were 16px (1px under), trust subtext
     12px. Bring reading/interactive text to floor; keep the clean look. */
  .mob-drawer .mob-section-head,
  .mob-drawer .mob-section-direct { font-size: 16.5px !important; }
  .mob-drawer .mob-sublink,
  .mob-drawer .mob-sublink--ext { font-size: 16px !important; }
  .mob-drawer .mob-view-all { font-size: 15px !important; }
  .mob-drawer .mob-cta,
  .mob-drawer .mob-cta-primary,
  .mob-drawer .mob-cta-ghost { font-size: 16px !important; }
  .mob-drawer .mob-trust__title { font-size: 14px !important; }
  .mob-drawer .mob-trust__sub { font-size: 14px !important; }
  .mob-drawer #mobClose, #mobClose { min-width: 48px !important; min-height: 48px !important; }
  /* Desktop nav (if rendered ≤767 on any template) — harmless if hidden */
  .nav-link,
  .nav-dd-trigger,
  .hd-login-trigger { font-size: 15px; }

  /* ── 3. SHARED COMPONENT TEXT FLOORS ──────────────────────────────────*/
  .svc-sub { font-size: 17px; line-height: 1.55; }
  .svc-proof__label { font-size: 14px; }       /* was 13 */
  .team-bench-strip__name { font-size: 15px; } /* was 14, micro-label in rail */
  .team-bench-strip__role { font-size: 13px; } /* was 12 */
  .proof-card__body { font-size: 15px; }       /* was 13.5 */

  /* ── 4. BUTTON LABELS — 15px → 16px ("never 15") ──────────────────────*/
  .btn,
  .btn-blue-solid,
  .btn-ghost-light,
  .btn-navy-solid,
  .svc-platform__cta,
  .svc-platform__cta-secondary { font-size: 16px; }

  /* ── 5. TAP TARGETS — plain <a> inline/CTA links get no min-height from
     baseline (only .btn does). Give the known interactive link classes a
     44px hit area via inline-flex + centered alignment. ───────────────── */
  .ind-landscape__solve-link,
  .ins-scroll-link,
  .svc-platform__cta-secondary,
  .svc-link,
  .text-link,
  a.phone-link,
  a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Trust chips were ~28–30px tall — pad to 44 without changing type */
  .trust-chip,
  .trust-chip-c {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /* mob-head-logo was 28px tall — give the tappable anchor real height */
  .mob-head-logo { min-height: 40px; display: inline-flex; align-items: center; }

  /* ── 6. STRAY 2-COL GRIDS → 1 COLUMN (rule #3) ────────────────────────
     Baseline collapses many *-grid at ≤540px but misses these classes and
     the 541–767 band. Collapse the known offenders sitewide. ──────────── */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  [class*="grid-cols-"],
  .payroll-scope__grid,
  .svc-proof__stats {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ── 7. INDUSTRY SOLVEX ROWS — multi-col won't collapse → text wraps in a
     ~130px ribbon on all 17 industry pages. Force full-width single column
     so the dossier body reads normally. ───────────────────────────────── */
  /* site.css AND ind-components.css both define .solvex-row grids (duplicate),
     and a grid/grid-template shorthand sets a 3-track layout that a column-only
     override can't cancel. display:block !important nukes the grid entirely so
     problem/dossier/advisor stack full-width — dossier body stops wrapping in a
     130px ribbon. */
  .solvex-row { display: block !important; }
  .solvex-row > * + * { margin-top: 20px; }
  .solvex-row__dossier { display: block !important; }
  .solvex-row__dossier > * + * { margin-top: 14px; }
  .solvex-row__advisor-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

}