/* ---------------------------------------------------------
   Responsive overrides
   Mobile-first base lives in layout.css/components.css;
   this file handles breakpoint-specific structural changes.
--------------------------------------------------------- */

/* ---- Laptop and below: collapse nav to hamburger ---- */
@media (max-width: 1023px) {
  .site-header__nav {
    display: none;
  }

  .site-header__actions .btn-primary {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .hero {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .hero__media {
    order: -1;
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* .premium-service-card's padding doesn't leave room for 3 columns until
     laptop width, so this grid collapses earlier than the generic .grid-3.
     minmax(0, ...) lets the track shrink below the card's title min-content
     width so long titles wrap instead of forcing the page wider. */
  .services-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Tablet and below ---- */
@media (max-width: 767px) {
  /* Phone number wraps onto multiple lines at this width; it's already
     reachable from the mobile menu and the contact page. */
  .site-header__topbar {
    display: none;
  }

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

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .cta-band {
    padding: var(--space-lg) var(--space-md);
  }

  .testimonial-card {
    padding: var(--space-md);
  }
}

/* ---- Mobile ---- */
@media (max-width: 479px) {
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .services-hub-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .section {
    padding-block: var(--space-xl);
  }

  .section--lg {
    padding-block: var(--space-2xl);
  }

  .testimonial-card blockquote {
    font-size: var(--text-lg);
  }
}