/*
 * Component: Voice Card (1カラム行型) — thai-massage
 * Spec: DESIGN.md §6-7 / 参照 ref_pc_voice_full（v3.0 で 1 カラム行型に再設計）
 *
 * お客様の声。1 行 = 丸アバター(左) + main(meta(カテゴリ / お名前 / 星評価) + 本文段落)。
 * 行は .voice-list 内で縦積みされ、行間に区切り線（border-bottom）が入る。
 * 用途: voice ページ（全件）。Review JSON-LD と対応（AIO の要）。
 *
 * ★ 可変長対応 (本テンプレ確定方針):
 *   - voices は可変件数。pages 側で固定ブロックをインライン記述し、
 *     未使用分は CSS で非表示にする。
 *   - 空カード非表示: 名前要素 (.voice-card__name) が :empty ならカードごと非表示。
 *
 * クラス名規約:
 *   .voice-list / .voice-card / .voice-card__avatar / .voice-card__main /
 *   .voice-card__meta / .voice-card__category / .voice-card__name /
 *   .voice-card__rating / .voice-card__stars / .voice-card__body
 *
 * 色は var(--color-*) のみ。HEX 直書き・!important・inline style 不使用。
 */

/* 1 カラム縦積みリスト（参照準拠）。読みやすい行幅に制限し中央寄せ。 */
.voice-list {
  display: flex;
  flex-direction: column;
  max-width: 56rem;
  margin: 0 auto;
}

/* 各行: アバター(左) + main(右)。行間は区切り線で仕切る。 */
.voice-card {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-lg);
  padding: var(--gap-lg) 0;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

/* 最終行は区切り線なし。 */
.voice-card:last-child {
  border-bottom: none;
}

/* ★ 空カード非表示 (固定ブロックの未使用分を隠す) */
.voice-card:has(.voice-card__name:empty) {
  display: none;
}

/* 空カードが隣接した場合に二重線が残らないよう、表示中の最後の行の線も消す */
.voice-card:has(+ .voice-card .voice-card__name:empty) {
  border-bottom: none;
}

/* 丸アバター (左・任意・token 背景のプレースホルダ) */
.voice-card__avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-section-alt);
  border: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice-card__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.voice-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sm) var(--gap-md);
}

.voice-card__category {
  display: inline-block;
  padding: 3px 12px;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-on-dark);
  background: var(--color-primary);
  border-radius: 12px;
  font-weight: 600;
}

.voice-card__category:empty {
  display: none;
}

.voice-card__name {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-heading-sm);
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
}

.voice-card__name:empty {
  display: none;
}

/* 星評価 (gold)。5 個の星を描画し、letter-spacing を付与。 */
.voice-card__rating {
  display: inline-flex;
  align-items: center;
}

.voice-card__stars {
  font-size: var(--fs-body);
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--color-star);
}

.voice-card__body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  margin: 0;
}

@media (max-width: 768px) {
  .voice-card {
    gap: var(--gap-md);
    padding: var(--gap-md) 0;
  }
  .voice-card__avatar {
    width: 56px;
    height: 56px;
  }
}