/* =================================================================
 * c-figure — 画像（任意でキャプション付き）
 * Figma: 画像スタイルガイド 5407:89815（「画像」「画像（キャプション付き）」）
 *
 *   画像サイズ（比率）・角丸・キャプションを共通化する最小単位。
 *   複数枚を並べるときは外側を c-figure-grid--cols-{2|3|4} で囲む。
 *
 * 比率（Figma）: 16:9（既定） / 1:1
 * 角丸: 32px（--radius-xl）  キャプション: 14px / lh1.8 / tracking0.04em / 中央
 *
 * 使い方: front.components.figure（Blade）経由
 * =================================================================*/

/* ---------- 単体の画像（figure） ---------- */
.c-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);              /* 画像〜キャプション 16px */
}

.c-figure__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;             /* 既定比率 */
  object-fit: cover;
  border-radius: var(--radius-xl);  /* 32px */
  background: var(--color-bg-02);   /* 読み込み前のプレースホルダ */
}

/* 比率バリアント */
.c-figure--1-1 .c-figure__img  { aspect-ratio: 1 / 1; }
.c-figure--free .c-figure__img { aspect-ratio: auto; }   /* 元画像の比率のまま */

/* 枠付きバリアント（Figma ガイドライン:「白背景に白背景色のイメージを配置する場合、
 * 画像に 1px のボーダーを付与」）。線色 = Neutral 04 / --color-border (#D9D9D9) */
.c-figure--bordered .c-figure__img {
  border: 1px solid var(--color-border);
}

/* キャプション（Figma: #333 / 14px / lh1.8 / tracking 0.04em=0.56px / 中央寄せ） */
.c-figure__caption {
  margin: 0;
  padding-inline: var(--space-2);   /* 8px */
  color: var(--color-text-default);
  font-family: var(--font-jp);
  font-size: var(--fs-body-sm);     /* 14px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);     /* 1.8 */
  letter-spacing: var(--letter-spacing-body); /* 0.04em */
  text-align: center;
}

/* ---------- 段組みレイアウト（1〜4列） ----------
 * PC: Figma の列数と余白に準拠。SP(<=1024px)で縮約。
 *   2列16:9 = 余白40px / 3列1:1・4列 = 余白32px（Figma）
 */
.c-figure-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);              /* 既定 32px */
}
.c-figure-grid--cols-2 { grid-template-columns: repeat(2, 1fr); gap: 40rem; }            /* Figma 2列16:9=40px */
.c-figure-grid--cols-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }  /* 32px */
.c-figure-grid--cols-4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }  /* 32px */

/* SP: 2/3列 → 1列（縦32px）、4列 → 2列（サムネ・16px）。BP は本体規定の1024px */
@media (max-width: 1023.98px) {
  .c-figure-grid--cols-2,
  .c-figure-grid--cols-3 { grid-template-columns: 1fr; gap: var(--space-6); }
  .c-figure-grid--cols-4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}