/* ===== LANDING CONTENT MOBILE (≤600px) ===== */
@media (max-width: 600px) {
    .landing-section {
        padding: 1rem 1.2rem;
    }
    .mistakes-grid,
    .related-articles-grid {
        grid-template-columns: 1fr;
    }
    .ref-table th,
    .ref-table td {
        padding: 0.5rem 0.7rem;
        font-size: 0.85rem;
    }
}

/* ===== FAVORITES MOBILE (≤768px) ===== */
@media (max-width: 768px) {
    .categories-grid li .fav-btn { opacity: 0.5; }
    .categories-grid li .fav-btn[aria-pressed="true"] { opacity: 1; }
}

/* ===== RESPONSIVE — TABLET & MOBILE (≤768px) ===== */
@media (max-width: 768px) {

    /* --- Typography --- */
    html { font-size: 15px; }

    .page-header h1 {
        font-size: clamp(1.4rem, 5vw, 2rem);
    }

    /* --- Layout --- */
    main { padding: 1.25rem 1rem; }

    /* --- Navigation: hamburger --- */
    #nav-toggle { display: flex; align-items: center; justify-content: center; }

    .site-header { position: relative; }
    .site-header nav { padding: 0.75rem 1rem; }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        padding: 1rem;
        flex-direction: column;
        gap: 0.75rem;
        z-index: 99;
        box-shadow: var(--shadow);
    }
    .nav-links.nav-open { display: flex; }

    .nav-links a {
        font-size: 1rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border);
    }

    .lang-switcher { width: 100%; }
    .lang-switcher button { width: 100%; text-align: left; }
    #lang-menu { position: static; width: 100%; margin-top: 0.25rem; }

    /* --- Converter widget --- */
    .converter-widget { padding: 1rem; }

    .conv-selects {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .conv-values {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    #swap-btn {
        width: 100%;
        height: 44px;
        border-radius: var(--radius-sm);
    }

    #from-select, #to-select, #value-input { min-height: 56px; }

    /* --- How-to section --- */
    .how-to { padding: 1.25rem 1rem; }

    /* --- Homepage hero --- */
    .hero { padding: 2rem 0.5rem 1.5rem; }
    .hero-sub { font-size: 1rem; }

    /* --- Categories grid: 2 columns --- */
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- Articles grid: 2 columns on tablet --- */
    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- Popular list: 1 column --- */
    .popular-list {
        grid-template-columns: 1fr;
    }

    /* --- Related links: 1 column --- */
    .related-list {
        grid-template-columns: 1fr;
    }

    .banner-ad-section {
        padding: 1rem;
    }

    .banner-ad-desktop {
        display: none;
    }

    .banner-ad-mobile {
        display: flex;
    }

    /* --- About section --- */
    .about-section,
    .featured-articles-section,
    .featured-cats-section { padding: 1.25rem 1rem; }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* ===== SMALL MOBILE (≤480px) ===== */
@media (max-width: 480px) {
    .articles-grid { grid-template-columns: 1fr; }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.65rem;
    }

    .categories-grid li a { padding: 1rem; }

    #result-output { font-size: 2rem; }

    /* Article mobile */
    .article-header h1 { font-size: 1.4rem; }
    .article-body h2   { font-size: 1.2rem; }
    .article-body h3   { font-size: 1.05rem; }
    .article-body p, .article-body li { font-size: 0.95rem; line-height: 1.75; }
    .article-related-grid { grid-template-columns: 1fr; }

    /* Featured sections mobile */
    .featured-articles-grid { grid-template-columns: 1fr; }
    .featured-cats-grid     { grid-template-columns: 1fr; }

    /* Landing content mobile */
    .landing-reference-table { font-size: 0.82rem; }
    .landing-faq-item { padding: 0.75rem; }
}