/* Altered Balance — phone fixes
   The generated bundle stops adapting below about 700px. On a 375px phone the
   hero still ran as two columns (pushing the image ~200px off-screen), the h1
   was locked at ~61px by a clamp whose minimum never scaled, the header ate a
   third of the viewport, and the menu control was an 18px tap target.
   This file loads after the bundle and only touches those cases.
   Outside /assets/ on purpose: _headers caches that folder immutably. */

@media (max-width: 700px) {

  /* ── Hero: stack it, and let the image sit under the words ── */
  .hero {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  .hero-visual {
    width: 100% !important;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    justify-self: stretch;
  }
  .hero-image { width: 100%; height: 100%; object-fit: cover; }

  /* ── Type: the clamp minimums are desktop-sized, so they never shrink ── */
  h1, .hero h1 { font-size: clamp(2.1rem, 9vw, 3rem) !important; line-height: 1.08; }
  h2           { font-size: clamp(1.7rem, 7vw, 2.4rem) !important; line-height: 1.12; }
  h3           { font-size: clamp(1.15rem, 5vw, 1.45rem) !important; }
  .page-lead, .lead { font-size: 1rem; line-height: 1.65; }

  /* Long words in big display type can push the page sideways */
  h1, h2, h3 { overflow-wrap: break-word; text-wrap: balance; }

  /* ── Header: three stacked rows was ~227px before any content ── */
  .header-top { padding-top: .85rem; padding-bottom: .85rem; gap: .5rem; }
  .brand img, .header-top .brand img { height: 40px; }
  .member-login { font-size: .62rem; letter-spacing: .12em; }
  .header-cta { padding: .7rem 1rem; font-size: .68rem; }

  /* ── Tap targets: 44px is the accessible minimum ── */
  .mobile-nav summary,
  .header-nav-row .mobile-nav summary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 .9rem;
    font-size: .8rem;
  }
  .mobile-nav nav a,
  .desktop-nav a,
  .footer-links a,
  .offer-jump a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .text-link { min-height: 44px; display: inline-flex; align-items: center; }
  /* Remaining small links: the header's member-login and inline body links */
  .member-login { min-height: 44px; display: inline-flex; align-items: center; }
  .form-aside a, .footer-bottom a, .career-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .button { min-height: 48px; }


  /* ── Headings the bundle sets to white-space:nowrap ──
     Fine on a wide screen, but on a phone they can't wrap and run past the
     edge. This was the one real cause of sideways scroll on the homepage;
     overflow-x:hidden above only hid it. */
  .work-preview .section-heading h2,
  .work-preview-card h3 { white-space: normal !important; }
  /* .offer-jump is a deliberately scrollable strip — leave its nowrap alone,
     but make sure it scrolls rather than stretching the page. */
  .offer-jump { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .offer-jump::-webkit-scrollbar { display: none; }


  /* ── Grid blowout on /about ──
     A grid item's automatic minimum size is its CONTENT, so .story-copy
     (min-width:auto) refused to shrink and forced its 375px section to lay out
     a 505px column. min-width:0 lets it behave. Classic CSS grid trap. */
  .about-story, .about-story-tint { grid-template-columns: minmax(0, 1fr) !important; }
  .about-story > *, .story-copy, .about-career-proof { min-width: 0 !important; }
  .highlight-grid { grid-template-columns: 1fr !important; }
  .credential-line, .career-links { flex-wrap: wrap; }

  /* ── Nothing should be able to scroll the page sideways ── */
  body { overflow-x: hidden; }
  img, video, iframe, table, pre { max-width: 100%; }
}

/* Small phones — the 375px class of device and below */
@media (max-width: 420px) {
  .button, .button-light, .button-outline {
    width: 100%;
    justify-content: center;
  }
  .button-row { display: flex; flex-direction: column; gap: .75rem; align-items: stretch; }
  /* Price + label lines wrap rather than squeeze */
  .price-line { flex-wrap: wrap; row-gap: .25rem; }
}

/* ── Form pages ── */
@media (max-width: 700px) {
  .form-page { padding-left: 1.25rem; padding-right: 1.25rem; }
  .form-layout { grid-template-columns: 1fr; gap: 1.75rem; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  /* iOS zooms the whole page when a focused input is under 16px */
  .field input, .field select, .field textarea { font-size: 16px; }
  .form-card { padding: 1.4rem 1.15rem; }
  .form-card .button { width: 100%; }
}