/*
  Mobile-first breakpoints. Base styles are for small screens; these rules
  progressively add the wider layouts shown in the supplied mockup.
*/

@media (max-width: 420px) {
  .brand img {
    width: 98px;
  }

  .button {
    width: 100%;
  }

  .map-promo-stat {
    font-size: 2.25rem;
  }
}

@media (min-width: 620px) {
  .container,
  .narrow {
    width: min(100% - 48px, var(--container));
  }

  h1 {
    font-size: 3.05rem;
  }

  h2 {
    font-size: 2.35rem;
  }

  .feature-strip,
  .program-grid,
  .two-column,
  .form-grid,
  .place-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

@media (min-width: 820px) {
  .nav-toggle {
    display: none;
  }

  .primary-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .primary-nav a {
    padding: 10px 0;
  }

  .header-cta {
    display: inline-flex;
    min-height: 44px;
    padding-inline: 22px;
  }

  .hero-grid {
    grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
  }

  .hero-copy {
    margin-right: -88px;
    padding: 28px 0;
  }

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

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

  .map-promo {
    grid-template-columns: auto minmax(0, 1.1fr) minmax(260px, 0.9fr);
    align-items: center;
  }

  .map-promo-copy {
    padding-right: 32px;
    border-right: 1px solid var(--line);
  }

  .split-layout,
  .form-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

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

  .global-map-card {
    grid-template-columns: minmax(220px, 0.8fr) minmax(360px, 1.35fr) minmax(300px, 0.9fr);
    min-height: 292px;
  }

  .footer-grid {
    grid-template-columns: 1.1fr 0.75fr 1.2fr 0.7fr;
  }
}

@media (min-width: 1080px) {
  h1 {
    font-size: 3.65rem;
  }

  h2 {
    font-size: 2.75rem;
  }

  .section {
    padding: 72px 0;
  }

  .feature-card,
  .map-promo,
  .cta-card,
  .text-card,
  .info-card,
  .contact-details,
  .form-card,
  .map-info-card {
    padding: 28px;
  }

  .global-map-card {
    padding: 32px;
  }
}