/* =============================================================
   PREMIUM THEME - RESPONSIVE MASTER FILE
   Covers: All pages, all breakpoints (1024, 860, 768, 640, 480, 380)
   Philosophy: Only layout/sizing changes - zero design changes.
   ============================================================= */

/* ===========================================================
   1. GLOBAL BASE FIXES
   =========================================================== */
html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
img, video, iframe { max-width: 100%; height: auto; }
.mobile-cta {
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
}

/* ===========================================================
   2. TABLET - 1024px
   =========================================================== */
@media (max-width: 1024px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .kb-featured-card { grid-template-columns: 1fr; padding: 28px; }
    .kb-cta-benefits { grid-template-columns: 1fr; }
    .home-hero__floating-note { display: none; }
    .two-column { grid-template-columns: 1fr; }
    .landing-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .announcement-bar__inner { flex-direction: column; align-items: flex-start; gap: 6px; }
    .reseller-plan-grid { grid-template-columns: 1fr 1fr; }
    .hero__grid { grid-template-columns: 1fr; }
    .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

/* ===========================================================
   3. SMALL TABLET - 860px
   =========================================================== */
@media (max-width: 860px) {
    .section, .hero { padding: 52px 0; }
    .support-grid { grid-template-columns: 1fr; }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-band__grid { grid-template-columns: repeat(2, 1fr); }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: 1fr; }
    .testimonial-grid { grid-template-columns: 1fr; }
    .blog-featured-card { grid-template-columns: 1fr; }
    .article-layout__shell { grid-template-columns: 1fr; }
    .article-toc { position: static; order: -1; }
}

/* ===========================================================
   4. MOBILE - 768px
   =========================================================== */
@media (max-width: 768px) {
    .site-footer__grid { grid-template-columns: 1fr; gap: 24px; }
    .kb-featured-card { padding: 22px; gap: 20px; }
    .kb-featured-card__image { height: 220px; }
    .lv-filter-bar { flex-wrap: wrap; gap: 8px; }
    .reseller-tiers { flex-direction: column; gap: 16px; }
    .faq-grid { grid-template-columns: 1fr; }
    .contact-form-shell { grid-template-columns: 1fr; gap: 28px; }
}

/* ===========================================================
   5. MOBILE - 640px
   =========================================================== */
@media (max-width: 640px) {
    .shell { width: calc(100% - 24px); }
    .hero, .section { padding: 44px 0; }
    .hero__content { padding: 24px; }
    .hero__grid { grid-template-columns: 1fr; }
    .hero-panel { padding: 20px; }

    .hero__actions, .cta-band__actions, .support-card__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .hero__actions .button, .cta-band__actions .button, .support-card__actions .button {
        width: 100%;
        justify-content: center;
    }

    /* Home hero */
    .home-hero { padding: 28px 16px; border-radius: 20px; }
    .home-hero__grid { grid-template-columns: 1fr; gap: 24px; }
    .home-hero__visual { min-height: 280px; }
    .home-hero__stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
    .home-hero__stat-card { padding: 18px 12px; }
    .home-hero__quick-actions { grid-template-columns: 1fr; padding-bottom: 24px; }

    /* Grids */
    .category-grid { grid-template-columns: 1fr; }
    .feature-grid { grid-template-columns: 1fr; }
    .testimonial-grid { grid-template-columns: 1fr; }
    .stats-band__grid { grid-template-columns: 1fr; }

    /* Footer */
    .site-footer { padding: 36px 0 16px; }
    .site-footer__grid { grid-template-columns: 1fr; gap: 20px; }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* CTA */
    .cta-band__inner { flex-direction: column; align-items: flex-start; padding: 24px; gap: 20px; }
    .promo-banner__inner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
    .announcement-bar__inner { flex-direction: column; align-items: flex-start; }

    /* Blog */
    .blog-grid, .blog-grid--3 { grid-template-columns: 1fr; }
    .blog-featured-card { grid-template-columns: 1fr; }
    .blog-hero-aside { display: none; }
    .blog-search { width: 100%; min-width: 0; }
    .article-header__byline { flex-direction: column; align-items: flex-start; gap: 12px; }
    .article-share-btns { flex-wrap: wrap; }
    .article-layout__shell { grid-template-columns: 1fr; }

    /* Knowledge Base */
    .kb-featured-card { grid-template-columns: 1fr; padding: 20px; }
    .kb-featured-card__image { height: 200px; }
    .kb-cta-benefits { grid-template-columns: 1fr; }
    .kb-cta-card { padding: 28px 20px; }

    /* Contact Us */
    .contact-methods-grid { grid-template-columns: 1fr; gap: 16px; }
    .contact-method-card { padding: 24px; }
    .contact-form-shell { grid-template-columns: 1fr; gap: 24px; }
    .form-row { grid-template-columns: 1fr; gap: 16px; }
    .faq-trigger { padding: 18px 16px; }

    /* Learning Videos */
    .lv-hero__grid { grid-template-columns: 1fr; }
    .lv-grid { grid-template-columns: 1fr; }

    /* Become a Reseller */
    .reseller-steps { grid-template-columns: 1fr; }
    .reseller-plan-grid { grid-template-columns: 1fr; }

    /* Landing pages */
    .landing-hero__grid { grid-template-columns: 1fr; }
    .landing-feature-grid { grid-template-columns: 1fr; }
    .landing-course-grid { grid-template-columns: 1fr; }

    /* ELE section */
    .ele-title { font-size: clamp(1.8rem, 7vw, 2.8rem) !important; }
    .ele-grid { gap: 10px; justify-content: center; }
    .ele-card { width: 110px; height: 120px; font-size: 0.78rem; }

    /* Before-footer features */
    .bff-top-row { flex-direction: column; }
    .bff-caps-box { flex: auto; }
    .bff-diversity-content { flex-direction: column; gap: 20px; padding: 28px 20px; }
    .bff-d-title, .bff-d-text { max-width: 100%; }
    .bff-divider { width: 100%; height: 2px; }
    .bff-diversity-image { flex: 0 0 220px; border-radius: 0 0 20px 20px; }
    .bff-features-box { flex-wrap: wrap; gap: 20px; padding: 24px 16px; justify-content: center; }
    .bff-feature-item { flex: 0 0 calc(50% - 20px); }

    /* Join banner */
    .jbs-wrapper { flex-direction: column; }
    .jbs-blue-panel {
        width: 100%; border-radius: 24px 24px 0 0;
        min-height: 200px; position: relative;
        text-align: center; align-items: center;
    }
    .jbs-text-group { transform: none; align-self: center; }
    .jbs-white-panel { width: 100%; flex-direction: column; margin: -30px 0 0 0; padding: 30px 20px; }
    .jbs-wp-divider { width: 100%; height: 2px; margin: 24px 0; }
    .jbs-wp-right { flex: auto; width: 100%; }
    .jbs-girl-image { display: none; }
    .jbs-title { font-size: 2.2rem; }

    /* Platform features (Landing) */
    .pfp-features-bar { flex-wrap: wrap; gap: 24px; justify-content: center; }
    .pfp-fb-item { flex: 0 0 calc(50% - 24px); align-items: center; text-align: center; }
    .pfp-fb-divider { display: none; }
    .pfp-blue-card { flex-direction: column; text-align: center; padding: 28px 20px; }
    .pfp-bc-left, .pfp-bc-right { margin: 16px 0; }
    .pfp-pb-inner { flex-direction: column; gap: 24px; }

    /* Support cards */
    .support-card { padding: 24px; }

    /* Home slider */
    .slider_section img { border-radius: 8px; }
    .prm-custom-1 { height: 160px; }
    .steps-grid { grid-template-columns: 1fr; }

    /* Learning stage */
    .ls-grid { gap: 12px; }
    .ls-title-container { flex-wrap: wrap; justify-content: center; }
}

/* ===========================================================
   6. SMALL MOBILE - 480px
   =========================================================== */
@media (max-width: 480px) {
    .shell { width: calc(100% - 16px); }
    .button { min-height: 48px; padding: 0 16px; font-size: 0.92rem; }
    .site-header__row { min-height: 64px; }
    .brand-mark { width: 40px; height: 40px; font-size: 1.1rem; border-radius: 12px; }
    .home-hero__stats { grid-template-columns: 1fr 1fr; gap: 8px; }
    .home-hero__stat-card { padding: 14px 10px; }
    .home-hero__stat-card strong { font-size: 1.5rem; }
    .ele-card { width: 100px; height: 110px; font-size: 0.72rem; }
    .ele-icon { width: 38px; height: 38px; }
    .sidebar-card { padding: 16px; }
    .kb-cta-card { padding: 24px 16px; }
    .feature-card, .step-card, .testimonial-card { padding: 20px; }
    .pfp-fb-item { flex: 0 0 100%; }
    .pfp-highlight-title { font-size: 1.8rem !important; }
    .bff-feature-item { flex: 0 0 calc(50% - 20px); }
    .ls-card { width: 140px; padding: 15px; }
}

/* ===========================================================
   7. EXTRA SMALL - 380px
   =========================================================== */
@media (max-width: 380px) {
    h1 { font-size: clamp(1.7rem, 8vw, 2rem) !important; }
    h2 { font-size: clamp(1.3rem, 6vw, 1.6rem) !important; }
    .home-hero__stats { grid-template-columns: 1fr; }
    .ele-card { width: 90px; height: 100px; font-size: 0.65rem; }
    .home-hero__quick-card { padding: 16px 14px; }
    .bff-feature-item { flex: 0 0 100%; }
    .ls-age-range { font-size: 1.5rem; }
    .ls-card { width: 130px; }
}

/* ===========================================================
   8. LANDSCAPE MOBILE
   =========================================================== */
@media (max-width: 860px) and (orientation: landscape) {
    .home-hero { padding-top: 16px; }
    .home-hero__visual { min-height: 200px; }
    .hero, .section { padding: 32px 0; }
    .site-nav { max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ===========================================================
   9. TOUCH / POINTER TARGETS
   =========================================================== */
@media (hover: none) and (pointer: coarse) {
    .button { min-height: 52px; }
    .site-nav a, .nav-dropdown__menu li a {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    .faq-trigger { min-height: 56px; }
    .menu-toggle { width: 52px; height: 52px; }
    .feature-card:hover, .category-card:hover, .contact-method-card:hover { transform: none; }
}