/*
 * Component: Course Card (新規) — thai-massage
 * Spec: DESIGN.md §6-3 + docs/thai-massage-structure-draft.md (MENU コース6枚)
 *
 * about-service のコース一覧。1 枚 = 画像 + コース名 + 施術効果 (description)
 * + 所要時間 + 料金 + 対象症状タグ。OfferCatalog JSON-LD と二重持ち。
 *
 * ★ カード構造 (v3.0 / 参照 ref_pc_menu_full 準拠):
 *   画像 (.course-card__media-wrap) を主役にし、その上に英字名 (.course-card__name-en)
 *   を白文字オーバーレイ（.course-card__media-scrim のダーク暗幕で可読性確保）。
 *   画像の下に コース名(和) / 所要時間 / 料金 / 説明 / 対象症状。
 *
 * ★ レイアウト方針 (DESIGN.md §6-3 v2.0):
 *   - 2 カラム固定グリッド grid-template-columns: repeat(2, 1fr)（参照準拠）。
 *     @media(max-width:768px) で 1 カラム化。
 *     ※ v1.0 の auto-fit/minmax は参照が明確な 2 列のため廃止。
 *   - courses は 1〜6 件。pages 側で固定ブロックをインライン記述し、
 *     未使用分は CSS（空カード非表示）で隠す。
 *   - 空カード非表示: 名前要素 (.course-card__name) が :empty ならカードごと
 *     display:none。
 *   - グリッドラッパは about-service が .course-list、index teaser が .course-grid。
 *     両者を同一レイアウトで扱う。
 *
 * クラス名規約 (component HTML と一致):
 *   .course-card / .course-card__media-wrap / .course-card__media /
 *   .course-card__media-scrim / .course-card__name-en / .course-card__body /
 *   .course-card__name / .course-card__description /
 *   .course-card__spec / .course-card__duration /
 *   .course-card__price / .course-card__symptoms
 */

.course-grid,
.course-list {
  display: grid;
  /* 2 カラム固定（DESIGN.md §6-3 v2.0・参照準拠） */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-lg);
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.course-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  /* card shell: hover-lift と同系の transition (DESIGN.md §6-7 shell 共有) */
  transition:
    transform var(--duration-normal) var(--easing-standard),
    box-shadow var(--duration-normal) var(--easing-standard);
}

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px var(--color-shadow-soft);
}

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

/*
 * ★ 画像メディア (主役) — 参照 (ref_pc_menu_full) 準拠 v3.0:
 *   .course-card__media-wrap が positioning context（overflow:hidden / aspect-ratio）。
 *   その上に scrim（下方向グラデの暗幕）と英字名(nameEn)をオーバーレイ配置。
 *   inline aspect-ratio 禁止 → 比率はここで指定。
 */
.course-card__media-wrap {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-section-alt);
}

.course-card__media {
  display: block;
  width: 100%;
  height: 100%;
}

.course-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--easing-standard);
}

.course-card:hover .course-card__media img {
  transform: scale(1.05);
}

/* 可読性確保のダークスクリム（下方向グラデ）。色は overlay トークン。 */
.course-card__media-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 35%,
    var(--color-overlay-strong) 100%
  );
}

.course-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap-md);
}

/* 英字スクリプト名（--font-display）を画像下部に白文字オーバーレイ（参照準拠）。
   scrim の上に重ねるため z-index を持たせる。空なら :empty で非表示。 */
.course-card__name-en {
  position: absolute;
  left: var(--gap-md);
  right: var(--gap-md);
  bottom: var(--gap-md);
  margin: 0;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: 500;
  font-style: italic;
  letter-spacing: var(--tracking-wide);
  line-height: var(--lh-tight);
  color: var(--color-text-on-dark);
}

.course-card__name-en:empty {
  display: none;
}

.course-card__name {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-heading-md);
  font-weight: 500;
  line-height: var(--lh-heading);
  color: var(--color-text);
  margin: 0;
}

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

/* 所要時間 / 料金の仕様リスト（about-service の course-card で使用）。
   各行は「ラベル ↔ 値」を両端寄せ。component(course-card.html)とクラス名一致。 */
.course-card__spec {
  margin: var(--gap-xs) 0 0;
  padding-top: var(--gap-sm);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.course-card__spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-md);
  margin: 0;
}

.course-card__spec-label {
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-tertiary);
}

.course-card__duration {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-tertiary);
}

.course-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-heading-md);
  letter-spacing: var(--tracking-wide);
  color: var(--color-primary);
  margin-left: auto;
}

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

.course-card__symptom {
  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;
}

/* 対象症状が無い (空) 場合はタグ枠ごと隠す */
.course-card__symptoms:empty {
  display: none;
}

@media (max-width: 768px) {
  .course-grid,
  .course-list {
    /* 768px 以下は 1 カラム化 (DESIGN.md §6-3 / §9) */
    grid-template-columns: 1fr;
  }
}