/* ═══════════════════════════════════════════════════════════════════════════
   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 */
  /* Reading text the removed mobile-qa-v1 stamp had been (crudely) propping
     up — surgical 14px floors now that the stamp is gone (2026-07-02).
     ID-scoped: these classes are authored in page-scoped CSS, which loads
     AFTER this file, so a bare class rule here would lose the cascade. */
  #main .ih-advisor-bio { font-size: 14px; }   /* was 13 */
  #main .pv-bench-cap { font-size: 14px; }     /* was 12.5 */
  /* cs-hero-trustline handled in case-studies-page.css — its authored
     selector is (1,3,1), beyond what belongs in this file */

  /* ── 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-chip 44px tap floor removed 2026-07-02: chips are informational
     spans/anchors, and forcing min-height:44px under their 11.5-12.5px type
     produced tall hollow capsules on every svc/ind hero (the 8px paddings
     never applied anyway — they lost to a vshr-v4 !important, now removed).
     ind-components.css owns chip geometry. */
  /* mob-head-logo was 28px tall — give the tappable anchor real height */
  .mob-head-logo { min-height: 40px; display: inline-flex; align-items: center; }

  /* ── 8. EYEBROW PILLS — step type down instead of blob-wrapping ───────
     site.css flips .eyebrow-pill to white-space:normal !important at <=480
     while premium.css widens tracking to .14em !important, so hero eyebrow
     capsules wrapped into 2-line lozenges even when the label fit on one
     line (verified 2026-07-02: benefits needed 312px of 314). Tighter
     tracking makes real labels fit; wrap stays as the fallback for the
     extreme config labels (professional-services, technology), balanced so
     a rare 2-liner breaks evenly instead of orphaning its last word. */
  .eyebrow-pill,
  .hero-eyebrow-pill,
  #main .eyebrow-pill,
  #main .hero-eyebrow-pill {
    /* ID-scope: premium.css's blanket body.premium [class*="eyebrow"]
       tracking rule is (0,4,1) — the :not() args count — so class-level
       selectors can't beat its .14em even from a later file */
    letter-spacing: 0.1em !important;
    line-height: 1.45;
    white-space: normal;
    text-wrap: balance;
  }
  /* Bench-strip eyebrow: 11.5px caps + .18em tracking + two 18px dashes
     exceeded its 260px slot and wrapped against the dashes. .08em fits. */
  #main .team-bench-strip__eyebrow { letter-spacing: 0.08em !important; }
  /* ZayZoon callout eyebrow label missed one line by ~1px at .14em */
  #main .zz-callout-eyebrow span { letter-spacing: 0.12em; }

  /* ── 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;
  }

}