/* Чипы ленты `/blog` и `/cases`: тип анимации — как у плашек кейсов на `/why`
   (задачи rp-1510-wp-chips-hover и rp-1510-wp-chips-hover-2, решения Павла 15.10.2026).

   Тип эффекта — как у плашек `/why`: красный текст + мягкая рамка + свечение,
   без заливки mist. Поверх него — подъём `translateY(-2px)`, как у чипов ленты
   был изначально и как отдельно просит Павел.

   Активный чип несёт фирменный градиент (как кнопка «Консультация» в шапке) —
   тот же токен `--grad` из `main.css`, что у `.btn--primary`.

   Отдельным файлом, а не правкой `sections.css`: в нём норма карусели кейсов
   от закрытой соседней задачи, и он заперт как чужой слайс. Прецедент —
   `crumbs.css`: подключается так же последним, после адаптивного слоя.

   Эталон (`assets/css/blocks.css`, блок `.cases-why-block`):
     .cases-why-block .case-card:hover .case-badge {
       color: #9F0208;
       border-color: #D15A5A;
       box-shadow: 0px 0px 10px rgba(159, 2, 8, 0.25); }
   Цвета берём токенами темы, а не литералами: `--red` = #9F0208,
   `--red-light` = #D15A5A — значения совпадают с эталоном попиксельно. */

/* Переход ведём по четвёрке «текст / рамка / свечение / подъём» — ровно те
   свойства, которые меняются. `background` из перехода уходит: заливки у чипа
   больше нет, и лишняя кривая осталась бы мёртвой. Кривая — `--ease` (.3s ease). */
.case-feed__chip {
  transition: color var(--ease), border-color var(--ease), box-shadow var(--ease),
              transform var(--ease);
}

/* Наведение и фокус с клавиатуры ведут себя одинаково (доступность: чип —
   ссылка, и по Tab он должен читаться так же, как под мышью).
   `:not(.case-feed__chip--active)`: активный чип остаётся как есть — градиент
   без мягкой рамки, свечения и подъёма. */
.case-feed__chip:not(.case-feed__chip--active):hover,
.case-feed__chip:not(.case-feed__chip--active):focus-within {
  background: transparent;          /* заливки mist нет */
  transform: translateY(-2px);      /* подъём −2px — как у чипов ленты */
  border-color: var(--red-light);   /* мягкий красный — как у плашек /why */
  box-shadow: 0 0 10px rgba(159, 2, 8, .25);
}
.case-feed__chip:not(.case-feed__chip--active):hover a,
.case-feed__chip:not(.case-feed__chip--active):focus-within a { color: var(--red); }

/* Активный чип: фирменный градиент вместо сплошного красного. Тот же токен,
   что у кнопки «Консультация» в шапке: `--grad` = linear-gradient(-71deg,
   #9F0208, #D15A5A). Рамка остаётся по толщине (1px), но прозрачной, поэтому
   габарит чипа не меняется — активный и обычные чипы одной высоты и ширины.
   `background-origin: border-box` — чтобы градиент заливал и полосу рамки:
   с умолчанием `padding-box` он до рамки не дошёл бы (под ней остался бы цвет
   фона), а при повторении тайла по краю дал бы шов. Подъём и свечение
   активному чипу, как и раньше, не добавляются. */
.case-feed__chip--active {
  background-image: var(--grad);
  background-origin: border-box;
  border-color: transparent;
}

/* При `prefers-reduced-motion` не анимируем ничего: ни тень/свечение, ни подъём.
   Норма из `sections.css` перекрыта этим файлом (он идёт последним), поэтому
   повторена здесь явно — иначе подъём вернулся бы мимо нормы. */
@media (prefers-reduced-motion: reduce) {
  .case-feed__chip { transition: none; }
  .case-feed__chip:not(.case-feed__chip--active):hover,
  .case-feed__chip:not(.case-feed__chip--active):focus-within {
    box-shadow: none;
    transform: none;
    transition: none;
  }
}