/* ============================================================
   NALAM NATUROPATHY & YOGA CLINIC — RESPONSIVE OVERRIDES
   assets/css/responsive.css

   Loaded AFTER style.css. Base styles in style.css are already
   mobile-friendly (fluid clamp() type, Bootstrap grid); this
   file fine-tunes spacing, sizing and layout per breakpoint so
   nothing feels like a squeezed desktop layout on small screens.

   Breakpoints follow Bootstrap 5:
   xl  >=1200px   lg  >=992px   md  >=768px   sm  >=576px   xs <576px
   ============================================================ */

/* ------------------------------------------------------------
   LARGE DESKTOP (<=1399.98px) — tighten max container slightly
   ------------------------------------------------------------ */
@media (max-width: 1399.98px) {
    .hero-title { font-size: clamp(2.2rem, 3.8vw, 3.2rem); }
}

/* ------------------------------------------------------------
   DESKTOP / LAPTOP (<=1199.98px)
   ------------------------------------------------------------ */
@media (max-width: 1199.98px) {
    .section-py { padding-block: 5rem; }
    .hero-section { padding-top: 5rem; padding-bottom: 4rem; }
    .doctor-card-body { padding: 1.6rem; }
    .cta-banner { padding: 3rem; }
}

/* ------------------------------------------------------------
   TABLET (<=991.98px) — nav collapses, stack hero, footer grid
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .top-bar { display: none !important; }

    .main-header { padding-block: 0.4rem; }
    .logo-img { height: 42px; }

    /* Collapse the desktop inline nav; mobile offcanvas takes over */
    .navbar-collapse.d-none.d-lg-flex { display: none !important; }

    .hero-section { text-align: center; padding-top: 4.5rem; }
    .hero-lead { margin-inline: auto; }
    .hero-stats { justify-content: center; }
    .hero-img-wrap { margin-top: 2.5rem; }

    .section-header { margin-inline: auto; text-align: center; }
    .section-eyebrow { justify-content: center; }

    .about-experience-badge { width: 110px; height: 110px; }

    .footer-top .col-lg-3,
    .footer-top .col-lg-2 { margin-bottom: 1.5rem; }

    .page-hero { padding: 6rem 0 3rem; }

    .form-card { padding: 2rem; }
}

/* ------------------------------------------------------------
   LARGE MOBILE / SMALL TABLET (<=767.98px)
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
    body { font-size: 15px; }

    .section-py { padding-block: 3.5rem; }

    .hero-title { font-size: clamp(2rem, 7vw, 2.6rem); }
    .hero-badge { font-size: 0.78rem; padding: 6px 12px; }
    .hero-stats { gap: 1.4rem; }
    .hero-stat-num { font-size: 1.6rem; }

    .why-choose-card { padding: 1.6rem 1.2rem; }
    .why-choose-icon { width: 54px; height: 54px; font-size: 1.4rem; }

    .doctor-card-img { aspect-ratio: 4/3; }

    .testimonial-card { padding: 1.6rem; }

    .cta-banner { padding: 2.2rem 1.5rem; text-align: center; }
    .cta-banner .text-lg-end { text-align: center !important; margin-top: 1.2rem; }

    .pre-footer-cta { text-align: center; }
    .pre-footer-cta .text-lg-end { text-align: center !important; margin-top: 1rem; }

    .site-footer { padding-top: 3rem; }
    .footer-info-block { flex-direction: column; align-items: flex-start; }

    .map-frame iframe { height: 300px; }

    .form-card { padding: 1.5rem; border-radius: var(--radius-md); }

    .floating-actions { bottom: 16px; right: 12px; }
    .fab { width: 46px; height: 46px; font-size: 1.15rem; }

    .back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

/* ------------------------------------------------------------
   MOBILE (<=575.98px)
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
    .container { padding-inline: 1.1rem; }

    .section-title { font-size: 1.6rem; }
    .section-subtitle { font-size: 0.95rem; }

    .hero-badge { display: none; } /* keep hero compact on very small screens */
    .hero-title { font-size: 1.9rem; }
    .hero-lead { font-size: 0.98rem; }

    .about-experience-badge { width: 90px; height: 90px; top: -0.75rem; right: -0.5rem; }
    .about-experience-badge strong { font-size: 1.4rem; }
    .about-experience-badge span { font-size: 0.6rem; }

    .treatment-card-body,
    .blog-card-body { padding: 1.2rem; }

    .service-card { padding: 1.8rem 1.1rem; }

    .gallery-filter { gap: 6px; margin-bottom: 1.8rem; }
    .gallery-filter button { padding: 0.45rem 1rem; font-size: 0.82rem; }

    .faq-accordion .accordion-button { font-size: 0.98rem; padding: 1.1rem 0.3rem; }

    .page-hero { padding: 5.5rem 0 2.5rem; }
    .page-hero h1 { font-size: 1.7rem; }

    .newsletter-form .input-group { flex-wrap: nowrap; }

    .mobile-menu { width: 88vw; }

    .btn { padding: 0.62rem 1.3rem; font-size: 0.92rem; }
}

/* ------------------------------------------------------------
   EXTRA-SMALL DEVICES (<=380px)
   ------------------------------------------------------------ */
@media (max-width: 380px) {
    .hero-stats { gap: 1rem; }
    .hero-stat-num { font-size: 1.35rem; }
    .logo-img { height: 36px; }
    .icon-btn { width: 38px; height: 38px; }
}

/* ------------------------------------------------------------
   PRINT (appointment/contact pages printable summary)
   ------------------------------------------------------------ */
@media print {
    .top-bar, .main-header, .mobile-menu, .floating-actions,
    .back-to-top, .pre-footer-cta, .site-footer, #preloader,
    .scroll-progress-bar { display: none !important; }
}