/* ==========================================================================
   works-card.css — トップ／WORKS一覧／詳細で共有するカードとslider

   c-works-slider … Swiperのコンテナ（トップ・詳細の関連実績）
   c-works-item   … 絞り込みの単位。トップではswiper-slide、一覧ではグリッドの1セル
   c-works-card   … カード本体（__thumb / __body / __name / __tags）

   縦方向の配置とフィルターの並び方向は各ページCSSが担当する
   （トップは .p-index-works__filter、一覧は .p-works__filter）。
   sliderの横方向、カードの見た目、絞り込み時の状態はここを使用する。
   ========================================================================== */

.c-works-slider {
  width: calc(100% + 2 * var(--space-side));
  margin-inline: calc(-1 * var(--space-side));
  padding-inline: var(--space-side);
}

.c-works-item {
  height: auto;
}

.c-works-card {
  display: flex;
  flex-direction: column;
  color: inherit;
}

.c-works-card__thumb {
  display: block;
  aspect-ratio: 506 / 380;
  border-radius: 4px;
  overflow: hidden;
}

.c-works-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}

/* タッチ端末ではタップ後にサムネイルの拡大が張り付くため包む
   （docs/sp-strategy.md 決定8） */
@media (hover: hover) {
  .c-works-card:hover .c-works-card__thumb img {
    transform: scale(var(--hover-thumb-scale));
  }
}

.c-works-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-y-12) var(--space-x-12);
  padding-block: var(--space-y-20);
}

.c-works-card__name {
  font-family: var(--font-mincho-m);
  font-weight: normal;
  font-size: var(--fs-16);
  line-height: 1.75;
  letter-spacing: 0.15em;
  color: var(--color-text);
  font-feature-settings: "palt" 1;
}

.c-works-card__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-y-12) var(--space-x-12);
}

.c-works-item.is-hidden {
  display: none;
}

/* 絞り込みの切り替えと LOAD MORE の追加分で、カードが 1 枚ずつ入ってくる。
   NEWS の行にも同名の is-entering があるが、動きは別々に持つ（カードと
   テキスト行で移動量や尺を変える前提。揃える必要が出たら都度合わせる）。 */

/* fill-mode は backwards だけにする。遅延中は from（透明）で待たせる必要が
   あるが、to は要素の素の状態と同じなので forwards まで広げる意味が無い。
   both のままだと再生後もアニメーションが値を当て続け、合成レイヤーと
   終了状態が要素に残る。 */
.c-works-item.is-entering {
  animation: c-works-enter 0.4s var(--ease) backwards;
}

@keyframes c-works-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}