/* FILE: assets/css/page-works.css */
/* 実績一覧ページ（/works/index.html）固有のスタイル */

/* カテゴリ絞り込みボタン（assets/js/works-filter.js と対で使う） */
.works-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.works-filter {
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--color-ink);
  background-color: var(--color-surface);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.works-filter:hover {
  border-color: var(--color-ink);
}

/* 選択中のカテゴリ。色だけに頼らず、太字でも区別できるようにしている */
.works-filter.is-active {
  background-color: var(--color-bar);
  border-color: var(--color-bar);
  color: #FFFFFF;
  font-weight: var(--fw-bold);
}

/* 絞り込みで表示件数が減っても、カードの幅を変えない。

   共通の .card-grid は repeat(auto-fit, ...) なので、
   表示が2件になると空いた列が詰められてカードが横に伸びてしまう。
   実績一覧では**常に3列ぶんの幅**を確保し、
   残った枠は空けたまま左から順に並べる。 */
.works-grid .card-grid {
  grid-template-columns: repeat(3, 1fr);
  justify-items: stretch;
}

@media (max-width: 1023px) {
  .works-grid .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .works-grid .card-grid {
    grid-template-columns: 1fr;
  }
}

/* ★サムネイルの高さ・比率（16:10 / object-fit: contain）は
   base.css の「サムネイルの共通枠」に集約されています。
   .works-card__media はそちらのセレクタ一覧に入っているので、
   ここには比率を書きません。
   カードの幅は layout.css の .card-grid（グリッド）で
   全件同じになります。 */

/* 動画事例であることの表示（facade方式。HANDOVER_v3.md §6-3） */
.works-card__video-mark {
  background-color: var(--color-bar);
  color: #FFFFFF;
  border-color: var(--color-bar);
}

.works-card__title {
  font-size: var(--fs-md);
}

/* 動画事例のポスター画像には再生マークを重ねる代わりに、
   カード本文側の「動画」タグで示している（上の .works-card__video-mark） */

/* =========================================================
   事例カードのマウスオーバー演出とリンク化

   ・サムネイルは枠のサイズを変えずに、中の画像だけ少し寄る
     （枠に overflow: hidden を掛けているので、はみ出した分は隠れる。
       カードの高さは変わらないので、行揃えは崩れない）
   ・タイトルの色が薄くなって、押せることが分かる
   ・カードのどこを押しても詳細ページへ飛ぶ
   ========================================================= */
.works-card {
  position: relative;
}

/* サムネイルの外枠。地色と細い囲み線は base.css の共通ルールが当たる */
.works-card__frame {
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.works-card__media {
  transition: transform 0.35s ease;
}

/* タイトルのリンク。文字色は本文と同じにしておき、
   マウスを乗せたときだけ薄くする */
.works-card__link {
  color: inherit;
  transition: color 0.2s ease;
}

/* リンクの当たり判定をカード全体に広げる。
   こうするとリンクはHTML上ひとつだけで済むので、
   スクリーンリーダーが同じ行き先を何度も読み上げずに済む */
.works-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.works-card:hover .works-card__media,
.works-card:focus-within .works-card__media {
  transform: scale(1.06);
}

.works-card:hover .works-card__link,
.works-card__link:focus-visible {
  color: var(--color-muted);
}

/* キーボード操作時は、カード全体に枠を出す */
.works-card:focus-within {
  outline: 3px solid var(--color-ink);
  outline-offset: 2px;
}

.works-card__link:focus-visible {
  outline: none; /* 上のカード全体の枠で示すため、二重に出さない */
}

/* 動きを減らす設定にしている利用者には、拡大演出を行わない */
@media (prefers-reduced-motion: reduce) {
  .works-card__media {
    transition: none;
  }
  .works-card:hover .works-card__media,
  .works-card:focus-within .works-card__media {
    transform: none;
  }
}