/* =========================================================
   EWI — CONSOLIDATED MOBILE CSS
   Single source of truth for all responsive styles
   Breakpoints: 960px | 768px | 640px | 480px
   ========================================================= */

/* =========================================================
   HEADER & NAV
   ========================================================= */

@media (max-width: 960px) {
    /* Fix header inner padding on mobile */
    .header-inner {
        padding-inline: 16px;
        gap: 12px;
    }

    /* Ensure hamburger shows */
    .nav-toggle {
        display: flex;
    }

    /* Collapse mega menu properly */
    .mega-menu {
        position: static;
        width: 100%;
        transform: none !important;
        border-radius: 12px;
        padding: 16px;
        box-shadow: none;
    }
    .mega-menu__inner {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .mega-menu__cta,
    .mega-menu__cta-bar { display: none; }

    /* Mobile nav dropdown */
    .main-nav {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--bg, #0f1115);
        border-bottom: 1px solid rgba(77,163,255,.15);
        padding: 12px 16px 16px;
        z-index: 999;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }
    .main-nav.is-open {
        display: flex;
        flex-direction: column;
    }
    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        width: 100%;
    }
    .nav-links li { width: 100%; }
    .nav-links li a {
        padding: 10px 14px;
        width: 100%;
        display: block;
    }

    /* Header controls */
    .header-controls {
        gap: 6px;
    }

    /* Logo smaller on mobile */
    .logo img {
        width: 140px;
    }
}

@media (min-width: 961px) {
    .nav-toggle { display: none; }
    .main-nav { display: flex !important; }
}

/* =========================================================
   COOKIE CONSENT BANNER
   ========================================================= */

@media (max-width: 768px) {
    .ewi-cookie-banner {
        padding: 14px 16px;
    }
    .ewi-cookie-banner__inner {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .ewi-cookie-banner__title {
        font-size: 1rem;
    }
    .ewi-cookie-banner__text {
        font-size: 0.875rem;
    }
    .ewi-cookie-banner__actions {
        justify-content: flex-start;
        gap: 8px;
    }
    .ewi-cookie-btn {
        flex: 1 1 auto;
        min-height: 40px;
        padding: 8px 16px;
        font-size: 0.875rem;
    }
    .ewi-cookie-banner__prefs {
        gap: 8px;
    }
    .ewi-cookie-toggle {
        font-size: 0.8125rem;
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {
    .ewi-cookie-btn {
        flex: 1 1 100%;
        text-align: center;
        justify-content: center;
    }
}

/* =========================================================
   ANALYSIS FEED HERO
   ========================================================= */

@media (max-width: 768px) {
    .ewi-feed-hero__inner {
        grid-template-columns: 1fr !important;
    }
    .ewi-feed-hero__divider {
        width: calc(100% - 48px) !important;
        height: 1px !important;
        margin: 0 24px !important;
    }
    .ewi-feed-hero__left,
    .ewi-feed-hero__right { padding: 20px 24px !important; }
    .ewi-feed-hero__stats { gap: 16px; }
    .ewi-feed-promo__actions { flex-direction: column; }
    .ewi-feed-promo__btn { width: 100%; justify-content: center; }
}

/* =========================================================
   FILTER BAR
   ========================================================= */

@media (max-width: 768px) {
    .ap-filterbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .ap-filterbar__search {
        max-width: 100% !important;
        width: 100% !important;
    }
    .ap-filterbar__input { width: 100% !important; }
    .ap-view-toggle { margin-left: auto; }
    .ap-filter-btn,
    .ap-dd-trigger {
        min-height: 36px;
        padding: 6px 14px !important;
    }
}

/* =========================================================
   ANALYSIS CARDS & GRID
   ========================================================= */

@media (max-width: 640px) {
    .ap-feed-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Analysis single post */
@media (max-width: 768px) {
    .ap-single-grid,
    .ap-single-layout { grid-template-columns: 1fr !important; }
    .ap-single-sidebar { display: none; }
}

/* =========================================================
   TOOLS HUB
   ========================================================= */

@media (max-width: 768px) {
    .ewi-tools-hero {
        grid-template-columns: 1fr !important;
        padding: 20px !important;
    }
    .ewi-tools-hero__panel { display: none; }
    .ewi-tools-grid,
    .ewi-tools-grid--2col,
    .ewi-tools-grid--3col {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   HOMEPAGE SECTIONS
   ========================================================= */

@media (max-width: 768px) {
    .ewi-feed-top {
        grid-template-columns: 1fr !important;
    }
    .ewi-feed-promo {
        margin-top: 0 !important;
    }
}

/* =========================================================
   PARTNER PAGES
   ========================================================= */

@media (max-width: 768px) {
    .ewi-apply-wrap {
        grid-template-columns: 1fr !important;
        padding-top: 16px !important;
        gap: 24px !important;
    }
    .ewi-apply-info { padding-top: 0 !important; }
    .ewi-apply-info__inner { position: static !important; }
    .ewi-apply__grid { grid-template-columns: 1fr !important; }
    .ewi-apply__subdomain { flex-wrap: wrap; }
    .ewi-apply__subdomain span { font-size: 12px; }
}

@media (max-width: 640px) {
    .ewi-pd-stats { grid-template-columns: 1fr 1fr !important; }
    .ewi-pd-links { grid-template-columns: 1fr !important; }
    .ewi-pd-header { flex-wrap: wrap; }
}

/* =========================================================
   EA PRODUCT PAGES
   ========================================================= */

@media (max-width: 768px) {
    .ep-hero,
    .tlc-hero {
        grid-template-columns: 1fr !important;
        padding: 20px !important;
    }
    .ep-twoCol,
    .tlc-twoCol { grid-template-columns: 1fr !important; }
    .ep-grid3,
    .tlc-grid3 { grid-template-columns: 1fr 1fr !important; }
    .ep-wrap > header nav,
    .tlc-wrap > header nav { display: none !important; }
}

/* =========================================================
   GENERAL TOUCH TARGETS
   ========================================================= */

@media (max-width: 768px) {
    .ewi-btn,
    .ap-btn,
    .ep-btn,
    .tlc-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* =========================================================
   GENERAL SPACING
   ========================================================= */

@media (max-width: 768px) {
    /* Reduce section padding on mobile */
    .ewi-section,
    .ap-section {
        padding-block: 32px !important;
    }
    /* Full width cards on small screens */
    .ewi-card-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .header-inner {
        padding-inline: 12px;
    }
    .logo img {
        width: 120px;
    }
}

/* =========================================================
   HEADER CONTAINER OVERRIDE
   Force header padding reduction at nav collapse point
   ========================================================= */

@media (max-width: 900px) {
    .site-header .container,
    .site-header .header-inner,
    .container.header-inner {
        padding-inline: 0.75rem !important;
        gap: 8px !important;
    }
}

@media (max-width: 480px) {
    .site-header .container,
    .site-header .header-inner,
    .container.header-inner {
        padding-inline: 0.5rem !important;
    }
}

/* =========================================================
   LOGO MAX WIDTH — prevent overflow on small screens
   ========================================================= */

.logo img,
.ewi-logo {
    max-width: 100%;
    height: auto;
}

@media (max-width: 400px) {
    .logo img,
    .ewi-logo {
        width: 140px !important;
    }
}