@media (min-width: 640px) {
  .menu-btn {
    display: none;
  }

  .nav-list {
    display: flex !important;
    flex-direction: row;
    gap: 0.25rem;
    padding-block: 0.35rem;
  }

  .nav-list a {
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 0.45rem 0.85rem;
  }

  .nav-list a:hover,
  .nav-list a:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
    border-bottom-color: var(--clr-peach);
  }

  .nav-list a.active {
    border-bottom-color: var(--clr-peach);
    background-color: rgba(0, 0, 0, 0.18);
    border-left-color: transparent;
  }

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

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

@media (min-width: 960px) {
  .member-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 640px) {
  .member-grid.list-view {
    grid-template-columns: 1fr;
  }
}

/* ─── Join page — larger layout ───────────────────── */
@media (min-width: 860px) {
  .join-layout {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }

  /* In the sidebar column, cards stack to a single column */
  .membership-cards {
    grid-template-columns: 1fr;
  }
}

/* ─── Discover page — medium layout (641–1024px) ──── */
@media (min-width: 641px) {
  /* Medium: 2-column grid; cards 3 and 6 span both columns */
  .discover-grid {
    grid-template-areas:
      "card1 card2"
      "card3 card3"
      "card4 card5"
      "card6 card6"
      "card7 card8";
    grid-template-columns: 1fr 1fr;
  }

  /* Wider cards show landscape image height */
  .discover-grid [style*="card3"] .discover-figure img,
  .discover-grid [style*="card6"] .discover-figure img {
    height: 220px;
  }
}

/* ─── Discover page — large layout (1025px+) ──────── */
@media (min-width: 1025px) {
  /* Large: 3-column; card1 and card4 span two columns */
  .discover-grid {
    grid-template-areas:
      "card1 card1 card2"
      "card3 card4 card4"
      "card5 card6 card7"
      "card8 card8 .  ";
    grid-template-columns: 1fr 1fr 1fr;
  }

  /* Image hover effect — only on larger screens */
  .discover-figure img {
    transition: transform 0.35s ease, filter 0.35s ease;
  }

  .discover-card:hover .discover-figure img,
  .discover-card:focus-within .discover-figure img {
    transform: scale(1.06);
    filter: brightness(1.1) saturate(1.2);
  }
}

/* ─── Home page — larger layout ───────────────────── */
@media (min-width: 640px) {
  .hero-img {
    height: 400px;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .hero-sub {
    font-size: 1.05rem;
  }

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

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

@media (min-width: 860px) {
  .hero-img {
    height: 420px;
  }

  /* Side-by-side: events left, weather right */
  .home-main-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    align-items: start;
  }

  /* Events and weather sit side by side */
  .home-section-events,
  .home-section-weather {
    border-bottom: none;
  }

  /* Spotlights spans full width below */
  .home-section-spotlights {
    grid-column: 1 / -1;
  }

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