/* ── Spring Street · mobile layer ────────────────────────────────────────
   The site is authored with inline styles, so responsive behaviour lives
   here as a narrow override layer. Every rule needs !important to win over
   an inline declaration — that is expected here, not a smell.

   Many grids already use repeat(auto-fit, minmax(...)) and collapse on
   their own; the rules below only handle the fixed-column rows that cannot.

   Breakpoints
     ≤ 900px  tablet: fixed two-column rows collapse
     ≤ 640px  phone: tighter rhythm, smaller mark, larger touch targets
   -------------------------------------------------------------------- */

/* Never let a stray wide child create a horizontal scrollbar. */
html, body { overflow-x: hidden; }
#root img, #root svg { max-width: 100%; }

/* ── Tablet and below ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Service rows open on tap here, so the chevron affordance is required even
     if the browser reports hover capability (desktop devtools emulation). */
  #root [data-expand-chev] { display: flex !important; }
  #root [data-process-chev] { display: flex !important; }
  /* Fixed multi-column rows become a single column.
     Two exclusions, both of which are structure rather than content columns:
       "1px minmax(...)"  the hairline rule beside each service tier
       "34px 1fr"         the step number beside its description */
  #root [style*="grid-template-columns"]:not([style*="1px minmax"]):not([style*="34px 1fr"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Explicit grid placement on a child survives the single-column collapse
     above: the placed element is pinned to the (now 0px) first track while its
     sibling takes an implicit second one, so the About headshots rendered 0×0.
     Reset both the shorthand the browser actually serializes (gridColumn +
     gridRow normalise to `grid-area`) and the explicit row hook. */
  #root [style*="grid-area"] { grid-area: auto !important; }
  #root [data-founder-row] > * { grid-area: auto !important; }

  /* The Instagram tiles stay 2×2 — four stacked squares would be a screen
     and a half of scrolling. Higher specificity beats the rule above. */
  #root footer [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Editorial gaps are sized for side-by-side columns. */
  #root [style*="gap: 44px 56px"],
  #root [style*="gap: 36px 56px"],
  #root [style*="gap: 36px"] { gap: 32px !important; }

  /* Hero copy no longer needs to clear a tall desktop header. */
  #root [style*="padding: 230px"] { padding-top: 150px !important; }
}
/* ── Phone ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Tighten gutters and the vertical scale. Most page padding is expressed
     through these tokens, so re-pointing them rescales the whole site. */
  #root {
    --gutter: 22px;
    --space-11: 72px;
    --space-10: 56px;
    --space-9: 44px;
    --space-8: 34px;
    --space-7: 26px;
  }

  /* Header: the full-size seal dominates a 390px viewport. */
  #root header { padding: 14px 20px !important; gap: 14px !important; }
  #root header > a { gap: 12px !important; }
  #root header > a > img:first-child { height: 66px !important; }
  #root header > a > img + img { height: 20px !important; }
  #root header button { padding: 12px 16px !important; letter-spacing: .14em !important; }

  /* Hero: shorter, and the copy sits closer under the mark. Keyed off explicit
     attribute hooks — a [style*="height: 82vh"] substring also matches
     "min-height: 82vh", which pinned the auto-growing hero to a fixed box.
     The hero keeps min-height only, so long mobile copy pushes the page down.
     PageHeader carries overflow:hidden, so its fixed height is released to a
     minimum here rather than shrunk — it grows instead of clipping the lede. */
  #root [data-hero] { min-height: 74vh !important; }
  #root [data-page-header] { height: auto !important; min-height: 66vh !important; }
  #root [style*="padding: 230px"] { padding-top: 126px !important; }

  /* Inset section frames crowd the copy at this width. */
  #root [style*="padding: var(--space-7)"] { padding: var(--space-6) !important; }

  /* Tracked uppercase labels wrap rather than push the layout wide. */
  #root button, #root a { white-space: normal !important; }

  /* Comfortable touch targets, and no iOS zoom-on-focus. */
  #root button { min-height: 44px !important; }
  #root input, #root select, #root textarea { font-size: 16px !important; }

  /* Fixed measures shrink to the viewport. */
  #root [style*="max-width: 1040px"],
  #root [style*="max-width: 1080px"],
  #root [style*="max-width: 1020px"],
  #root [style*="max-width: 860px"],
  #root [style*="max-width: 820px"] { max-width: 100% !important; }

  /* Tall and wide crops both read better closer to square on a phone — except
     the About headshots, which keep their portrait crop (a square crop cuts
     into the face) and instead sit centred at a contained width. */
  #root [style*="aspect-ratio: 4 / 5"] { aspect-ratio: 1 / 1 !important; }
  #root [data-portrait] { aspect-ratio: 4 / 5 !important; max-width: 300px; margin: 0 auto; }
  #root [data-portrait] + *, #root [data-portrait] { align-self: center !important; }
  #root [style*="aspect-ratio: 21 / 9"] { aspect-ratio: 3 / 2 !important; }
  #root [style*="aspect-ratio: 16 / 10"] { aspect-ratio: 4 / 3 !important; }

  /* Footer identity mark is sized for a third of a desktop row. */
  #root footer img[alt="Spring Street Design and Build"] { width: 180px !important; }

  /* Signatures are scaled for a two-column letter. */
  #root img[alt*="signature"] { width: 150px !important; }

  /* Menu panel gives its links more room. */
  #root aside { width: min(300px, 88vw) !important; }
}

/* ── Small phone ─────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  #root { --gutter: 16px; }
  #root header > a > img:first-child { height: 56px !important; }
  #root header > a > img + img { height: 17px !important; }
  #root header button { padding: 11px 13px !important; font-size: 10.5px !important; }
}