/* ============================================================
   VLE PC — small-screen corrections. Loaded after components.css
   so it can override site-wide. Most traffic is Android phones.
   ============================================================ */

@media (max-width: 1024px) {
    .header__search { max-width: 220px; }
    .header__nav .category-btn__text { display: none; }
}

@media (max-width: 860px) {
    :root { --header-height: 56px; }

    .header__inner { padding-inline: var(--space-4); gap: var(--space-3); }
    .container { padding-inline: var(--space-4); }

    .header__hamburger { display: inline-flex; }

    /* Nav becomes a left drawer. */
    .header__nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 264px;
        max-width: 84vw;
        margin: 0;
        padding: var(--space-6) var(--space-4);
        background: var(--bg-secondary);
        box-shadow: var(--shadow-xl);
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
        z-index: var(--z-modal);
        overflow-y: auto;
    }

    .header__nav.open { transform: translateX(0); }

    .header__nav .category-btn {
        padding: var(--space-3);
        font-size: var(--text-base);
    }

    .header__nav .category-btn__text { display: inline; }

    .header__nav-close {
        display: block;
        align-self: flex-end;
        font-size: 28px;
        line-height: 1;
        color: var(--text-tertiary);
        padding: var(--space-1) var(--space-2);
        margin-bottom: var(--space-2);
    }

    .header__search { max-width: none; margin-left: 0; }

    /* Only the primary action stays in the bar; the rest live in the drawer. */
    .header__actions .btn--ghost { display: none; }

    .tool-grid { grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); }

    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }
}

@media (max-width: 560px) {
    .home-hero { padding-block: var(--space-6) var(--space-3) !important; }
    .popular-tools-wrap { display: none; }
    .footer { margin-top: var(--space-10); }
    .footer__grid { gap: var(--space-6); }
    .btn { padding: var(--space-3) var(--space-4); }
}