/* ==========================================================================
   responsive.css — mobile-first breakpoints
   Base styles in styles.css target the smallest (320px) viewport.
   This file layers on enhancements at wider viewports.
   Verified target widths: 320, 375, 390, 430, 768, 1024, 1280, 1440, 1920.
   ========================================================================== */

/* Tablet: 768px and up */
@media (min-width: 768px) {
  /* minmax(0, 1fr) throughout this file, not plain 1fr — several of
     these columns hold large source photos or long unbreakable
     words, whose intrinsic size would otherwise become that track's
     minimum width and could force the grid wider than its container
     right at this breakpoint. */
  .two-col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .feature-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

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

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

  .stat-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .team-card {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .team-card__photo {
    min-height: 100%;
  }

  .site-footer__inner {
    flex-wrap: nowrap;
  }
}

/* Desktop: 1024px and up — primary nav replaces mobile nav */
@media (min-width: 1024px) {
  .main-nav {
    display: block;
  }

  .nav-toggle {
    display: none;
  }

  .mobile-nav {
    display: none !important;
  }
}

/* Large desktop: 1280px and up */
@media (min-width: 1280px) {
  :root {
    --container-pad: clamp(1.25rem, 6vw, 4rem);
  }
}

/* Extra-large desktop: 1920px and up — cap content width, avoid stretch */
@media (min-width: 1920px) {
  .container {
    max-width: 1360px;
  }
}