/* ================================================================
   SANKET AYURVEDIC CLINIC — responsive.css
   Breakpoints: Mobile < 768px | Tablet 768–1024px | Desktop > 1024px
   ================================================================ */

/* ============================================================
   TABLET — 768px to 1024px
   ============================================================ */
@media (max-width: 1024px) {

  /* Nav */
  .nav-cta { display: none; }

  /* Hero */
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
    padding-top: 60px;
    padding-bottom: 80px;
  }
  .hero-content { order: 2; }
  .hero-image-wrap { order: 1; }
  .hero-subtitle { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-phone { display: flex; justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-image-card { max-width: 340px; }
  .hero-doctor-img { height: 420px; }

  /* About */
  .about-container {
    grid-template-columns: 1fr;
    gap: 50px;
    text-align: center;
  }
  .about-img { height: 420px; }
  .about-credentials li { justify-content: center; }
  .about-exp-badge { right: 10px; bottom: -15px; }

  /* Treatments */
  .treatments-grid { grid-template-columns: repeat(2, 1fr); }

  /* Why */
  .why-grid { grid-template-columns: repeat(2, 1fr); }

  /* Process */
  .process-steps { flex-wrap: wrap; gap: 10px; }
  .process-connector { display: none; }
  .process-step { min-width: calc(50% - 20px); max-width: calc(50% - 10px); }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; }
  .contact-map { min-height: 360px; }
  .map-placeholder { min-height: 360px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ============================================================
   MOBILE — up to 767px
   ============================================================ */
@media (max-width: 767px) {

  /* Base */
  .section-pad { padding: 56px 0; }
  .section-header { margin-bottom: 36px; }
  .section-title { font-size: 1.7rem; }

  /* ---- HEADER ---- */
  .nav-cta { display: none; }
  .hamburger { display: flex; }

  .main-nav {
    position: fixed;
    top: 72px; left: 0; right: 0;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s cubic-bezier(.4,0,.2,1), padding .4s ease;
    box-shadow: 0 8px 30px rgba(0,0,0,.08);
    border-top: 1px solid var(--border);
  }
  .main-nav.open {
    max-height: 440px;
    padding: 16px 0 20px;
  }

  .nav-list { flex-direction: column; gap: 0; padding: 0 16px; }
  .nav-link {
    display: block;
    padding: 13px 16px;
    font-size: .95rem;
    border-radius: 10px;
    border-bottom: 1px solid var(--border);
  }
  .nav-list li:last-child .nav-link { border-bottom: none; }

  /* Mobile CTA in nav */
  .main-nav::after {
    content: '';
    display: block;
    height: 1px;
  }

  /* ---- HERO ---- */
  .hero { min-height: auto; padding-top: 72px; }
  .hero-container {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 40px;
    padding-bottom: 80px;
    text-align: center;
  }
  .hero-content { order: 2; }
  .hero-image-wrap { order: 1; }

  .hero-title { font-size: 2rem; }
  .hero-badge { font-size: .72rem; }
  .hero-subtitle { font-size: .9rem; margin-left: auto; margin-right: auto; }
  .hero-actions { flex-direction: column; align-items: center; gap: 12px; }
  .hero-actions .btn { width: 100%; max-width: 320px; justify-content: center; }
  .hero-phone { display: flex; justify-content: center; }
  .hero-stats { justify-content: center; gap: 16px; }
  .stat-num { font-size: 1.4rem; }

  .hero-image-card { max-width: 280px; }
  .hero-doctor-img { height: 340px; }
  .hero-leaf-deco { font-size: 3rem; top: -10px; right: -10px; }
  .hero-badge-floating { font-size: .72rem; padding: 8px 14px; }

  /* ---- ABOUT ---- */
  .about-container {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }
  .about-img { height: 320px; }
  .about-credentials li { justify-content: flex-start; text-align: left; }
  .about-exp-badge { right: 0; bottom: -16px; }

  /* ---- TREATMENTS ---- */
  .treatments-grid { grid-template-columns: 1fr; gap: 16px; }
  .treatment-card { padding: 22px 20px; }

  /* ---- WHY AYURVEDA ---- */
  .why-grid { grid-template-columns: 1fr; gap: 16px; }
  .why-card { padding: 24px 20px; }

  /* ---- PROCESS ---- */
  .process-steps { flex-direction: column; align-items: center; gap: 16px; }
  .process-connector { display: none; }
  .process-step { max-width: 100%; min-width: 100%; }
  .step-num { font-size: 2rem; }

  /* ---- TESTIMONIALS ---- */
  .testimonial-card { padding: 28px 24px; }
  .testimonial-text { font-size: .9rem; }
  .testimonial-text::before { font-size: 3.5rem; }

  /* ---- CONTACT ---- */
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .contact-card { padding: 24px 20px; }
  .contact-map { min-height: 300px; }
  .map-placeholder { min-height: 300px; }
  .contact-cta-btns { flex-direction: column; }

  /* ---- FOOTER ---- */
  .footer-top { padding: 48px 0 32px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom-inner { flex-direction: column; text-align: center; gap: 8px; }

  /* ---- FLOATING BUTTONS ---- */
  .whatsapp-float { bottom: 16px; right: 16px; width: 50px; height: 50px; font-size: 1.3rem; }
  .scroll-top { bottom: 76px; right: 16px; }
  .whatsapp-tooltip { display: none; }
}

/* ============================================================
   SMALL MOBILE — up to 400px
   ============================================================ */
@media (max-width: 400px) {
  .container { padding: 0 16px; }
  .hero-title { font-size: 1.75rem; }
  .hero-image-card { max-width: 240px; }
  .hero-doctor-img { height: 300px; }
  .about-img { height: 280px; }
  .btn { padding: 12px 22px; font-size: .85rem; }
  .btn-lg { padding: 14px 26px; font-size: .9rem; }
}

/* ============================================================
   LARGE DESKTOP — 1280px+
   ============================================================ */
@media (min-width: 1280px) {
  .container { max-width: 1260px; }
  .hero-title { font-size: 4.2rem; }
  .treatments-grid { gap: 28px; }
  .why-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .site-header, .whatsapp-float, .scroll-top, .hero-actions, .slider-controls { display: none; }
  .section-pad { padding: 30px 0; }
  body { color: #000; }
  a { color: #000; }
}

/* ============================================================
   PREFERS REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   NEW SECTIONS — TABLET (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .gallery-item--large { grid-column: 1 / 3; grid-row: auto; height: 280px; }
  .gallery-item { height: 200px; }

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

  .appt-wrapper { grid-template-columns: 1fr; gap: 40px; }
  .appt-info .section-title { font-size: 1.8rem; }
}

/* ============================================================
   NEW SECTIONS — MOBILE (max 767px)
   ============================================================ */
@media (max-width: 767px) {
  /* Gallery */
  .gallery-grid { grid-template-columns: 1fr; gap: 12px; }
  .gallery-item--large { grid-column: auto; grid-row: auto; height: 200px; }
  .gallery-item { height: 160px; }

  /* Cases */
  .cases-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Appointment */
  .appt-form-wrap { padding: 28px 20px; }
  .appt-form .form-row { grid-template-columns: 1fr; gap: 0; }
  .radio-group { flex-direction: column; gap: 10px; }

  /* FAQ */
  .faq-question { font-size: .88rem; padding: 16px 18px; }
  .faq-answer { padding: 0 18px; }
  .faq-item.open .faq-answer { padding: 0 18px 16px; }

  /* Mobile Bottom Bar — SHOW on mobile */
  .mobile-bottom-bar {
    display: flex;
    gap: 8px;
  }
  /* Push content above the bar */
  body { padding-bottom: 80px; }
  .whatsapp-float { bottom: 90px; }
  .scroll-top { bottom: 160px; }
}