/* ==========================================================================
   responsive.css — Breakpoint overrides for layout-level components
   Typography already scales fluidly via clamp() in variables.css.
   Tested at: 320, 375, 390, 414, 768, 1024, 1280, 1440, 1920px
   (docs/DESIGN-SYSTEM.md §8 — no mobile/tablet reference frames were
   supplied, so exact behavior below is a reasonable, documented assumption).
   ========================================================================== */

/* ---- Mobile (default, up to 767px) ---- */
.container {
  padding-inline: var(--container-padding-inline-mobile);
}

.card-grid,
.card-grid--3,
.card-grid--4 {
  grid-template-columns: 1fr;
}

.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

.site-footer__grid {
  text-align: center;
}

.site-footer__address-item {
  justify-content: center;
}

.footer-cta__quote {
  font-size: var(--fs-h4);
  padding-inline: var(--spacing-sm);
}

/* ---- Small phones needing extra breathing room ---- */
@media (min-width: 375px) {
  .container {
    padding-inline: var(--container-padding-inline-mobile);
  }
}

/* ---- Tablet (768px+) ---- */
@media (min-width: 768px) {
  .container {
    padding-inline: var(--container-padding-inline-tablet);
  }

  .card-grid,
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__address-item {
    justify-content: flex-start;
  }
}

/* ---- Small desktop / large tablet (1024px+) ----
   NOTE: container padding intentionally stays at the tablet value (40px,
   not the full 80px) through this tier. At exactly 1024px viewport width,
   the full desktop header (two nav columns + socials + CTA button) needs
   more of the viewport than an 80px-per-side inset leaves; measured during
   Phase 2 QA and fixed here rather than shrinking the nav itself. Full
   80px side padding only kicks in at 1280px, see below. */
@media (min-width: 1024px) {
  .card-grid--3,
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .card-grid--4,
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .site-footer__grid {
    text-align: left;
  }
}

/* ---- Desktop (1280px+) ---- */
@media (min-width: 1280px) {
  :root {
    --spacing-2xl: 96px;
    --spacing-3xl: 140px;
  }

  .container {
    padding-inline: var(--container-padding-inline);
  }

  .site-nav {
    gap: var(--spacing-2xl);
  }
}

/* ---- Wide desktop (1920px reference width) ---- */
@media (min-width: 1920px) {
  .container {
    max-width: var(--container-width);
  }
}
@media (max-width: 767px){
  .site-footer__grid{text-align: start !important;}
  .site-footer__address-item{justify-content: start !important;}
}