/* ============================================================
   mobile-editorial.css — Vision + How It Works (Smart Mortgage)
   mobile polish pass. Same pattern as mobile-qc.css / mobile-faq.css.
   Load after globals.css. Every rule is scoped to .lbd-vision-page or
   .lbd-smart-page and gated to small screens, so no other surface moves.

   SCOPE HOOK (one line per page — both already render <main class="lbd-breathe">):
     VisionPage.jsx        →  <main className="lbd-breathe lbd-vision-page">
     SmartMortgagePage.jsx →  <main className="lbd-breathe lbd-smart-page">

   WHY THESE PAGES NEED IT (verified against the shipped code):
   globals.css already (a) shrinks .section side padding and --section-y
   at <=640px, (b) clamps .lbd-display/.lbd-h1/.lbd-h2 down at <=480px,
   and (c) collapses most inline multi-column grids to 1fr at <=880px.
   Three real gaps remain on these two editorial pages:

   1. HERO TOP GAP. Both heroes hard-code paddingTop:200 inline (sized
      for the desktop floating nav). On phones the nav is a 56px glass
      bar, so ~140px of that is dead space above the eyebrow.

   2. THE "SHIFT" 4-CARD GRID (Smart Mortgage only). It renders as
      grid-template-columns: repeat(4, minmax(0px, 1fr)) — which is NOT
      in globals' collapse list (that list has repeat(4, 1fr) but not
      the minmax variant). So it stays four ~76px columns on a phone:
      Deposits / Spending / Interest / Access crushed into slivers.
      This is the single clearest "adapted desktop" failure on the page.
      Two-up (2×2) reads better than 1-up for these short label cards.

   3. CLOSING CTA. ClosingCTA hard-codes 128px top+bottom padding inline
      (the .section side-padding rule doesn't touch top/bottom), leaving
      an oversized sage band on mobile. Tighten it and let the single
      orange action go full-width for a confident thumb target.

   Desktop (>880px) is completely unchanged.
   ============================================================ */

/* ── 1. Reclaim the hero's desktop top gap ─────────────────────── */
@media (max-width: 640px) {
  .lbd-vision-page > .section:first-of-type,
  .lbd-smart-page  > .section:first-of-type {
    padding-top: 104px !important;
    padding-bottom: 64px !important;
  }
}

/* ── 2. The "shift" 4-card grid → 2×2 on phones ────────────────── */
/* Match the exact inline value React serializes (minmax(0px, 1fr)),
   which globals' broad collapse rule does not cover. */
@media (max-width: 880px) {
  .lbd-smart-page [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}
/* Below 440px, one column reads cleaner than a tight 2×2. */
@media (max-width: 440px) {
  .lbd-smart-page [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 3. Closing CTA — tighten the band, full-width action ──────── */
@media (max-width: 640px) {
  .lbd-vision-page .section--sage-deep:last-of-type,
  .lbd-smart-page  .section--sage-deep:last-of-type {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .lbd-vision-page .section--sage-deep:last-of-type .lbd-btn,
  .lbd-smart-page  .section--sage-deep:last-of-type .lbd-btn {
    width: 100%;
    justify-content: center;
  }
}