/*
 * Component: Therapist Card (参照 ref_pc_therapist 準拠 v2) — thai-massage
 * Spec: DESIGN.md §6-6 + §5-5 + docs/thai-massage-structure-draft.md
 *       参照レイアウト = 3 カラム・写真の上に氏名(和文)を白文字オーバーレイ。
 *       写真の下に 役職 / 略歴 / 資格(credentialsText) / 得意施術(knowsAbout)。
 *       (CLAUDE.md ルール7・構造のみ流用 / 色は token のみ / 文言・画像は config 経由)
 *
 * Person JSON-LD と対応。クラス名は維持して JSON-LD / site-runtime 整合を壊さない。
 *
 * ★ レイアウト制約 (スタッフ初期1名対応・宮田指示 / DESIGN.md §5-5):
 *   - therapist は 1〜12 名。pages 側で固定 12 ブロックをインライン記述し、
 *     未使用分は CSS で非表示。
 *   - グリッドは auto-fill + minmax + justify-content:center:
 *       1 名 = 中央に単独カード (左に偏らない・空きスペース無し)
 *       2 名 = 3 カラム内で左から自然に並ぶ
 *       3 名以上 = 3 カラムグリッドで自然に折り返す
 *       (1024px: 2 カラム / 768px: 1 カラム)
 *   - カードに max-width (360px) を付け 1 名でも間延びを防ぐ。
 *
 * クラス名規約:
 *   .therapist-grid / .therapist-card / .therapist-card__photo /
 *   .therapist-card__photo-frame / .therapist-card__photo-overlay /
 *   .therapist-card__name / .therapist-card__name-ja / .therapist-card__name-kana /
 *   .therapist-card__body / .therapist-card__role / .therapist-card__bio /
 *   .therapist-card__credentials / .therapist-card__knows
 */

.therapist-grid {
  /* 人数連動センタリング (DESIGN.md §5-5 / §6-6・宮田指示)。
     flexbox + flex-wrap + justify-content:center により、表示枚数に応じて常に中央へ:
       1 名 = 中央単独 / 2 名 = 中心から左右対称 / 3 名 = 3 枚中央 /
       4〜6 名 = 中央寄せで折り返し。
     ※ grid の auto-fill は空列を生成して 1fr で埋めるため 1 名が「列内中央」に
        留まりコンテナ中央に来なかった。flex はカード実体を中央寄せできる。 */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-xl);
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.therapist-card {
  /* flex-basis でカード幅を決定（PC 最大 3 枚/行）。grow:0 で間延びを防ぎ、
     余白は justify-content:center が左右対称に振り分ける。 */
  flex: 0 1 340px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
}

/*
 * ★ 空カード非表示 (固定 12 ブロックの未使用分を隠す):
 *   名前(和文)が空 → カードごと非表示。__name-ja は写真オーバーレイ内に移動したが
 *   .therapist-card の子孫であるため :has 判定は維持される。
 *   1 名のみのとき残り 11 枚が消え、flex-wrap + justify-content:center により
 *   残った 1 枚が中央単独で表示される。
 */
.therapist-card:has(.therapist-card__name-ja:empty) {
  display: none;
}

/* ── 写真 + 氏名オーバーレイ ───────────────────────────── */
.therapist-card__photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* カード視覚ブロックの角に控えめな丸み（CTA 6px と統一・宮田指示）。
     overlay / scrim / 氏名は inset:0 のため丸角に追従してクリップされる。 */
  border-radius: 6px;
  background: var(--color-bg-section-alt);
}

.therapist-card__photo-frame {
  display: block;
  width: 100%;
  height: 100%;
}

/* zoom の transform / transition は共通 hover.css (.hover-zoom img) が担う。
   ここでは object-fit のみ定義（顔写真の見切れ防止）。 */
.therapist-card__photo-frame img {
  object-fit: cover;
}

/* ダークスクリム: 氏名(白文字)の可読性を底部で確保。
   色は variables.css の overlay token のみ（page-header と同系・HEX直書き禁止）。 */
.therapist-card__photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--color-overlay-light) 0%,
    var(--color-overlay-hero-top) 45%,
    var(--color-overlay-hero-bottom) 100%
  );
  pointer-events: none;
}

/* 氏名を写真の下端に白文字でオーバーレイ */
.therapist-card__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: var(--gap-md) var(--gap-md) var(--gap-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--color-text-on-dark);
}

.therapist-card__name-ja {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-heading-md);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  line-height: var(--lh-heading);
}

.therapist-card__name-kana {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-widest);
  opacity: 0.85;
}

.therapist-card__name-kana:empty {
  display: none;
}

/* ── 写真下の本文 (役職 / 略歴 / 資格 / 得意施術) ───────── */
.therapist-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  text-align: left;
  padding: var(--gap-md) 0 0;
}

.therapist-card__role {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-tertiary);
  margin: 0;
}

.therapist-card__role:empty {
  display: none;
}

/* 経験年数 (E-E-A-T): 役職の直下に控えめに表示（宮田 FB）。
   yearsOfExperience 未入力時は data-years="" で行ごと非表示（movie の data-yt と同方式）。 */
.therapist-card__years {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-primary);
  margin: var(--gap-xs) 0 0;
}

.therapist-card__years[data-years=""] {
  display: none;
}

/* セクション見出し（メッセージ / 認定資格）。「得意施術」(__knows-label) と統一した
   見た目で、各値の上に小見出しを付ける（宮田 FB）。値が空のときは見出しごと非表示にする
   （下の :has 出し分け）。 */
.therapist-card__field-label {
  display: block;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  margin: var(--gap-sm) 0 0;
}

/* 直後の値（hometown / bio / credentials）が空なら、その見出しは出さない（孤立見出し防止）。 */
.therapist-card__field-label:has(+ .therapist-card__hometown:empty),
.therapist-card__field-label:has(+ .therapist-card__bio:empty),
.therapist-card__field-label:has(+ .therapist-card__credentials:empty) {
  display: none;
}

/* 出身地・修行地 (E-E-A-T): 経験年数の直下に題目→内容で表示。任意入力＝空なら
   見出しごと非表示（上の :has 出し分け）。見た目は __bio と統一。 */
.therapist-card__hometown {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  margin: var(--gap-xs) 0 0;
}

.therapist-card__hometown:empty {
  display: none;
}

.therapist-card__bio {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  margin: var(--gap-xs) 0 0;
}

.therapist-card__bio:empty {
  display: none;
}

/* 資格名 + 取得年など (E-E-A-T) */
.therapist-card__credentials {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  margin: var(--gap-xs) 0 0;
}

.therapist-card__credentials:empty {
  display: none;
}

/* 得意施術 (knowsAbout) タグ。実体クラスは __knows-*（HTML と一致）。
   タグ表示＋空項目/空ブロック非表示（DESIGN.md §6-6・QA）。 */
.therapist-card__knows {
  margin: var(--gap-sm) 0 0;
}

.therapist-card__knows-label {
  display: block;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  margin-bottom: var(--gap-xs);
}

.therapist-card__knows-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
}

.therapist-card__knows-item {
  display: inline-block;
  padding: 3px 10px;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  background: var(--color-bg-section-alt);
  border-radius: 12px;
}

/* 空の knowsAbout 項目は出さない。全項目が空なら「得意施術」ブロックごと非表示。 */
.therapist-card__knows-item:empty {
  display: none;
}

.therapist-card__knows:not(:has(.therapist-card__knows-item:not(:empty))) {
  display: none;
}

/*
 * タブレット (1024px 以下): 最大 2 枚/行（flex-wrap が自動で折り返し・中央寄せ）。
 */
@media (max-width: 1024px) {
  .therapist-grid {
    gap: var(--gap-lg);
  }
}

/*
 * モバイル (768px 以下): 常に 1 枚/行・中央単独。
 * flex-basis:100% で 1 列化し、max-width で間延びを抑える。
 * 写真は縦長になりすぎないよう aspect-ratio を横長寄りに調整。
 */
@media (max-width: 768px) {
  .therapist-grid {
    gap: var(--gap-xl);
  }
  .therapist-card {
    flex-basis: 100%;
    max-width: 420px;
  }
  .therapist-card__photo {
    aspect-ratio: 16 / 11;
    max-height: 360px;
  }
  .therapist-card__photo-frame img {
    object-position: center 25%;
  }
}

@media (max-width: 480px) {
  .therapist-card__photo {
    aspect-ratio: 4 / 5;
    max-height: none;
  }
}