/* ==========================================================================
   c-category — Figma: Category（一覧ページの絞り込みチップ / filter-topic）
   見た目は c-tag と同じ Figma コンポーネント。こちらはリンク（絞り込み）用で、
   バリアント PC_hover（gray/900 地・白文字）を :hover / 選択中（aria-current）に使う。
   ========================================================================== */

.c-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.c-category {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  background-color: var(--color-bg-subtle);
  color: var(--color-icon-strong); /* Figma: color/icon/strong をテキストに使用 */
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.c-category::before {
  content: "#";
  color: var(--color-purple-500); /* semantic に該当なし（Figma: purple/500） */
  transition: color 0.2s ease;
}

.c-category:hover,
.c-category[aria-current="page"] {
  background-color: var(--color-gray-900); /* Figma: gray/900（bg/inverse は gray/800 のため primitives を使用） */
  color: var(--color-text-inverse);
}

.c-category:hover::before,
.c-category[aria-current="page"]::before {
  color: var(--color-text-inverse);
}

@media (prefers-reduced-motion: reduce) {

  .c-category,
  .c-category::before {
    transition: none;
  }
}