/* responsive.css — Breakpoints and mobile navigation */

@media (max-width: 320px) {
  .container { padding-inline: 14px; }
}

@media (min-width: 768px) {
  .container { max-width: 720px; }
}

@media (min-width: 1024px) {
  .container { max-width: 1140px; padding-inline: var(--space-6); }
}

@media (min-width: 1440px) {
  .container { max-width: 1320px; }
  .grid { gap: var(--space-5); }
}

@media (min-width: 1920px) {
  .container { max-width: 1480px; }
  .grid { gap: var(--space-6); }
}

@media (min-width: 2560px) {
  .container { max-width: 1480px; }
}

@media (max-width: 1023px) {
  main.container {
    padding-block: var(--space-8) var(--space-9);
  }

  .grid .card,
  .grid .card-third,
  .grid .card-full {
    grid-column: span 12;
  }

  .col-6, .col-4, .col-3 {
    grid-column: span 12;
  }
}

@media (max-width: 860px) {
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-mobile {
    display: grid;
    gap: var(--space-2);
  }

  .nav-phone {
    display: none;
  }

  .field-half {
    grid-column: span 12;
  }

  .leadership-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .leadership-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: 16px;
  }

  .btn {
    padding: 10px 12px;
  }
}