/* ────────────────────────────────────────────────────────────────
   Responsive layer for the .beth-page direction pages.

   The directions were authored as fixed ~1280px artboards using inline
   React styles, so this retrofits mobile behaviour without touching the
   JSX. Two mechanisms:
     1. Scale the type-scale *tokens* down at breakpoints (the headings
        reference var(--t-display) etc., so this cascades for free).
     2. A few !important overrides keyed off the serialized inline-style
        strings (grid templates, the 56px gutters, space-between rows,
        the tall hero) — !important is required to beat inline styles.
   ──────────────────────────────────────────────────────────────── */

/* ── Tablet and below ───────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Decorative negative offsets must never cause sideways scroll. */
  html, body { overflow-x: hidden; }

  :root {
    --t-display: 54px;
    --t-h1: 42px;
    --t-h2: 31px;
    --t-h3: 23px;
  }

  /* Tighten the generous 56px side gutters. */
  .beth-page [style*="px 56px"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* ── Small tablet / large phone ─────────────────────────────────── */
@media (max-width: 768px) {
  /* Stack every multi-column layout grid to one column… */
  .beth-page [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* …but keep small icon/number + text rows side-by-side. */
  .beth-page [style*="grid-template-columns: 60px"],
  .beth-page [style*="grid-template-columns: 40px"],
  .beth-page [style*="grid-template-columns: 32px"] {
    grid-template-columns: auto 1fr !important;
  }

  /* Let space-between rows (nav info bar, footer bottom, form footer)
     wrap rather than overflow. */
  .beth-page [style*="space-between"] {
    flex-wrap: wrap !important;
  }

  /* Don't let the tall hero dwarf a small screen. */
  .beth-page [style*="min-height: 720px"] {
    min-height: 0 !important;
  }
}

/* ── Phone ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  :root {
    --t-display: 38px;
    --t-h1: 31px;
    --t-h2: 26px;
    --t-h3: 21px;
    --t-body: 16px;
  }

  .beth-page [style*="px 56px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Allow inline flex rows (e.g. the hero button pair) to wrap. */
  .beth-page [style*="display: flex"] {
    flex-wrap: wrap !important;
  }
}