/* ==========================================================================
   9. バッジ / タグ / 評価 / フェアウェイインジケータ
   ========================================================================== */
/* .filter-trigger__badge（§8 の適用数バッジ）は .badge--accent と同一意図のためここに統合。 */
.badge,
.filter-trigger__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
}

.badge[hidden],
.filter-trigger__badge[hidden] {
  /* .badge の display:inline-flex は author-origin なので UA の [hidden]{display:none} より
     優先されてしまい、hidden 属性だけでは非表示にならない。明示的に上書きする。 */
  display: none;
}

.badge--accent,
.filter-trigger__badge {
  background: var(--accent);
  color: var(--accent-contrast);
}

.badge--neutral {
  background: var(--surface-sunken);
  color: var(--ink-700);
  border: 1px solid var(--border-color-strong);
}

/* セカンダリ（薄緑fill＋緑文字。アクティブなタブ配色）。件数など控えめに強調したい数値バッジ用。 */
.badge--soft {
  background: var(--accent-light);
  color: var(--accent-dark);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--border-color);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-700);
}

/* 統合ビュー（§12）の属性ピルの色付きバリアント（format.js tagHtml の variant）。
   昼食付=アンバー系 / キャディ付=ブルー系。
   （旧 .tag--warn（条件・注意系の赤ピル）はプラン名と重複情報のため廃止。） */
.tag--lunch {
  background: #fdf3e0;
  border-color: #f0dfad;
  color: #8a6414;
}

.tag--caddie {
  background: #eef3fb;
  border-color: #d8e2f0;
  color: #3a5a8a;
}

/* ピル先頭のアイコン（絵文字）。装飾用のため aria-hidden で出力される */
.tag__icon {
  display: inline-flex;
  align-items: center;
}

/* コース名 → 楽天GORA詳細ページへのリンク（検討リスト・共有投票ビュー共通） */
.course-name-link {
  color: inherit;
  text-decoration: none;
}

.course-name-link:hover,
.course-name-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.course-name-link__ext {
  display: inline-flex;
  align-items: center;
  color: var(--ink-500);
  margin-left: 2px;
}

.course-name-link:hover .course-name-link__ext {
  color: var(--accent);
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
}

.rating__stars {
  color: var(--star);
  letter-spacing: 1px;
  font-size: var(--text-sm);
}

.rating__value {
  font-weight: 700;
  color: var(--ink-900);
}

.rating__count {
  color: var(--ink-500);
  font-size: var(--text-xs);
}

/* 検討リスト比較テーブル専用の2行表示（星+数値の下に件数を折り返す）。
   ratingHtml(rating, reviewCount, { stacked: true }) が付与する（他画面は従来の1行表示のまま）。 */
.rating--stacked {
  flex-wrap: wrap;
  row-gap: 2px;
}

.rating--stacked .rating__count {
  flex-basis: 100%;
}

.fairway-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--surface-glass);
  color: var(--accent-dark);
  box-shadow: var(--shadow-xs);
}

.fairway-tag--wide {
  color: var(--accent-dark);
}

.fairway-tag--standard {
  color: var(--ink-700);
}

.fairway-tag--narrow {
  color: var(--danger);
}

/* 楽天口コミ評価軸「フェアウェイが広い」の値（「広い（4.2）」の「（4.2）」部分）。
   検討リスト比較テーブルのみで使う（fairwayTagHtml の scoreSlot オプション）。
   ロード完了までは空のまま＝ラベルのみ表示（js/views/shortlist.js 参照）。 */
.fairway-tag__score {
  /* 括弧前のスペースはテキスト側（" (3.7)"）で表現するため margin は持たせない。 */
  opacity: 0.8;
}


/* ==========================================================================
   10. コースカード + グリッド + 画像テーマ
   ========================================================================== */
.course-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .course-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.course-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* 検索中のローディングステート（スケルトンカード）。course-card と同じシェルを使い、
   結果描画時のレイアウトシフトを防ぐ */
.skeleton-card:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}

.course-card__media.skeleton {
  border-radius: 0;
}

.skeleton--line {
  height: 14px;
}

.skeleton--w70 { width: 70%; }
.skeleton--w60 { width: 60%; }
.skeleton--w45 { width: 45%; }

.skeleton--pill {
  height: 26px;
  width: 96px;
  border-radius: var(--radius-pill);
  margin-top: var(--space-2);
}

/* 浮き上がりはクリック可能領域（サムネ / タイトル）をホバーしたときだけ。カード全面に
   出すとクリックできない余白でも反応してアフォーダンスが誤解される（:has 非対応環境では
   単に浮かないだけで実害なし）。 */
.course-card:has([data-action="open-course"]:hover) {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.course-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
}

.course-card__image {
  width: 100%;
  height: 100%;
  transition: transform var(--transition-base);
}

.course-card__media:hover .course-card__image {
  transform: scale(1.04);
}

/* ---- カード写真カルーセル（#30b・#17） ----
   media 内を <img> ベースの横スクロールコンテナ（scroll-snap）にする。モバイルは
   ネイティブスワイプ、デスクトップはホバーで chevron。media 自体が aspect-ratio 4/3 の
   固定高さのため、写真の遅延到着・アップグレードでもレイアウトシフトは起きない。 */
.course-card__carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.course-card__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none; /* Firefox: スクロールバー非表示（dots が位置を担う） */
}

.course-card__track::-webkit-scrollbar {
  display: none;
}

.course-card__photo {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
  scroll-snap-stop: always; /* 1スワイプ=1枚（勢いで複数枚飛ばない） */
  background: var(--ink-300);
}

/* chevron: 通常は透明+クリック不可。ホバー対応環境（デスクトップ）のみ media ホバーで
   出現する。タッチ環境ではスワイプが操作手段のため出さない。キーボードフォーカス時は
   環境を問わず可視化する（透明なだけの操作不能フォーカスを作らない）。 */
.course-card__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--surface-glass);
  color: var(--ink-800);
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.course-card__nav--prev {
  left: var(--space-2);
}

.course-card__nav--next {
  right: var(--space-2);
}

@media (hover: hover) and (pointer: fine) {
  .course-card__media:hover .course-card__nav:not(:disabled) {
    opacity: 1;
    pointer-events: auto;
  }

  .course-card__nav:not(:disabled):hover {
    background: var(--surface);
  }
}

.course-card__nav:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* dots: 現在位置インジケータ（装飾扱い aria-hidden・クリック不可）。
   ホバー対応環境（デスクトップ）では写真上の常時オーバーレイを避けるため、chevron と
   同じタイミング（media ホバー / キーボードフォーカス時）のみ表示する。タッチ環境では
   スワイプ切替できることの唯一の手がかりのため常時表示を維持する。 */
.course-card__dots {
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: var(--space-1);
  pointer-events: none;
  transition: opacity var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
  .course-card__dots {
    opacity: 0;
  }

  .course-card__media:hover .course-card__dots,
  .course-card__media:focus-within .course-card__dots {
    opacity: 1;
  }
}

.course-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 2px rgba(20, 24, 26, 0.45);
}

.course-card__dot.is-active {
  background: var(--surface);
}

/* タイトルはリンクとして振る舞う（サムネと同じ遷移先）。ホバー/フォーカスで明示。 */
.course-card__name-link {
  cursor: pointer;
}

.course-card__name-link:hover {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.course-card__name-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 数値メトリクス行（★総合評価 / ⛳フェアウェイ / 気温）。画像上のpillから本文の1行へ集約。
   フェアウェイ・気温は非同期バックフィル（inline variant）。gapは広めに取り3項目を見分けやすく。 */
.course-card__metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-800);
}

.card-metric {
  position: relative; /* 即時ホバーツールチップ（::after）の基準 */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-800);
  white-space: nowrap;
}

.card-metric__star {
  color: var(--star);
}

/* メトリクス行内のフェアウェイ/気温は pill 装飾（背景・影・パディング・暑さ色/広さ色）を外し、
   アイコン＋数値のプレーン表示にする。⛳と数値の間隔は gap で担保（★のgapと揃える）。 */
.course-card__metrics .fairway-tag--inline,
.course-card__metrics .temp-tag--inline {
  position: relative; /* 即時ホバーツールチップ（::after）の基準 */
  gap: 4px;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  font-size: inherit;
  font-weight: 600;
  color: var(--ink-800);
}

/* フェアウェイのスコア数値を★・気温と同じ濃さに合わせる（pill用の opacity:0.8 を打ち消す）。 */
.course-card__metrics .fairway-tag--inline .fairway-tag__score {
  color: var(--ink-800);
  opacity: 1;
}

/* ホバーで即ツールチップ（★総合評価 / ⛳フェアウェイの広さ / ☀気温の定義）が出ることを示す。 */
.course-card__metrics [data-tooltip] {
  cursor: help;
}

.course-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  flex: 1;
}

.course-card__name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.3;
  /* 横3枚並びで所在地・メトリクス行の水平位置を全カードで揃えるため、名前を常に2行ぶんの高さに
     する（短い名前も2行ぶん確保・長い名前は2行で省略）。 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.3em);
}

.course-card__area {
  font-size: var(--text-sm);
  color: var(--ink-500);
}

.course-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* カード幅が狭くなり、料金と2ボタンを1行に並べると「追加済み」「予約」が縦組みに崩れるため、
   料金1行・ボタン1行の縦2段に変更（§3ユーザー要望）。 */
.course-card__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-4);
  border-top: 1px solid var(--border-color);
  margin-top: auto;
}

/* 料金は「¥12,990〜 税込 / 人」を1行（baseline揃え）にまとめる。 */
.course-card__price {
  position: relative; /* 即時ホバーツールチップ（::after「総額¥X〜 税込 / 人」）の基準 */
  display: inline-flex;
  align-self: flex-start; /* footer の flex 伸長を止め、料金の内容幅に収める（tooltip位置・hover領域を料金直下に） */
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  cursor: help;
}

.course-card__price-value {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--ink-900);
}

/* ボタン行: 検討リストトグルが残り幅、予約は内容幅。横に並べて縦崩れを防ぐ。
   一次アクションの序列（#17）: 検討リストに追加（.btn--primary）＞予約（.btn--secondary）
   ＞プランを見る（.btn--ghost、body側）。トグルは variant で見た目が変わるため
   data-action で束ねる（chip/primary どちらでも残り幅を占める）。 */
.course-card__actions {
  display: flex;
  gap: var(--space-2);
}

.course-card__actions [data-action="toggle-shortlist"] {
  flex: 1;
  justify-content: center;
  white-space: nowrap;
  padding-inline: var(--space-2);
}

/* 追加済み状態は「完了色」（淡いアクセント地 + 濃色文字）に落とす。solid のままだと
   未追加（行動を促す主ボタン）と追加済み（完了状態）の区別がつかないため。
   カードのトグルにのみ適用（詳細ページの primary-block は従来どおり solid を維持）。 */
.course-card__actions .btn--primary.is-added {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.course-card__actions .btn--primary.is-added:hover:not([disabled]) {
  background: var(--accent-light-strong);
  border-color: var(--accent-dark);
}

.course-card__actions .btn-book {
  flex: 0 0 auto;
}

/* 「プランを見る (N)」ボタン（プラン一覧モーダルのトリガー。旧アコーディオンの置き換え）。
   アコーディオン展開は同一グリッド行の他カードの高さに影響してレイアウトが乱れる問題が
   あったため撤去し、オーバーレイモーダル（§20 プラン一覧モーダル参照）に変更した。
   margin-top: auto でこのブロックを .course-card__body（flexカラム、flex:1）の下端に
   アンカーする。グリッドは行の高さが揃う（stretch）ため、コース名が1行/2行いずれでも
   同じ行の全カードでこのボタン（と、さらに下の .course-card__footer）のY座標が一致する
   （名前等の可変コンテンツは上に留まり、余白がこのブロックの直前に吸収される）。
   ボタン本体は共通の .btn .btn--ghost .btn--sm .btn--block（#17 の一次アクション整理で
   アクセント塗りのアウトラインからゴーストに降格。カード固有の上書きはここには持たない。
   モバイルのタップターゲット44pxのみ下の @media が担う）。 */
.course-card__plans-section {
  margin-top: auto;
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-3);
}

.btn-shortlist {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 高さはスケール値40pxで固定（従来36px・スケール外）。水平パディングのみ（折り返し防止の
     14pxは維持）、垂直中央寄せは inline-flex が担う。 */
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color-strong);
  background: var(--surface);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-800);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn-shortlist:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.btn-shortlist__icon {
  display: inline-flex;
  align-items: center;
}

.btn-shortlist.is-added {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.btn-book {
  white-space: nowrap;
}

/* a11y（#20）: モバイルでは検索結果カードの主要タップターゲット（検討リスト追加・予約・
   「プランを見る」）を 44px 以上にする。.btn は inline-flex + align-items:center のため
   min-height を足すだけで中身が縦中央のまま高さだけ伸びる。デスクトップ（>=640px）は
   従来の 36〜39px 密度を維持する（見た目を変えない）。 */
@media (max-width: 639px) {
  .course-card__actions [data-action="toggle-shortlist"],
  .course-card__actions .btn-book,
  .course-card__plans-btn {
    min-height: 44px;
  }
}

/* コース画像テーマ（imageTheme キーに対応） */
.course-img--pine {
  background: linear-gradient(135deg, #1f7a4d 0%, #0b5c3a 55%, #073c26 100%);
}

.course-img--lake {
  background: linear-gradient(135deg, #2f8f6f 0%, #1c6a8a 55%, #0d3f5c 100%);
}

.course-img--hill {
  background: linear-gradient(135deg, #8bb84a 0%, #4d9455 55%, #2c6b3e 100%);
}

.course-img--valley {
  background: linear-gradient(135deg, #b08a4e 0%, #6f8a4a 55%, #395c33 100%);
}

.course-img--links {
  background: linear-gradient(135deg, #d9c37a 0%, #7fa872 55%, #2f6d5c 100%);
}

.course-img--forest {
  background: linear-gradient(135deg, #4c7a3a 0%, #2e5a34 55%, #1a3a24 100%);
}

.course-img--pine,
.course-img--lake,
.course-img--hill,
.course-img--valley,
.course-img--links,
.course-img--forest {
  position: relative;
}

.course-img--pine::after,
.course-img--lake::after,
.course-img--hill::after,
.course-img--valley::after,
.course-img--links::after,
.course-img--forest::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.22) 0, rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 82% 78%, rgba(0, 0, 0, 0.18) 0, rgba(0, 0, 0, 0) 45%);
}