/* ============================================
   WELLNESS WEBSITE - RESPONSIVE STYLESHEET
   responsive.css
   ============================================ */

/* --- Tablet: 1024px --- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .practitioner-card { grid-template-columns: 240px 1fr; }
  .hero-inner { gap: 2rem; }
}

/* --- Tablet Portrait: 768px --- */
@media (max-width: 768px) {
  :root { --header-height: 64px; }

  .main-nav { display: none; }
  .header-cta { display: none; }
  .hamburger { display: flex; }
  .mobile-bottom-bar { display: flex; }

  .float-whatsapp { bottom: 80px; }
  .back-to-top { bottom: 80px; }

  .hero { padding: 60px 0 50px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-image { order: -1; max-height: 280px; }
  .hero p { max-width: 100%; }

  .section { padding: 60px 0; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

  .practitioner-card { grid-template-columns: 1fr; }
  .practitioner-image { min-height: 260px; }
  .practitioner-info { padding: 2rem; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; }

  h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); }
  h2 { font-size: clamp(1.4rem, 4vw, 1.9rem); }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .testimonial-card { min-width: 280px; }
}

/* --- Mobile: 480px --- */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section { padding: 50px 0; }

  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }

  .hero-btns { flex-direction: column; }
  .hero-btns .btn { width: 100%; }

  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-buttons .btn { width: 100%; max-width: 320px; }

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

  .section-header { margin-bottom: 2rem; }
  .program-meta { flex-direction: column; gap: 6px; }

  .mobile-bottom-bar .btn { font-size: 0.78rem; padding: 9px 6px; }
  .why-card { flex-direction: column; }
  .why-icon { width: 44px; height: 44px; }
}

/* --- Small Mobile: 360px --- */
@media (max-width: 380px) {
  .hero h1 { font-size: 1.6rem; }
  .btn { padding: 11px 20px; font-size: 0.88rem; }
  .mobile-bottom-bar { gap: 6px; padding: 8px 10px; }
}

/* --- Large: 1366px+ --- */
@media (min-width: 1366px) {
  :root { --max-width: 1280px; }
}

/* --- XL: 1920px+ --- */
@media (min-width: 1920px) {
  :root { --max-width: 1440px; }
  body { font-size: 17px; }
}

/* --- Print --- */
@media print {
  .site-header, .site-footer, .float-whatsapp, .back-to-top,
  .mobile-bottom-bar, .cookie-banner { display: none !important; }
  body { background: white; color: black; }
  a { color: black; }
}

/* --- High contrast / forced-colors --- */
@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; }
  .card { border: 1px solid ButtonText; }
}