/* casey-responsive.css — mobile reflow for every page.
   The pages are built with desktop-scale inline styles. Inline styles normally
   beat stylesheets, but author !important declarations win over inline *normal*
   declarations — so these rules safely reflow the layout at small widths without
   touching any component code. Loaded after the page's own <style> on all pages. */

/* ───────────────────────── Tablet & below ───────────────────────── */
@media (max-width: 900px) {
  /* Collapse any multi-column grid to a single column.
     React serializes inline grids to "grid-template-columns: …" in the style
     attribute, so this attribute selector matches them all. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ───────────────────────── Phone ───────────────────────── */
@media (max-width: 768px) {
  /* 1 ─ Horizontal padding: the big 56–96px section gutters → 22px.
         Also flatten the tall vertical padding so stacked pages feel right. */
  section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  article,
  footer > div,
  .casey-nav,
  [style*="padding: 0px 96px"],
  [style*="padding:0px 96px"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  /* Heroes carry "170px …" top padding — keep enough room to clear the fixed nav */
  section[style*="170px"] {
    padding-top: 112px !important;
  }

  /* 2 ─ Collapse big two-column grid gaps so stacked rows don't gape */
  [style*="gap: 80px"],
  [style*="gap: 0px 80px"],
  [style*="gap: 72px"],
  [style*="gap: 64px"],
  [style*="gap: 60px"] {
    gap: 36px !important;
  }

  /* 3 ─ Cap oversized display type so headings never overflow the viewport */
  h1 { font-size: clamp(33px, 8.8vw, 44px) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(26px, 7.2vw, 34px) !important; line-height: 1.16 !important; }
  h3 { font-size: 20px !important; }
  blockquote { font-size: clamp(22px, 6vw, 30px) !important; }

  /* 4 ─ Tame large fixed-height media / hero columns so they don't dominate */
  [style*="height: 600px"] { height: 380px !important; }
  [style*="height: 560px"] { height: 360px !important; }
  [style*="height: 520px"] { height: 340px !important; }
  [style*="height: 480px"] { height: 320px !important; }
  [style*="height: 440px"] { height: 300px !important; }

  /* 5 ─ Let fixed-width pills/cards/rows shrink instead of forcing overflow */
  [style*="min-width"] { min-width: 0 !important; }

  /* 6 ─ Modal: tighter padding on small screens */
  [style*="padding: 44px 48px"] { padding: 32px 22px !important; }

  /* 7 ─ Shrink the decorative hero arch ~30% so it doesn't dominate phones */
  .ph-hero-arch {
    width: 434px !important;
    height: 210px !important;
    right: -120px !important;
  }

  /* 8 ─ Footer: collapse the 3-col legal grid and tighten the 56px gutters */
  footer [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  footer > div {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}