/* Responsive adjustments for Clubs at SNG */

@media (max-width: 1024px) {
  .hero-grid,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .table-row {
    grid-template-columns: 1fr 1fr;
    row-gap: 0.25rem;
  }
}

@media (max-width: 820px) {
  :root {
    --header-h: 72px;
  }

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

  .main-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--header-h) + 1px);
    background: var(--sng-navy);
    border-bottom: 1px solid #1f3d63;
    box-shadow: 0 8px 18px rgba(8, 26, 44, 0.08);
    display: none;
    padding: 0.5rem 0.9rem 0.9rem;
  }

  .main-nav.open {
    display: block;
  }

  .main-nav ul {
    display: block;
  }

  .main-nav li {
    margin: 0.35rem 0;
  }

  .main-nav a {
    width: 100%;
    padding: 0.65rem 0.7rem;
    color: #e7f0fb;
  }

  .main-nav a:hover,
  .main-nav a:focus,
  .main-nav a.active {
    background: #1c3b61;
    color: #ffffff;
  }

  .hero-grid,
  .grid-3,
  .grid-2,
  .grid-4,
  .form-grid,
  .footer-grid,
  .photo-grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 3rem 0;
  }
}

@media (max-width: 520px) {
  .container {
    width: min(94%, 1180px);
  }

  .hero {
    padding-top: 3.8rem;
  }

  .btn {
    width: 100%;
  }

  .controls {
    align-items: stretch;
  }

  .hero-meta {
    gap: 0.55rem;
  }
}