/* =========================================================
   RESPONSIVE — breakpoints tested at 320/375/390/414/480/
   768/1024/1280/1440/1920
   ========================================================= */

html, body { max-width: 100%; overflow-x: hidden; }

/* ----- Large desktop refinement ----- */
@media (min-width: 1441px) {
  :root { --container-w: 1320px; }
}

/* ----- Laptop / small desktop ----- */
@media (max-width: 1280px) {
  .bento-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { gap: 0; }
}

/* ----- Tablet landscape ----- */
@media (max-width: 1024px) {
  :root { --header-h: 78px; }
  .main-nav ul { gap: 0; }
  .main-nav a { padding: 9px 12px; font-size: 0.88rem; }
  .header-cta { padding: 11px 18px; font-size: 0.86rem; }
  .about-split, .doctor-hero-split, .appointment-grid, .contact-grid, .split-2 { grid-template-columns: 1fr; gap: 40px; }
  .doctor-hero-card { position: static; max-width: 380px; margin: 0 auto; }
  .why-grid, .value-grid, .process-grid, .facilities-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-body { padding: 0 32px 32px; }
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
  .gallery-masonry { column-count: 2; }
  .treatments-scroll { grid-template-columns: repeat(6, minmax(260px, 1fr)); }
}

/* ----- Tablet portrait / large mobile ----- */
@media (max-width: 900px) {
  .section { padding: 72px 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .stat-item:nth-child(2)::after { display: none; }
  .checklist { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 44px; column-gap: 24px; }
  .timeline::before { display: none; }
}

/* ----- Header / nav collapse ----- */
@media (max-width: 860px) {
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
  .header-cta { display: none; }
  .floating-actions { display: none; }
  .mobile-bottom-bar { display: flex; }
  main, .site-header ~ * { }
  body { padding-bottom: 78px; } /* room for sticky bottom bar */
  .back-to-top { bottom: 90px; }
}

/* ----- Mobile (portrait) ----- */
@media (max-width: 768px) {
  .container { padding: 0 18px; }
  h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  h2 { font-size: clamp(1.6rem, 6vw, 2rem); }

  .hero-slider { min-height: 560px; height: 92svh; }
  .hero-slide-content { padding-top: calc(var(--header-h) + 10px); max-width: 100%; }
  .hero-slide-actions { flex-direction: column; align-items: stretch; }
  .hero-slide-actions .btn { width: 100%; text-align: center; }
  .hero-controls { bottom: 96px; }
  .hero-scroll-hint { display: none; }

  .page-hero { min-height: 40vh; }
  .page-hero-inner { padding: 40px 0; }

  .about-split { gap: 60px 0; }
  .about-image-frame { max-width: 340px; margin: 0 auto; }
  .about-badge-card { left: 50%; transform: translateX(-50%); bottom: -22px; }

  .bento-grid, .why-grid, .value-grid, .process-grid, .facilities-grid,
  .contact-cards, .two-col-list { grid-template-columns: 1fr; }

  .treatments-scroll { grid-template-columns: repeat(6, 82vw); gap: 16px; }

  .blog-grid { grid-template-columns: 1fr; }
  .blog-featured-body { padding: 0 22px 28px; }

  .gallery-masonry { column-count: 1; }

  .footer-grid { grid-template-columns: 1fr; gap: 34px; padding: 48px 0 30px; }
  .footer-cta-inner { flex-direction: column; text-align: center; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }

  .appointment-form-card, .contact-form-card { padding: 26px; }
  .form-row { grid-template-columns: 1fr; }

  .timeline { grid-template-columns: 1fr; gap: 36px; }

  .appointment-info, .appointment-form-card { width: 100%; max-width: 100%; }
  .availability-card { flex-wrap: wrap; }

  .cta-banner { padding: 42px 24px; }

  .testimonial-card { padding: 30px 24px; }
  .testimonial-text { font-size: 1.05rem; }

  .doctor-hero-card { max-width: 100%; }
  .mini-stats { grid-template-columns: repeat(3, 1fr); }

  .lightbox-prev, .lightbox-next { width: 42px; height: 42px; }
  .lightbox-close { top: 16px; right: 16px; }
}

/* ----- Small phones ----- */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section { padding: 60px 0; }
  .eyebrow { font-size: 0.72rem; padding: 6px 14px; }
  .stat-value { font-size: 1.9rem; }
  .footer-cta h2 { font-size: 1.4rem; }
  .service-card, .why-card, .value-card { padding: 26px 20px; }
  .appointment-form-card, .contact-form-card { padding: 20px; border-radius: var(--radius); }
  .mbb-item span { font-size: 0.66rem; }
}

/* ----- Very small phones ----- */
@media (max-width: 375px) {
  .brand-text small { display: none; }
  .hero-eyebrow { font-size: 0.68rem; padding: 6px 12px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ----- Fine pointer / desktop-only cursor ----- */
@media (hover: hover) and (pointer: fine) and (min-width: 861px) {
  .custom-cursor.enabled { display: block; }
}