/* ============================================================
   work-card.css
   WorkCard コンポーネント専用のスタイル
   （このファイル内のクラスは work-card__ プレフィックスで統一し、
     他コンポーネントと衝突しないようにしている）
   ============================================================ */

/* カード全体 = 1 作品。
   上から サムネイル → private work / クライアント名 → タイトル →
   タグ を縦に並べる。サムネイル → 文字は 14px、文字同士は 8px。 */
.work-card {
  display: flex;
  flex-direction: column;
  /* 文字同士は 8px。サムネイルと文字の間だけ 14px（下の margin-top で戻す） */
  gap: var(--work-card-text-gap); /* 8px */

  /* 固定幅・最大幅は持たない。
     幅はグリッドの列幅（= 余白と gap から算出される）に従う。 */
  width: 100%;
}

/* サムネイルの外枠: カード幅いっぱい。固定サイズは持たず比率だけ維持する。
   角丸 / 枠線 / シャドウ / グラデーション / オーバーレイは付けない。
   中の画像が拡大してもカードの大きさは変わらないよう、はみ出しは隠す。 */
.work-card__thumbnail {
  display: block;
  width: 100%;
  aspect-ratio: var(--work-card-thumbnail-ratio);  /* 400 / 270 */
  overflow: hidden;
}

/* 中の画像。枠いっぱいに敷いて切り抜く */
.work-card__thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 専用クラスを付けた候補画像があるカードだけ、画像を重ねて切り替える。 */
.work-card__thumbnail--rotating {
  position: relative;
}

.work-card__thumbnail--rotating .work-card__thumbnail-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.work-card__thumbnail--rotating
  .work-card__thumbnail-image--active {
  opacity: 1;
}

/* ホバー中は画像を動かさず、文字だけを 0.4 秒で薄くする。 */
.work-card :is(
    .work-card__client,
    .work-card__title,
    .work-card__subtitle,
    .work-card__tags
  ) {
  transition: opacity 0.4s ease;
}

.work-card:hover :is(
    .work-card__client,
    .work-card__title,
    .work-card__subtitle,
    .work-card__tags
  ),
.work-card.is-transitioning :is(
    .work-card__client,
    .work-card__title,
    .work-card__subtitle,
    .work-card__tags
  ),
.work-card:focus-visible :is(
    .work-card__client,
    .work-card__title,
    .work-card__subtitle,
    .work-card__tags
  ) {
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .work-card__thumbnail--rotating .work-card__thumbnail-image,
  .work-card :is(
      .work-card__client,
      .work-card__title,
      .work-card__subtitle,
      .work-card__tags
    ) {
    transition: none;
  }
}

/* private work / クライアント名。サムネイルとの間だけ 14px にする */
.work-card__client {
  margin-top: calc(var(--work-card-gap) - var(--work-card-text-gap));  /* 14 - 8 */

  font-size: var(--font-size-s);            /* 12px */
  letter-spacing: var(--letter-spacing-s);  /* 2%  */
  line-height: var(--line-height-base);     /* 140% */
}

/* 作品タイトル: 文字数が増えてもフォントサイズは変えず、折り返す */
.work-card__title {
  font-size: var(--font-size-title);        /* 18px */
  letter-spacing: var(--letter-spacing-m);  /* 5%  */
  line-height: var(--line-height-base);     /* 140% */
  font-weight: var(--font-weight-title);    /* 600（タイトルのみ） */
}

/* タイトルの補足。タグと同じ大きさ */
.work-card__subtitle {
  margin-top: -4px;
  font-feature-settings: "palt" 1;
  text-spacing-trim: trim-start;
  font-size: var(--font-size-body);         /* 13px */
  font-weight: var(--font-weight-base);
  letter-spacing: var(--letter-spacing-body); /* 13% */
  line-height: var(--line-height-base);     /* 140% */
}

/* 担当範囲（"企画 / グラフィックデザイン" 形式）。
   スラッシュ区切りなので、カード幅を超えたら自然に折り返す。
   作品一覧の中で軽いメタ情報として見えるよう、装飾は付けない。 */
.work-card__tags {
  margin-top: 10px;

  /* 折り返しはタグとタグの間（半角スペース）だけ。
     日本語のタグが途中で改行されないようにする。
     1 つのタグがカード幅を超える場合だけ、やむを得ず内部で折り返す。 */
  word-break: keep-all;
  overflow-wrap: anywhere;

  font-size: var(--font-size-s);            /* 12px */
  letter-spacing: var(--letter-spacing-s);  /* 2%  */
  line-height: var(--line-height-base);     /* 140% */
}