/* Responsive corrections.
 *
 * The sections carry their layout as React inline styles, so a plain rule can
 * never win against them — these overrides need !important by construction.
 * Scope: only the multi-column grids that are hard-coded to two-plus columns
 * and have no auto-fit fallback (hero/stats/services already collapse on their
 * own). Keep this file to layout collapse only; visual design lives in tokens.
 */

/* Showcase: case list beside detail pane -> stacked. */
@media (max-width: 900px) {
  #insights > div > div:last-child {
    grid-template-columns: 1fr !important;
  }
}

/* Contact: copy column beside intake form -> stacked, tighter gap. */
@media (max-width: 900px) {
  #contact > div {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
}

/* Services intro: heading beside paragraph -> stacked. */
@media (max-width: 760px) {
  #services > div > div > div {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* Footer: brand column + 4 link columns -> 2 columns, then 1. */
@media (max-width: 900px) {
  footer > div > div:first-child {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2.5rem !important;
  }
}
@media (max-width: 520px) {
  footer > div > div:first-child {
    grid-template-columns: 1fr !important;
  }
}

/* Nav: the link row does not fit next to the logo and CTA on a phone. */
@media (max-width: 820px) {
  nav > div:nth-child(2) {
    display: none !important;
  }
}

/* Section padding is 8rem top/bottom at every width; too much on a phone. */
@media (max-width: 640px) {
  section {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}