/* ==========================================================================
   Ivory Dental Studio — Responsive overrides (min-width breakpoints)
   640px  : large phones / small tablets
   900px  : tablets / small laptops
   1100px : desktop
   ========================================================================== */

/* ---------- ≥ 640px ---------- */
@media (min-width: 640px) {
  :root {
    --gutter: 2rem;
    --section-space: 5.5rem;
  }

  .hero-actions { display: flex; flex-wrap: wrap; }
  .hero-meta { grid-template-columns: repeat(2, auto); justify-content: start; gap: 1.5rem 2.5rem; }
  .hero-note { position: absolute; left: -1rem; bottom: 2rem; margin: 0; max-width: 300px; }

  .dentist-grid { grid-template-columns: 1fr 1fr; }
  .dentist-profile { padding: 1.5rem; }
  .profile-head { grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem 2rem; padding: 2rem; }
  .profile-intro { padding-right: 3rem; }
  .profile-stats { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .profile-block { padding: 1.75rem 2rem; }
  .cert-grid { grid-template-columns: 1fr 1fr; }
  .tech-grid { grid-template-columns: repeat(4, 1fr); }
  .clinic-collage { height: 420px; }
  .clinic-stats { gap: 1rem; }

  .media-grid { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 1rem; overflow: visible; }

  .treatment-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

  .steps { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

  .gallery-grid { grid-auto-rows: 200px; gap: 1rem; }

  .appointment-form { padding: 2.25rem 2rem; }
  .appointment-info { padding: 2.5rem 2.25rem; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .field-full { grid-column: 1 / -1; }

  .contact-actions { display: flex; flex-wrap: wrap; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { grid-template-columns: 1fr auto; align-items: center; padding-bottom: 2rem; padding-right: calc(var(--gutter) + 72px); }

  .float-btn { --float-bottom: 1.5rem; right: 1.5rem; }
}

/* ---------- ≥ 900px ---------- */
@media (min-width: 900px) {
  :root {
    --header-h: 84px;
    --section-space: 7rem;
  }

  .header-cta { display: inline-flex; }

  .hero { padding-top: 3rem; padding-bottom: 4rem; }
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; }
  .hero-figure { aspect-ratio: 4 / 4.7; }

  .section-head {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 3rem;
    margin-bottom: 3.5rem;
  }
  .section-head-center { grid-template-columns: 1fr; gap: 1.25rem; }
  .section-head .section-intro { justify-self: end; }
  .section-head-center .section-intro { justify-self: center; }

  .dentist-profile { padding: 2rem; }
  .profile-photo { width: 160px; }
  .profile-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.25rem; }
  .profile-block-wide { grid-column: 1 / -1; }
  .cert-grid { grid-template-columns: repeat(3, 1fr); }
  .clinic-intro { grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 4rem; }
  .clinic-collage { height: 460px; }
  .clinic-stats { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 3rem; }

  .review-track { grid-auto-columns: calc((100% - 1.25rem) / 2); gap: 1.25rem; }
  .media-grid { max-width: 60rem; margin-inline: auto; gap: 1.5rem; }
  .media-grid-photos { margin-top: 1.5rem; }

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

  .why-grid { grid-template-columns: 0.9fr 1.1fr; gap: 5rem; align-items: start; }
  .why-intro { position: sticky; top: calc(var(--header-h) + 2rem); }
  .why-list { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .why-list li:nth-last-child(2) { border-bottom: 1px solid var(--line-light); }

  .steps { grid-template-columns: repeat(4, 1fr); position: relative; }
  .step { padding: 2rem 1.75rem 2.25rem; }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 250px);
    gap: 1.25rem;
  }
  /* Layout: a a b / c d b / c e f */
  .g-a { grid-column: 1 / 3; grid-row: 1; }
  .g-b { grid-column: 3; grid-row: 1 / 3; }
  .g-c { grid-column: 1; grid-row: 2 / 4; }
  .g-d { grid-column: 2; grid-row: 2; }
  .g-e { grid-column: 2; grid-row: 3; }
  .g-f { grid-column: 3; grid-row: 3; }
  .gallery-item figcaption { left: 1rem; bottom: 1rem; font-size: 0.78rem; }

  .faq-grid { grid-template-columns: 0.8fr 1.2fr; gap: 5rem; align-items: start; }
  .faq-intro { position: sticky; top: calc(var(--header-h) + 2rem); }

  .appointment-wrap { grid-template-columns: 0.85fr 1.15fr; gap: 2.5rem; align-items: stretch; }
  .appointment-info { padding: 3rem 2.75rem; }
  .appointment-form { padding: 2.75rem; }

  .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: stretch; }
  .contact-map, .contact-map iframe { min-height: 100%; }
  .contact-map { min-height: 480px; }

  .footer-grid { grid-template-columns: 1.4fr 0.8fr 1fr 1.2fr; gap: 3rem; }
}

/* ---------- Desktop navigation (≥ 1100px) ---------- */
@media (min-width: 1100px) {
  .nav-toggle { display: none; }

  .primary-nav {
    position: static;
    inset: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav-list { display: flex; gap: 2.25rem; }
  .nav-link {
    position: relative;
    padding: 0.5rem 0;
    border: 0;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 500;
  }
  .nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0.2rem;
    height: 1px;
    background: var(--sage-deep);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }
  .nav-link:hover,
  .nav-link.is-active { color: var(--sage-deep); }
  .nav-link:hover::after,
  .nav-link.is-active::after { transform: scaleX(1); }
  .nav-mobile-extra { display: none; }

  .treatment-grid { grid-template-columns: repeat(4, 1fr); }
  .review-track { grid-auto-columns: calc((100% - 2.5rem) / 3); }
  .treatment-body { padding: 1.5rem 1.4rem 1.6rem; }
  .treatment-title { font-size: 1.55rem; }

  .whatsapp-float:hover,
  .whatsapp-float:focus-visible { width: 178px; }
  .call-float:hover,
  .call-float:focus-visible { width: 140px; }
  .float-btn:hover .float-btn-label,
  .float-btn:focus-visible .float-btn-label { opacity: 1; }
}

/* ---------- Wide screens ---------- */
@media (min-width: 1400px) {
  :root { --container: 1280px; }
}