/* local-city-mobile.css — shared phone layer for the /local/* city SEO pages.
 *
 * Those pages are built from two templates and 132 of them shipped with zero
 * @media rules, so on a 375px phone the hero ate the fold and the 4-up stat
 * strip collapsed to ~78px columns:
 *   A) all-inline styles (no <style> block) — hero padding and the stat grid
 *      are style="" attributes, so those rules need !important to win;
 *   B) a page-local <style> block using .hero / .stats / .bottom-bar classes,
 *      whose .hero h1 { font-size: 2.8rem } (44.8px) beat every shared rule.
 *
 * Linked LAST in <head> on those 132 pages only. Everything is inside a
 * max-width query, so desktop rendering is unchanged. No copy, price, or
 * colour is touched here — layout only.
 *
 * Added 2026-07-25.
 */

@media (max-width: 640px) {

  /* ── Stat strips: 4 hard columns → 2. minmax(0,·) stops long figures like
        "$2B+" from forcing the page wider than the viewport. ── */
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"],
  .stats-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .stats { gap: 22px !important; }
  .stats .stat { flex: 1 1 40%; min-width: 0; }

  /* ── Section rhythm: 70–80px of vertical padding is most of a phone screen.
        The already-tight 32px stat strip is excluded so it isn't made taller. ── */
  section,
  .cta-section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  section:not([style*="padding:32px"]),
  .cta-section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  /* ── Hero: lift the primary CTA above the fold ── */
  .hero,
  body > section:first-of-type {
    padding: 34px 18px !important;
  }

  /* Template B's 2.8rem (44.8px) headline. Template A already uses a sane clamp(). */
  .hero h1 { font-size: clamp(26px, 7.2vw, 31px) !important; line-height: 1.18 !important; }
  .hero p  { font-size: 1rem !important; line-height: 1.5 !important; margin-bottom: 24px !important; }
  /* the location pill wraps to two lines at 0.85rem and costs ~26px of fold */
  .hero .tag { font-size: 0.78rem !important; margin-bottom: 14px !important; }

  /* Template A's hero paragraph is set at 1.1rem/1.6 and runs 10–11 lines on a
     phone (~344px), which alone pushes the CTA off-screen. Same copy, tighter
     setting — nothing is hidden or truncated. */
  body > section:first-of-type p {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin-bottom: 22px !important;
  }
  /* Two hero buttons sit side by side with an inline margin-left; stack them
     full-width instead so neither drops below a tappable size. */
  .hero .btn-primary {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 0 10px !important;
  }
  .hero .demo-bar { display: block; margin-top: 6px; }
  /* pull-quote sits between the headline and the CTA on 4 of these pages */
  .hero .city-quote { font-size: 0.95rem !important; padding: 12px 16px !important; margin-bottom: 16px !important; }

  /* ── Fixed bottom CTA bar: keep the message, stop it crushing the button ── */
  .bottom-bar,
  .sticky-cta,
  [style*="position:fixed;bottom:0"] {
    gap: 10px !important;
    padding: 10px 14px !important;
    flex-wrap: nowrap !important;
  }
  .bottom-bar > span,
  [style*="position:fixed;bottom:0"] > span {
    font-size: 0.76rem !important;
    line-height: 1.3 !important;
    min-width: 0;
  }

  /* Reserve room so that bar never covers the last section's content. */
  body:has(.bottom-bar),
  body:has([style*="position:fixed;bottom:0"]) {
    padding-bottom: 74px !important;
  }
}

/* Narrow phones (iPhone SE / mini): keep two stat columns, just ease the
   figure size so nothing has to shrink below a readable width. */
@media (max-width: 400px) {
  .stat .num,
  .stat-num { font-size: 1.7rem !important; }
}
