/* ==========================================================================
   CATALOG.CSS — страница каталога (/technika/) и категорий
   --------------------------------------------------------------------------
   Цвета — через var(--c-*) из static/css/sys/color-theme.css
   Компонент .filter-chip — интерактивный (ссылка-фильтр), НЕ путать с .badge
   Брейкпоинт: 560px
   ========================================================================== */

/* ==========================================================================
   2. ФИЛЬТРЫ КАТЕГОРИЙ
   ========================================================================== */
.catalog-filters {
    display: flex;                          /* чипы в строку */
    flex-wrap: wrap;                        /* перенос на новую строку, если не влезли */
    gap: 8px;                               /* зазор между чипами */
    justify-content: center;                /* центрируем весь ряд */
    margin-bottom: 40px;                    /* отступ до сетки карточек ниже */
}

/* Чип-фильтр: ссылка-переключатель категории */
.filter-chip {
    display: inline-block;
    padding: 8px 18px;                      /* компактная плашка, но крупная цель для клика */
    background: var(--c-bg-muted);          /* серый фон в покое — не отвлекает */
    border: 1px solid var(--c-border);      /* мягкая изумрудная рамка */
    color: var(--c-heading);                /* тёмно-изумрудный текст — читается на сером */
    text-decoration: none;                  /* это <a>, подчёркивание не нужно */
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.filter-chip:hover,
.filter-chip.active {
    background: var(--c-accent);            /* изумрудный фон — «выбран/наведён» */
    color: var(--c-on-accent);              /* белый текст на изумрудном (токен см. ниже) */
    border-color: var(--c-accent);          /* рамка сливается с фоном */
}

/* ==========================================================================
   3. АДАПТИВНОСТЬ
   ========================================================================== */
@media (max-width: 560px) {
    .catalog-filters {
        gap: 6px;                           /* плотнее — узкий экран */
        margin-bottom: 30px;                /* меньше отступ — экономия вертикали */
    }

    .filter-chip {
        padding: 6px 12px;                  /* компактнее — влезает больше чипов в строку */
        font-size: 12px;
    }
}