/* ==========================================================================
   DERMATREATZ — Responsive (mobile-first breakpoints)
   ========================================================================== */

/* Large desktop down */
@media (max-width: 1100px) {
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .services__grid { grid-template-columns: repeat(3, 1fr); }
  .conditions__grid { grid-template-columns: repeat(4, 1fr); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__col--social { grid-column: span 3; }
}

/* Tablet */
@media (max-width: 900px) {
  .nav__menu, .nav__actions .nav__cta { display: none; }
  .nav__burger { display: block; }
  .nav__actions .btn--gold.nav__cta { display: none; }

  .hero { padding-top: 120px; }
  .hero__grid { grid-template-columns: 1fr; gap: 54px; }
  .hero__visual { max-width: 460px; margin: 0 auto; width: 100%; }

  .doctor__grid { grid-template-columns: 1fr; gap: 44px; }
  .doctor__visual { max-width: 440px; margin-inline: auto; }

  .book__grid { grid-template-columns: 1fr; gap: 40px; }

  .treatments__grid { grid-template-columns: repeat(2, 1fr); }
  .testi__card { grid-template-columns: 1fr; gap: 26px; }
  .testi__item:nth-child(n+2) { display: none; }

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

/* Mobile */
@media (max-width: 640px) {
  :root { --section-y: clamp(60px, 12vw, 90px); }

  .why__grid { grid-template-columns: 1fr; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .conditions__grid { grid-template-columns: repeat(2, 1fr); }
  .treatments__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col--brand { grid-column: span 2; }
  .footer__col--social { grid-column: span 2; }

  .hero__badges { grid-template-columns: 1fr; }
  .hero__float--doc { left: 8px; bottom: 12px; }
  .hero__float--rating { right: 8px; top: 12px; }
  .hero__cta .btn { flex: 1; }

  .nav__brand-tag { display: none; }
  .to-top { bottom: 150px; }
  .float-wa { bottom: 84px; }
  .mobile-bar { display: flex; }

  .testi__nav { flex-direction: column-reverse; gap: 18px; }
}

/* Small services fit */
@media (max-width: 400px) {
  .services__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__col--brand, .footer__col--social { grid-column: span 1; }
}