/* ==========================================================================
   Responsive layer
   --------------------------------------------------------------------------
   The pages come from a design canvas that was drawn at desktop width. Every
   box carries its own inline style: fixed 40px side padding, headings pinned
   at 44-60px, and grids declared as

       repeat(auto-fit, minmax(340px, 1fr))

   That 340px floor plus 80px of padding needs 420px before it will sit still.
   A 375px phone cannot give it that, so the columns refused to collapse and
   pushed the page 123px wider than the screen. That is the overlapping text
   and the boxes out of sequence.

   Inline styles beat stylesheets, so the overrides below need !important.
   That is not sloppiness; it is the only lever a stylesheet has against a
   style attribute. If these pages are ever rebuilt from the canvas, this file
   should be re-applied.

   Nothing here changes the desktop design. Everything is inside a media
   query, so above 900px the original layout is untouched.
   ========================================================================== */

/* Belt and braces: never allow a sideways scroll on a phone. */
@media (max-width: 900px) {
  html, body { overflow-x: hidden !important; }

  /* 1. Collapse every multi-column grid to a single column.
        This is the fix that actually matters - it removes the 340px floor. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* 2. Bring the generous desktop gutters in to something a phone can hold. */
  [style*="max-width:1220px"],
  section {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* 3. Headings scale with the viewport instead of sitting at a fixed size.
        clamp keeps them from ever going too small or overflowing again. */
  h1 { font-size: clamp(28px, 7.6vw, 40px) !important; line-height: 1.16 !important; }
  h2 { font-size: clamp(22px, 6vw, 30px) !important;   line-height: 1.22 !important; }
  h3 { font-size: clamp(18px, 5vw, 24px) !important; }

  /* 4. Pictures stay inside their box. */
  img { max-width: 100% !important; height: auto !important; }

  /* 5. The header stacks: brand on top, navigation beneath it. */
  header [style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  header nav {
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 10px 18px !important;
  }

  /* 6. Form controls fill the width rather than sitting at a fixed size. */
  input, select, textarea, button { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }

  /* 7. Long words and email addresses wrap instead of pushing the box wider. */
  p, div, a, li { overflow-wrap: anywhere; }

  /* 8. Big desktop padding inside panels comes down. */
  [style*="padding:44px"] { padding: 26px !important; }
}

/* Narrow phones need a little more room again. */
@media (max-width: 420px) {
  [style*="max-width:1220px"], section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  h1 { font-size: clamp(26px, 7.4vw, 34px) !important; }
}