/*
 * Каталог игр `/games/` (часть 4 §23–27, §86).
 * Композиция: заголовок → поиск → чипы жанров → сайдбар и сетка → пагинация.
 * Сайдбар на мобильном становится bottom sheet (модификатор ставит catalog.js).
 */

.catalog {
    padding-bottom: var(--space-6);
}

.catalog__head {
    margin-bottom: var(--space-5);
}

.catalog__title {
    margin: 0 0 6px;
}

.catalog__count {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-body);
}

.catalog__count-page {
    color: var(--text-muted);
}

.catalog__search {
    margin-bottom: var(--space-4);
}

.catalog__chips {
    margin-bottom: var(--space-6);
    padding-bottom: 2px;
}

/* ---------- Раскладка: сайдбар + результаты ---------- */

.catalog__layout {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.catalog__results {
    min-width: 0;
}

.catalog__toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.catalog__sort-desktop {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.catalog__sort-desktop b {
    color: var(--text-primary);
    font-weight: var(--fw-semibold);
}

/* Кнопки «Фильтры» и «Сортировка» — только мобильная композиция (§27) */
.catalog__sheet-btn {
    display: none;
}

/* Затемнение под bottom sheet создаёт catalog.js и только на узком экране */
.catalog__backdrop {
    display: none;
}

.catalog__active {
    margin-bottom: var(--space-4);
}

.catalog__reset {
    border-style: dashed;
}

.catalog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--gap-card);
    align-items: stretch;
}

.catalog__grid > .game-card {
    height: 100%;
}

/* ---------- Сайдбар фильтров ---------- */

.filters {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
}

.filters__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}

.filters__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    color: var(--text-primary);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
}

.filters__title svg {
    color: var(--primary);
}

.filters__reset {
    color: var(--primary);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

.filters__close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: -6px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.filters__close:hover {
    background: var(--bg-soft);
    color: var(--text-primary);
}

.filters__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5) 0;
}

.filters__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.filters__legend {
    padding: 0;
    color: var(--text-primary);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
}

/* Двадцать жанров не должны выталкивать сортировку за экран */
.filters__scroll {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 232px;
    overflow-y: auto;
    padding-right: 4px;
}

.filters__scroll::-webkit-scrollbar {
    width: 6px;
}

.filters__scroll::-webkit-scrollbar-thumb {
    border-radius: var(--radius-pill);
    background: var(--border-strong);
}

.check__label {
    flex: 1 1 auto;
    min-width: 0;
}

.check__count {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
}

.check:has(.check__box:checked) .check__label {
    color: var(--text-primary);
    font-weight: var(--fw-semibold);
}

.filters__value {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
}

.filters__footer {
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

/* ---------- Планшет ---------- */

@media (max-width: 1024px) {
    .catalog__layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: var(--space-5);
    }

    .catalog__grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* ---------- Мобильный: сайдбар уходит в bottom sheet ---------- */

@media (max-width: 860px) {
    .catalog__layout {
        display: block;
    }

    .catalog__sheet-btn {
        display: inline-flex;
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
    }

    .catalog__sort-desktop {
        display: none;
    }

    .catalog__grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--space-3);
    }

    /*
     * Без JS сайдбар остаётся обычной формой под сеткой, и кнопка «Фильтры»
     * просто уводит к ней якорем. Класс `filters--sheet` ставит catalog.js —
     * только тогда форма превращается в выезжающую панель.
     */
    .filters {
        position: static;
        margin-top: var(--space-6);
        padding: var(--space-4);
    }

    .filters--sheet {
        display: none;
    }

    /*
     * Закрытая панель именно `display: none`, а не сдвиг за экран: так она
     * не ловит фокус табом и не всплывает на скриншотах, где инструмент
     * принудительно включает видимость всем элементам.
     */
    .filters--sheet.is-open {
        display: flex;
        position: fixed;
        z-index: var(--z-dialog);
        inset: auto 0 0 0;
        max-height: 86vh;
        margin: 0;
        border-radius: var(--radius-hero) var(--radius-hero) 0 0;
        box-shadow: var(--shadow-dialog);
        transform: translateY(101%);
        transition: transform var(--t-base) var(--ease);
    }

    .filters--sheet.is-open.is-in {
        transform: translateY(0);
    }

    .filters--sheet .filters__body {
        overflow-y: auto;
    }

    .filters--sheet .filters__close {
        display: inline-flex;
    }

    .filters--sheet .filters__scroll {
        max-height: 200px;
    }

    .catalog__backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-dialog) - 1);
        padding: 0;
        background: var(--bg-backdrop);
        border: 0;
        opacity: 0;
        transition: opacity var(--t-base) var(--ease);
    }

    .catalog__backdrop.is-open {
        display: block;
    }

    .catalog__backdrop.is-in {
        opacity: 1;
    }
}

@media (max-width: 560px) {
    /* На узкой карточке рейтинг и онлайн должны оставаться в одну строку */
    .catalog__grid .game-card__meta {
        gap: var(--space-2);
    }

    .catalog__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}