/* ==========================================================================
   works.css — WORKS ページ専用スタイル
     1 ページ集約 + フィルター UI（HANDOFF §5-4 確定）。

   フィルターはフラットデザインのラジオボタン（小さな円 ○ → ●）+ ラベル。
   ── 文字組みは HANDOFF §3-1 + about の `.method-card-name-en` パターンに準拠
   ── アクティブ表示は色階調（fg-mute → fg）+ ラジオ円の塗りつぶし
   ── タブ／タグ UI 的装飾（pill / uppercase / 太線）は使わない
   ========================================================================== */


/* ==========================================================================
   フィルターセクション（page-head の下、案件リストの上）
     about の Our SDGs / Company / Access と同じ「section-label + 内容」リズム。
   ========================================================================== */
.works-filter-section {
  max-width: 800px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.works-filter-section .section-label {
  margin-bottom: clamp(0.85rem, 1.6vw, 1.25rem);
}


/* ==========================================================================
   フィルター項目（ラジオボタン）
     ── ネイティブの input は視覚的に隠す（accessible に keyboard 操作可）
     ── span.works-filter-radio-mark を疑似ラジオ円として描画
   ========================================================================== */
.works-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}

.works-filter-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  padding: 0.15rem 0;
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--color-fg-mute);
  transition: color 200ms ease;
}
.works-filter-radio:hover {
  color: var(--color-fg);
}

/* ネイティブ input は視覚的に非表示（keyboard・SR は引き続き有効） */
.works-filter-radio input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 疑似ラジオ円：未選択 = 透明、選択 = 塗りつぶし */
.works-filter-radio-mark {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border: 1px solid var(--color-fg-mute);
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  transition: background 200ms ease, border-color 200ms ease;
}
.works-filter-radio:hover .works-filter-radio-mark {
  border-color: var(--color-fg);
}
.works-filter-radio input[type="radio"]:checked ~ .works-filter-radio-mark {
  background: var(--color-fg);
  border-color: var(--color-fg);
}
/* チェック中の項目はラベル文字も fg に */
.works-filter-radio:has(input[type="radio"]:checked) {
  color: var(--color-fg);
}

/* キーボード focus（accessibility） */
.works-filter-radio input[type="radio"]:focus-visible ~ .works-filter-radio-mark {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}


/* ==========================================================================
   案件カードリスト（既存 .works-list を 800 幅に拡大、カテゴリラベル追加）
   ========================================================================== */
.works-list--all {
  max-width: 800px;
}

/* メタ行（年）と cats を 1 行に並べる */
.works-list--all .works-meta {
  display: inline-block;
  margin-bottom: 0.5rem;
  vertical-align: baseline;
}

/* カテゴリラベル：about の .method-card-name-en パターンに準拠
   ── Cormorant italic + ／ 区切り + fg-mute、pill / border は付けない。 */
.work-cats {
  display: inline;
  margin-left: 0.15rem;
}
.work-cat {
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  line-height: 1.85;
  color: var(--color-fg-mute);
  white-space: nowrap;
}
.work-cat::before {
  content: '／';
  font-style: normal;
  letter-spacing: 0;
  margin-right: 0.25rem;
  color: var(--color-fg-mute);
}


/* ==========================================================================
   フィルター適用時の非表示
   ========================================================================== */
.works-list--all li.is-hidden {
  display: none;
}


/* ==========================================================================
   レスポンシブ — 768px ブレークポイント
   ========================================================================== */
@media (max-width: 768px) {
  .works-filter-section {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
  }
  .works-filter {
    gap: 0.5rem 1.25rem;
  }
  .works-filter-radio {
    font-size: 0.95rem;
    gap: 0.4rem;
  }
  .work-cat {
    font-size: 0.88rem;
  }
}