/* ==========================================================================
   Geek Partners — Responsive overrides
   The page layouts use hard-coded multi-column CSS grids in inline styles with
   no media queries, so they overflow on phones/tablets. These rules collapse
   those grids at smaller widths.

   Two things make this tricky, both handled below:
   1. The pages render through a React runtime that re-serializes inline styles
      WITH spaces (`grid-template-columns: repeat(4, 1fr)`), so selectors match
      both the spaced (rendered) and unspaced (raw source) forms.
   2. Grid items are `display:contents` <x-import> wrappers, so `min-width:0`
      on children doesn't help. We instead size tracks with `minmax(0, 1fr)`,
      which shrinks regardless of content min-content — the reliable fix.
   Purely additive — the design system is untouched.
   ========================================================================== */

@media (max-width: 900px) {
  html, body { overflow-x: hidden; }          /* safety net only */
  img, svg { max-width: 100%; height: auto; }
}

/* --- Hero split (Home): stack at tablet & below --- */
@media (max-width: 900px) {
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns:1.05fr 0.95fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Terminal card scrolls internally instead of forcing page width. */
  [style*="white-space: nowrap"],
  [style*="white-space:nowrap"] { overflow-x: auto !important; }
}

/* --- Grid collapse: phones & tablets (<=900px) --- */
@media (max-width: 900px) {
  /* Services / process / stats (4-up) -> 2-up */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Blog cards (3-up) -> 2-up */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Footer (brand + 2 link cols) -> stacked */
  [style*="grid-template-columns: 1.6fr 1fr 1fr"],
  [style*="grid-template-columns:1.6fr 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Case study: label / body two-column sections -> stacked */
  [style*="grid-template-columns: 240px 1fr"],
  [style*="grid-template-columns:240px 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Case study: paired screenshots -> stacked */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Case study hero meta (Client/Timeline/Engagement/Year) 4-up -> 2-up */
  [style*="grid-template-columns: repeat(4, auto)"],
  [style*="grid-template-columns:repeat(4,auto)"] {
    grid-template-columns: repeat(2, auto) !important;
  }
}

/* --- Narrow phones (<=500px): single column for text-heavy card grids --- */
@media (max-width: 500px) {
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}