/* =========================
   АДАПТИВНЫЙ
========================= */
@media (max-width: 1320px) {
    .items-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1100px) {
    .items-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Вкладки «Мои объявления / Новости» — заглушки на будущее. Показываем только
   на широких экранах, где для них есть место рядом с поиском; ниже 1300px
   прячем, чтобы поиск не схлопывался и шапка оставалась компактной. */
@media (max-width: 1300px) {
    .header-tabs {
        display: none;
    }
}

@media (max-width: 980px) {
    .items-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Шапка: компактная многострочная раскладка ──
       Строка 1: лого + действия (справа)
       Строка 2: каталог + поиск
       Строка 3: «Разместить объявление» во всю ширину.
       Не липкая на мобиле — прокручивается прочь, не перекрывая контент. */
    .site-header {
        position: static;
        margin-bottom: 16px;
    }

    .header-inner {
        flex-wrap: wrap;
        gap: 10px;
        min-height: 0;
        padding: 10px 0;
    }

    .logo {
        order: 1;
    }

    .city-link {
        order: 1;
    }

    .header-actions {
        order: 2;
        margin-left: auto;
    }

    .catalog-btn {
        order: 3;
    }

    .search-box {
        order: 4;
        flex: 1 1 200px;
    }

    .publish-btn {
        order: 5;
        flex: 1 1 100%;
    }

    .logo-img {
        width: 120px;
    }
}

@media (max-width: 640px) {
    .shell {
        width: min(100%, calc(100% - 20px));
    }

    .items-grid {
        grid-template-columns: 1fr;
    }

    /* Каталог — только иконка из точек, без подписи; убираем город ради чистоты */
    .catalog-btn-label {
        display: none;
    }

    .catalog-btn {
        padding: 0 14px;
    }

    .city-link {
        display: none;
    }

    .search-box input,
    .search-btn {
        font-size: 16px; /* >=16px — отключает авто-зум в iOS */
    }

    .theme-toggle,
    .item .desc,
    .item .author,
    #footer {
        font-size: 14px;
    }

    #footer {
        text-align: left;
    }

    .footer-content {
        flex-direction: column;
        gap: 16px;
    }
}

/* Ландшафтные телефоны (низкие экраны) — ещё компактнее */
@media (max-width: 980px) and (max-height: 480px) {
    .header-inner {
        gap: 8px;
        padding: 8px 0;
    }

    .logo-img {
        width: 112px;
    }

    .catalog-btn,
    .search-box,
    .publish-btn {
        height: 42px;
    }
}