/* ========================================
   IDA Ahmedabad — Responsive
   ======================================== */

@media (min-width: 1600px) {
  :root {
    --container: 1440px;
  }
}

@media (max-width: 1599px) {
  :root {
    --container: 1320px;
  }
}

@media (max-width: 1200px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

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

@media (max-width: 980px) {
  .split,
  .split--reverse,
  .benefits,
  .media-grid,
  .duo-cards,
  .cta-band__inner,
  .bearer-featured,
  .contact-layout,
  .download-grid {
    grid-template-columns: 1fr;
  }

  .membership-panel {
    position: static;
  }

  .split--reverse .split__media {
    order: -1;
  }

  .highlight-panel {
    grid-template-columns: 1fr;
  }

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

  .gallery--wide figure:first-child {
    grid-column: auto;
  }

  .gallery--wide figure:first-child img {
    aspect-ratio: 4 / 3;
  }
}

/* Mobile navigation */
@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    z-index: 99;
    max-height: 0;
    overflow: hidden;
    background: var(--color-surface);
    border-bottom: 0 solid var(--color-border);
    opacity: 0;
    visibility: hidden;
    transition:
      max-height 280ms var(--ease-out),
      opacity 200ms ease,
      visibility 200ms ease,
      border-width 200ms ease;
  }

  .site-nav.is-open {
    max-height: min(100vh - var(--header-h), 28rem);
    opacity: 1;
    visibility: visible;
    border-bottom-width: 1px;
    box-shadow: var(--shadow-md);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-3) var(--space-4) var(--space-5);
  }

  .site-nav__link {
    padding: 0.9rem 1rem;
    border-radius: var(--radius-md);
  }

  body.nav-open {
    overflow: hidden;
  }

  .brand__text {
    max-width: 11rem;
  }

  .stats {
    margin-top: -2rem;
  }
}

@media (max-width: 700px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .dentist-grid,
  .role-grid,
  .gallery,
  .download-grid {
    grid-template-columns: 1fr;
  }

  .container {
    width: min(100% - 1.5rem, var(--container));
  }

  .hero {
    min-height: min(94vh, 40rem);
    align-items: flex-end;
  }

  .hero__inner {
    padding-block: 5.5rem 2.75rem;
    max-width: none;
  }

  .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }

  .stats__grid,
  .quick-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .page-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-field {
    min-width: 0;
    width: 100%;
  }

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

  .site-footer__top {
    flex-direction: column;
  }

  .footer-nav {
    flex-direction: column;
    gap: var(--space-3);
  }

  .map-panel .btn {
    width: 100%;
    white-space: normal;
    height: auto;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .stats__grid,
  .quick-grid {
    grid-template-columns: 1fr;
  }

  .brand__logo {
    width: 2.75rem;
  }

  .stat {
    padding: var(--space-2);
  }
}