/**
 * Фильтр по аудитории (SaaS, макет 18.08) — см. saas-cards.blade.php +
 * public/js/saas-filter.js. Чипы сверены с Figma (node 2865:6663/6664,
 * bxN3hERIbSkzfRMwzibAfu): активный чип — заливка #1A1A1A/белый текст,
 * неактивный — простой текст без фона/рамки (в макете так и есть, не
 * упрощение). Ховер на неактивном чипе — не в макете (там только два
 * статичных состояния), добавлен для обычного веб-UX ожидания
 * "кликабельно", не противоречит дизайну.
 *
 * Ряд чипов центрирован (`justify-content: center`), не прижат к левому
 * краю — пересверено 2026-09-16 через Figma-метаданные родительского
 * "Frame 9418" (x=20 y=475 width=1867): группа чипов x604-1263, центр
 * 933.5 = ровно центр фрейма (1867/2). Заодно поймали и второй баг —
 * между чипами по горизонтали в макете тоже 8px (расстояние между
 * соседними Filter_item, не 24px, как было раньше в column-gap).
 */
.saas-filter__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
}

.saas-filter__chip {
    display: inline-flex;
    align-items: center;
    padding: 8px;
    border: none;
    background: none;
    border-radius: 2px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.02em;
    color: #1A1A1A;
    cursor: pointer;
}

.saas-filter__chip:hover {
    background: rgba(26, 26, 26, 0.05);
}

.saas-filter__chip--active,
.saas-filter__chip--active:hover {
    background: #1A1A1A;
    color: #fff;
}