/* ==========================================================================
   EIGHTAA — Responsive breakpoints
   Tested at: 320 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440+
   ========================================================================== */

/* -------------------------------------------------------------- */
/* 1280px and below — tighten desktop nav gaps                     */
/* -------------------------------------------------------------- */
@media (max-width: 1280px) {
  .main-nav > ul {
    gap: 1.4rem;
  }

  .pillars .container {
    gap: 1.1rem;
  }

  .editorial-item {
    grid-template-columns: 160px 1fr;
  }
}

/* -------------------------------------------------------------- */
/* 1024px — tablet: collapse to hamburger, stack major grids        */
/* -------------------------------------------------------------- */
@media (max-width: 1024px) {
  .main-nav {
    display: none;
  }

  .hamburger {
    display: inline-flex;
  }

  .utility-contact span.utility-label {
    display: none;
  }

  .hero .container {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    order: -1;
    min-height: clamp(340px, 60vw, 460px);
  }

  .hero-badge {
    left: -2%;
    top: 32%;
  }

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

  .pillar:nth-child(4),
  .pillar:nth-child(5) {
    grid-column: span 1;
  }

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

  .about-image {
    order: -1;
    aspect-ratio: 16/10;
  }

  .about-full-grid {
    grid-template-columns: 1fr;
  }

  .about-full-image {
    order: -1;
    aspect-ratio: 16/10;
  }

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

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

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

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

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

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

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

  .editorial-image {
    position: static;
    aspect-ratio: 16/9;
  }

  .experience-layout {
    grid-template-columns: 1fr;
  }

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

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

  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    row-gap: 2.4rem;
  }

  .footer-col:nth-child(4) {
    grid-column: span 3;
  }
}

/* -------------------------------------------------------------- */
/* 768px — small tablet / large phone                               */
/* -------------------------------------------------------------- */
@media (max-width: 768px) {
  .utility-bar .container {
    padding-block: 0.45rem;
  }

  .utility-contact {
    gap: 0.6rem;
  }

  .brand img {
    width: 50px;
    height: 50px;
  }

  .brand-name {
    font-size: 1.2rem;
  }

  .brand-sub {
    font-size: 0.62rem;
  }

  .brand-tag {
    display: none;
  }

  .header-inner {
    padding-block: 0.65rem;
  }

  .pillars {
    border-radius: 12px;
  }

  .pillars .container {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem 1.1rem;
  }

  .section {
    padding-block: clamp(1.8rem, 6vw, 2.6rem);
  }

  .section-intro {
    align-items: flex-start;
  }

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

  .directory-tools {
    flex-direction: column;
    align-items: stretch;
  }

  #directory-district-filter {
    min-width: 0;
  }

  .district-summary {
    padding: 0.85rem 1rem;
    flex-wrap: wrap;
  }

  .member-table thead th,
  .member-table tbody td {
    padding: 0.6rem 0.9rem;
  }

  .pillars-static {
    grid-template-columns: 1fr;
  }

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

  .contact-info-grid {
    grid-template-columns: 1fr;
  }

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

  .editorial-image {
    position: static;
    aspect-ratio: 16/10;
  }

  .editorial-item {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .milestone-item {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .experience-grid-small {
    grid-template-columns: 1fr;
  }

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

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
  }

  .gallery-item.wide {
    grid-column: span 2;
  }

  .gallery-item.tall {
    grid-row: span 1;
  }

  .membership-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .membership-actions .btn {
    justify-content: center;
  }

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

  .footer-col:nth-child(4) {
    grid-column: span 2;
  }

  .footer-brand {
    grid-column: span 2;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* -------------------------------------------------------------- */
/* 430px and below — phones                                          */
/* -------------------------------------------------------------- */
@media (max-width: 430px) {
  :root {
    --container: 90vw;
  }

  .hero {
    padding-block: 1.8rem 0;
  }

  .hero-heading {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
  }

  .hero-actions .btn-primary {
    width: 100%;
    justify-content: center;
  }

  .hero-visual {
    min-height: 300px;
  }

  .hero-badge {
    width: 92px;
    height: 92px;
    left: -3%;
  }

  .pillars .container {
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem 1rem;
  }

  .pillar-icon {
    width: 38px;
    height: 38px;
  }

  .about-image {
    border-radius: 0 50px 0 50px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 120px;
  }

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

  .footer-col:nth-child(4),
  .footer-brand {
    grid-column: span 1;
  }

  .lightbox-prev,
  .lightbox-next {
    width: 38px;
    height: 38px;
  }
}

/* -------------------------------------------------------------- */
/* 375px / 320px — smallest phones                                   */
/* -------------------------------------------------------------- */
@media (max-width: 375px) {
  .brand-name {
    font-size: 1.05rem;
  }

  .brand img {
    width: 44px;
    height: 44px;
  }

  .hero-eyebrow {
    font-size: 1.4rem;
  }

  .hero-desc {
    font-size: 0.95rem;
  }

  .section-heading {
    font-size: clamp(1.6rem, 7vw, 2rem);
  }

  .pillars .container {
    grid-template-columns: 1fr;
  }

  .mobile-nav {
    width: 100vw;
  }
}