/* =========================================================
   OurNotes DataBase - characters.css

   バンド一覧・キャラクター一覧・キャラクター詳細ページで
   使用するスタイル。共通の色・余白・カードの影などは
   style.css の :root 変数をそのまま利用する。

   構成：
   1. ページ見出し（バンド一覧・キャラクター一覧）
   2. 戻るリンク
   3. 画像表示エリア（共通）
   4. 一覧カードの共通土台
   5. バンド一覧カード
   6. キャラクター一覧カード
   7. キャラクター詳細
   8. アクセント付き見出し
   9. エラーメッセージ
   10. レスポンシブ対応
   ========================================================= */

/* ---------- 1. ページ見出し ---------- */
.page-header {
  padding: 40px 24px;
  margin-bottom: 32px;
  text-align: center;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #eef1ff 0%, var(--color-background) 100%);
}

/* バンド一覧・楽曲一覧ページだけ、見出しの高さを少し抑える
   （キャラクター一覧のバンド名見出しには影響させない） */
.compact-page-header .page-header {
  /* 直後の.content-sectionが上部に48pxの余白を持っているため、
     ここでは下側を重ねて空けすぎないようにする */
  padding: 12px 24px 8px;
  margin-bottom: 0;
  /* キャラクター一覧はバンド名によってタイトルの文字数が変わるため、
     高さを固定して他の一覧ページ（バンド・楽曲・イベント）とそろえる。
     フルスクリーンでスクロールバーが出ないよう、高さは控えめにしてある */
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-header-title {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}

.page-header-caption {
  font-size: 0.95rem;
  color: var(--color-text-sub);
}

/* ---------- 2. 戻るリンク ---------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 24px 0 0;
  padding: 8px 4px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
  transition: transform 0.15s ease, color 0.2s ease;
}

.back-link:hover {
  color: var(--color-accent);
  transform: translateX(-2px);
}

/* ---------- 3. 画像表示エリア（バンド・キャラクター共通） ---------- */
.card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

.card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* 画像の読み込みに失敗した場合に表示する仮ラベル（通常は非表示） */
.card-thumb .thumb-fallback-text {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text-on-primary);
}

.card-thumb.is-image-missing .thumb-fallback-text {
  display: flex;
}

/* ---------- 4. 一覧カードの共通土台 ---------- */
/* バンド・キャラクター・楽曲など、一覧カード全般で使う共通の見た目とホバー効果。
   各一覧では、このクラスに加えて個別のクラス（band-card等）を付与して使う。 */
.list-card {
  display: block;
  background-color: var(--color-card-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 16px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.list-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.list-card:hover .card-thumb img {
  transform: scale(1.05);
}

/* カード内で「詳細を見る」ことを示す矢印。バンド・楽曲カードなどで使う */
.card-arrow {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
  transition: transform 0.2s ease;
}

.list-card:hover .card-arrow {
  transform: translateX(4px);
}

/* ---------- 5. バンド一覧カード ---------- */
/* バンドは5組のみのため、3列にして1枚あたりの画像を大きく見せる */
.band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* バンドのビジュアル画像は横長(2:1程度)のため、実際の比率に合わせて切れないようにする */
.band-card .card-thumb {
  aspect-ratio: 2 / 1;
}

.band-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.band-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-main);
}

/* ---------- 6. キャラクター一覧カード ---------- */
/* auto-fitで未使用の列を詰めた上で、カード群自体を中央に配置する */
.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 220px));
  justify-content: center;
  gap: 20px;
}

/* 一覧のカードは縦に長めの比率にして、カード全体の高さを出す */
.character-card .card-thumb {
  aspect-ratio: 1 / 2;
}

.character-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 4px;
}

.character-card-instrument {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  background-color: #eef1ff;
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 6px;
}

.character-card-cv {
  font-size: 0.8rem;
  color: var(--color-text-sub);
}

/* ---------- 7. キャラクター詳細 ---------- */
.detail-card {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.detail-card .card-thumb {
  width: 420px;
  aspect-ratio: 3 / 5;
  flex-shrink: 0;
  margin-bottom: 0;
}

.detail-info {
  flex: 1;
  min-width: 0;
}

.detail-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.detail-tag {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
}

.detail-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-text-main);
}

.detail-subtitle {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent);
  background-color: #f8f6ff;
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 20px;
}

.detail-facts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-row {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  flex-shrink: 0;
  width: 88px;
  color: var(--color-text-sub);
}

.info-value {
  color: var(--color-text-main);
}

/* ---------- 8. アクセント付き見出し ---------- */
/* 見出しの左に、ブランドカラーのアクセントバーを添える
   （楽曲詳細の「難易度」「曲視聴」など、情報量の多い詳細ページの
   　セクション見出しで共通して使う） */
.accent-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.accent-section-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 1.1em;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
}

/* ---------- 9. エラーメッセージ ---------- */
.error-message {
  padding: 48px 24px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-sub);
  background-color: var(--color-card-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* ---------- 10. レスポンシブ対応 ---------- */

/* タブレット：バンドを2列に */
@media (max-width: 900px) {
  .band-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマートフォン：バンド・キャラクターともに1列、詳細は縦積みにする */
@media (max-width: 640px) {
  .band-grid {
    grid-template-columns: 1fr;
  }

  .character-grid {
    grid-template-columns: 1fr;
  }

  .page-header {
    padding: 32px 16px;
  }

  .compact-page-header .page-header {
    padding: 12px 16px 8px;
    margin-bottom: 0;
    min-height: 64px;
  }

  .page-header-title {
    font-size: 1.4rem;
  }

  .detail-card {
    flex-direction: column;
    gap: 20px;
  }

  .detail-card .card-thumb {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .detail-title {
    font-size: 1.3rem;
  }
}