/* ============================================================
   Challenge Circle — responsive.css
   Mobile-first layout layer. Desktop untouched.
   Load LAST in head.php (after nav.css).
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   LEGACY .mobile-page-header — no longer rendered, but keep
   the class hidden in case any old markup lingers.
════════════════════════════════════════════════════════════ */
.mobile-page-header { display: none !important; }
.mobile-back-btn    { display: none !important; }
.mobile-page-title  { display: none !important; }

/* .has-mobile-header still used on page wrappers — just needs
   nav-height clearance now (site-nav is always 80px tall). */
.has-mobile-header { padding-top: var(--nav-height) !important; }


/* ════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV
════════════════════════════════════════════════════════════ */
.mobile-bottom-nav { display: none !important; }

@media (max-width: 900px) {
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 62px;
        background: rgba(5,2,10,0.97);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-top: 1px solid rgba(139,92,246,0.12);
        z-index: 99;
        align-items: center;
        justify-content: space-around;
        padding: 0 4px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .mobile-bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 10px;
        border-radius: 12px;
        text-decoration: none;
        color: #6b7280;
        transition: color 0.2s, background 0.2s;
        min-width: 52px;
        min-height: 44px;
        border: none;
        background: none;
        font-family: var(--font);
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-bottom-nav-item i    { font-size: 19px; }
    .mobile-bottom-nav-item span { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
    .mobile-bottom-nav-item.active      { color: var(--purple-light); background: rgba(139,92,246,0.1); }
    .mobile-bottom-nav-item.gold        { color: var(--gold); }
    .mobile-bottom-nav-item.gold.active { color: var(--gold); background: rgba(245,158,11,0.1); }
    .mobile-bottom-nav-item:active      { transform: scale(0.93); }
    body:not(:has(.page-home)) { padding-bottom: 70px; }
    body:has(.page-home) { padding-bottom: 0 !important; }
    #chat-trigger { bottom: 74px !important; right: 16px !important; }
}


/* ════════════════════════════════════════════════════════════
   LAYOUT FIXES — mobile
════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* Dashboard layout: stack vertically, sidebar becomes drawer */
    .dash-layout    { flex-direction: column !important; height: auto !important; overflow: visible !important; padding-top: var(--nav-height) !important; }
    .dash-sidebar   { display: none !important; } /* overridden by .drawer-open in dashboard.css */
    .dash-main      { padding: 16px 16px 100px !important; overflow: visible !important; width: 100% !important; }
    .dash-stats     { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
    .dash-stat-card { padding: 14px !important; border-radius: 18px !important; }
    .member-grid    { grid-template-columns: 1fr !important; }

    /* Show admin sidebar toggle button in nav on mobile */
    [data-ctx="admin"] #nav-sidebar-toggle { display: flex !important; }

    /* Containers */
    .container, .container-sm { padding-left: 16px !important; padding-right: 16px !important; }

    /* Auth pages */
    .auth-page { padding-top: 24px !important; }
    .auth-wrap { padding: 20px 16px 80px !important; }

    /* Pricing */
    .pricing-grid {
        grid-template-columns: 1fr !important;
        max-width: 440px !important;
        margin-left: auto !important; margin-right: auto !important;
    }
    .pricing-card.featured { margin-top: 0 !important; }
}

@media (max-width: 640px) {
    .hero-title    { font-size: clamp(28px,8vw,48px) !important; }
    .section-title { font-size: clamp(24px,6.5vw,40px) !important; }
    .vault-grid        { grid-template-columns: 1fr !important; }
    .vault-stats       { grid-template-columns: repeat(2,1fr) !important; }
    .xp-challenge-grid { grid-template-columns: 1fr !important; }
    .footer-grid       { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 420px) {
    .auth-card, .auth-card-wide { padding: 28px 18px !important; border-radius: 24px !important; }
    .footer-grid   { grid-template-columns: 1fr !important; }
    .footer-bottom { flex-direction: column !important; gap: 4px !important; }
}

/* iOS zoom prevention on inputs */
@media (hover: none) and (pointer: coarse) {
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="tel"], input[type="url"],
    input[type="search"], select, textarea { font-size: 16px !important; }
    .btn    { min-height: 44px; }
    .btn-sm { min-height: 38px; }
}


/* ════════════════════════════════════════════════════════════
   PWA INSTALL BANNER
   Only on mobile. Themed purple. Sits above bottom nav.
   Never shows on desktop.
════════════════════════════════════════════════════════════ */
#pwa-install-banner {
    display: none !important; /* hidden by default everywhere */
}

@media (max-width: 900px) {
    #pwa-install-banner {
        align-items: center;
        gap: 10px;
        position: fixed;
        bottom: 74px; /* sits above the 62px bottom nav */
        left: 12px;
        right: 12px;
        background: linear-gradient(135deg, rgba(109,40,217,0.97), rgba(79,20,180,0.97));
        border: 1px solid rgba(139,92,246,0.5);
        border-radius: 18px;
        padding: 12px 14px;
        z-index: 97; /* below bottom nav (99) */
        box-shadow: 0 4px 24px rgba(0,0,0,0.6);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
    #pwa-install-banner.visible { display: flex !important; }

    .pwa-banner-text  { flex: 1; min-width: 0; }
    .pwa-banner-title { font-size: 12px; font-weight: 900; color: #fff; margin-bottom: 1px; }
    .pwa-banner-sub   { font-size: 10px; color: rgba(255,255,255,0.65); }

    .pwa-banner-install {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: rgba(255,255,255,0.15);
        color: #fff;
        border: 1px solid rgba(255,255,255,0.25);
        border-radius: 10px;
        padding: 7px 14px;
        font-size: 11px;
        font-weight: 900;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
        font-family: var(--font);
        transition: background 0.2s;
    }
    .pwa-banner-install:hover { background: rgba(255,255,255,0.25); }

    .pwa-banner-dismiss {
        background: none;
        border: none;
        color: rgba(255,255,255,0.5);
        font-size: 16px;
        cursor: pointer;
        padding: 4px;
        flex-shrink: 0;
        line-height: 1;
        transition: color 0.2s;
    }
    .pwa-banner-dismiss:hover { color: #fff; }
}

/* ════════════════════════════════════════════════════════════
   LANDING PAGE (index.php) — MOBILE RESPONSIVENESS
   All rules scoped to home page sections so they don't
   bleed into member/admin pages.
════════════════════════════════════════════════════════════ */

/* ── Landing page body: no bottom nav, no extra padding ──── */
@media (max-width: 900px) {
    .page-home { padding-bottom: 0 !important; }
}


/* ── Hero ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .page-home .hero {
        padding: 32px 0 60px;
    }
    .page-home .hero-badge {
        font-size: 9px;
        padding: 6px 12px;
        letter-spacing: 0.03em;
        text-align: center;
        white-space: normal;
        line-height: 1.4;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 24px;
    }
    .page-home .hero-title {
        font-size: clamp(32px, 9vw, 52px) !important;
        letter-spacing: -0.03em;
        margin-bottom: 20px;
    }
    .page-home .hero-subtitle {
        font-size: 15px;
        padding: 0 8px;
        margin-bottom: 32px;
    }
    .page-home .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 0 16px;
    }
    .page-home .hero-actions .btn {
        width: 100%;
        max-width: 340px;
        justify-content: center;
        text-align: center;
    }
    /* Hero mockup — hide on mobile (too complex, wastes vertical space) */
    .page-home .hero-mockup-wrap { display: none !important; }
    /* Lose the hide-mobile break */
    .hide-mobile { display: none !important; }
}

@media (max-width: 480px) {
    .page-home .hero { padding: 24px 0 48px; }
    .page-home .hero-title { font-size: clamp(28px, 10vw, 44px) !important; }
}


/* ── Affiliate Teaser Banner ──────────────────────────────── */
@media (max-width: 900px) {
    .aff-teaser {
        flex-direction: column;
        text-align: center;
        padding: 20px 16px;
        gap: 16px;
        margin: 0 0 24px;
        border-radius: 24px;
    }
    .aff-teaser-emoji { font-size: 36px; }
    .aff-teaser-title { font-size: 18px; }
    .aff-teaser-sub   { font-size: 13px; }
    .aff-teaser-cta   { width: 100%; }
    .aff-teaser-cta .glass { display: inline-block; margin-bottom: 10px; }
    .aff-teaser-pct        { font-size: 28px; }
    .aff-teaser-cta .btn   { width: 100%; justify-content: center; }
}


/* ── Values (Three Pillars) ───────────────────────────────── */
@media (max-width: 900px) {
    .page-home .values-section { padding: 56px 0; }
    .values-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 36px;
    }
    .value-card { padding: 28px 24px; }
    .value-icon { width: 56px; height: 56px; font-size: 22px; margin-bottom: 20px; }
    .value-title { font-size: 17px; }
}


/* ── What We Offer (Circles grid) ────────────────────────── */
@media (max-width: 900px) {
    .page-home .circles-section { padding: 56px 0; }
    .circles-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin-top: 36px;
    }
    .circle-card { padding: 20px 16px; }
    .circle-card-icon { width: 42px; height: 42px; font-size: 16px; border-radius: 12px; margin-bottom: 14px; }
    .circle-card-title { font-size: 13px; }
    .circle-card-desc  { font-size: 12px; }
}
@media (max-width: 480px) {
    .circles-grid { grid-template-columns: 1fr !important; }
}


/* ── Stats Strip ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .stats-strip { padding: 40px 0; }
    .stats-strip-inner {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
    .stat-val { font-size: clamp(28px, 7vw, 40px); }
    .stat-lbl { font-size: 12px; }
}


/* ── Testimonials ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .page-home .testimonials-section { padding: 56px 0; }
    .testimonial-card {
        width: 280px;
        padding: 20px;
        border-radius: 20px;
    }
    .testimonial-text { font-size: 12px; }
}


/* ── Pricing Section ──────────────────────────────────────── */
@media (max-width: 900px) {
    .page-home .pricing-section { padding: 56px 0 40px; }
    /* pricing-grid already stacked to 1col by responsive.css core rule */
    .pricing-card {
        border-radius: 24px !important;
        padding: 24px 20px !important;
    }
    .pricing-amount { font-size: 32px !important; }
}


/* ── Circle Programmes ────────────────────────────────────── */
@media (max-width: 900px) {
    #programmes { padding: 48px 0 !important; }
    #programmes .pricing-grid {
        grid-template-columns: 1fr !important;
        max-width: 440px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* ── FAQ ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .page-home .faq-section { padding: 56px 0; }
}


/* ── CTA Banner ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .cta-banner {
        padding: 48px 20px !important;
        border-radius: 28px !important;
    }
    .cta-banner-title { font-size: clamp(26px, 7vw, 44px) !important; }
    .cta-banner-sub   { font-size: 14px; }
    .cta-banner-actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .cta-banner-actions .btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
        text-align: center;
    }
}


/* ── Footer ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px !important;
    }
}
@media (max-width: 480px) {
    .footer-grid   { grid-template-columns: 1fr !important; }
    .footer-bottom { flex-direction: column !important; text-align: center; gap: 6px !important; }
}


/* ── Section headings and eyebrows — global mobile tweak ─── */
@media (max-width: 900px) {
    .page-home .section-eyebrow {
        font-size: 10px;
    }
    .page-home .section-title,
    .page-home h2 {
        font-size: clamp(24px, 6vw, 38px) !important;
    }
    .page-home .section-sub {
        font-size: 14px;
    }
}