/* ============================================
   Healthy Club — responsive.css
   Breakpoints: 1440 / 1200 / 992 / 768 / 576 / 480 / 360
   Mobile-first adjustments
   ============================================ */

/* ---------- 1440px ---------- */
@media (max-width: 1440px) {
    :root { --max: 1180px; }
    .section { padding: 96px 0; }
}

/* ---------- 1200px ---------- */
@media (max-width: 1200px) {
    :root { --max: 1024px; --header-h: 72px; }
    .section { padding: 88px 0; }
    .features-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .feature-card { padding: 34px 26px; }
    .plans-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .plan-featured { transform: scale(1); }
    .steps-grid::before { left: 10%; right: 10%; }
    .stats { padding: 70px 0; }
}

/* ---------- 992px ---------- */
@media (max-width: 992px) {
    :root { --header-h: 68px; }
    .container { padding: 0 22px; }
    .section { padding: 78px 0; }
    .section-head { margin-bottom: 50px; }

    /* Mobile nav */
    .nav {
        position: fixed;
        top: 0; right: -100%;
        width: min(340px, 84vw);
        height: 100vh;
        background: var(--white);
        z-index: 1100;
        padding: 80px 30px 30px;
        box-shadow: -10px 0 50px rgba(0,0,0,0.18);
        transition: right .45s var(--ease);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
    .nav.open { right: 0; }
    .nav-list { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
    .nav-list li { width: 100%; border-bottom: 1px solid var(--border); }
    .nav-list a {
        display: block; padding: 16px 4px;
        color: var(--text-dark) !important;
        font-size: 1.05rem;
    }
    .nav-list a::after { display: none; }
    .nav-close { display: block; }
    .header .book-now { display: none; }
    .nav-toggle { display: flex; }
    .mobile-book { display: inline-flex; }
    .header:not(.scrolled) .nav-toggle span { background: #fff; }
    .header.scrolled .nav-toggle span { background: var(--text-dark); }
    .nav .mobile-book { margin-top: 24px; width: 100%; display: inline-flex; }

    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 22px; }
    .steps-grid::before { display: none; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
    .footer-about { grid-column: 1 / -1; }
}

/* ---------- 768px ---------- */
@media (max-width: 768px) {
    :root { --header-h: 64px; }
    .logo-img { height: 38px; }
    .logo-light .logo-img { height: 42px; }
    .container { padding: 0 20px; }
    .section { padding: 66px 0; }
    .section-head { margin-bottom: 42px; }
    .eyebrow { font-size: 0.76rem; padding: 6px 14px; }

    .hero { min-height: 92vh; }
    .hero h1 { margin-bottom: 18px; }
    .hero-sub { margin-bottom: 28px; }
    .hero-cta { gap: 12px; }
    .hero-cta .btn { flex: 1; min-width: 0; }
    .trust-badges { gap: 14px 18px; }
    .trust-badges li { font-size: 0.84rem; }

    .feature-card { padding: 30px 22px; }
    .feature-card h3 { font-size: 1.1rem; }

    .plan-body { padding: 24px 22px 26px; }
    .plan-foot { flex-wrap: wrap; gap: 12px; }
    .plan-foot .btn { flex: 1; }

    .slide { padding: 40px 26px; }
    .slide blockquote { font-size: 1rem; }

    .accordion-head { padding: 18px 20px; font-size: 0.96rem; }
    .accordion-body p { padding: 0 20px 22px; font-size: 0.92rem; }

    .final-cta { padding: 90px 0; }
    .final-cta-bg { background-attachment: scroll; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-about { grid-column: auto; }
    .footer-bottom-inner { flex-direction: column; text-align: center; gap: 12px; }
}

/* ---------- 576px ---------- */
@media (max-width: 576px) {
    .container { padding: 0 16px; }
    .section { padding: 56px 0; }
    .section-head { margin-bottom: 36px; }

    .features-grid { grid-template-columns: 1fr; gap: 16px; }
    .feature-card { padding: 28px 22px; }
    .feature-icon { width: 60px; height: 60px; }

    .plans-grid { grid-template-columns: 1fr; gap: 22px; }
    .plan-featured { transform: none; }
    .plan-featured .plan-badge { top: 12px; right: 12px; }

    .steps-grid { grid-template-columns: 1fr; gap: 30px; }
    .step { padding: 0 6px; }

    .gallery-grid { grid-template-columns: 1fr; gap: 14px; }
    .gallery-item { aspect-ratio: 16/10; }

    .stats-grid { grid-template-columns: 1fr; gap: 30px; }
    .stats { padding: 56px 0; }

    .slide { padding: 34px 22px; }
    .slide img { width: 74px; height: 74px; }
    .slide blockquote { font-size: 0.96rem; }
    .slider-btn { width: 42px; height: 42px; }

    .hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
    .hero-cta { flex-direction: column; }
    .hero-cta .btn { width: 100%; }

    .btn-lg { padding: 14px 26px; font-size: 0.95rem; }

    .lightbox-close { top: 16px; right: 16px; width: 42px; height: 42px; font-size: 2rem; }
}

/* ---------- 480px ---------- */
@media (max-width: 480px) {
    .section-head h2 { font-size: 1.7rem; }
    .hero-content .eyebrow { font-size: 0.72rem; }
    .trust-badges { flex-direction: column; align-items: flex-start; gap: 10px; }
    .plan-foot { flex-direction: column; align-items: stretch; }
    .plan-foot .btn { width: 100%; }
    .plan-price { text-align: center; }
    .footer-legal { gap: 16px; }
    .scroll-top { bottom: 18px; right: 18px; width: 44px; height: 44px; }
}

/* ---------- 360px ---------- */
@media (max-width: 360px) {
    .container { padding: 0 14px; }
    .hero h1 { font-size: 1.95rem; }
    .hero-sub { font-size: 0.96rem; }
    .logo-img { height: 34px; }
    .logo-light .logo-img { height: 38px; }
    .btn { padding: 12px 20px; font-size: 0.9rem; }
    .section-head h2 { font-size: 1.55rem; }
    .feature-card { padding: 24px 18px; }
    .plan-body { padding: 22px 18px; }
    .slide { padding: 28px 18px; }
    .slide blockquote { font-size: 0.9rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .hero-bg { animation: none; transform: scale(1.05); }
}