/**
 * 画像未登録時のサムネ代替プレースホルダ
 * 共通スタイル。inc/anime-thumb-placeholder.php と対で使う。
 *
 * 想定 DOM:
 *   <親要素（サイズ枠：ranking-thumb / anime-season-card-thumb 等）>
 *     <span class="anime-thumb-ph anime-thumb-ph--c3">
 *       <span class="anime-thumb-ph__title">けいおん!</span>
 *       <span class="anime-thumb-ph__meta">2009年 春クール</span>
 *     </span>
 *   </親要素>
 *
 * .anime-thumb-ph 自身がサイズ枠を 100% 埋めるので、親要素側で
 * width / height / aspect-ratio を指定するだけで良い。
 */

/* 親側の display:block / inline-block / 既存 flex に依らず確実に
   サイズ枠を埋めるため、レイアウトのみ二重クラスで詳細度を上げる。
   背景色はバリアント (--c1..c6) で上書きしたいので、こちらは
   通常の単一クラス指定にしている。 */
.anime-thumb-ph.anime-thumb-ph {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.anime-thumb-ph {
  /* デフォルト色（バリアント未指定時のフォールバック） */
  background: linear-gradient(135deg, #94a3b8, #475569);
}

.anime-thumb-ph__title {
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  /* 長い英数字でも崩れにくく */
  overflow-wrap: anywhere;
}
.anime-thumb-ph__meta {
  font-size: .72rem;
  font-weight: 500;
  opacity: .92;
  line-height: 1.2;
  letter-spacing: .02em;
}

/* 小さい枠（56×80 のランキング縦長サムネ等）用：フォントを縮める */
.anime-thumb-ph--sm.anime-thumb-ph--sm {
  padding: 4px 5px;
  gap: 2px;
}
.anime-thumb-ph--sm .anime-thumb-ph__title {
  font-size: .68rem;
  line-height: 1.2;
}
.anime-thumb-ph--sm .anime-thumb-ph__meta {
  font-size: .58rem;
}

/* ── 6 色バリアント（同作品は毎回同じ色になるよう seed で決定） ──
   homepage-mock.html の anime-home-rank-thumb--c1..c6 を踏襲。 */
.anime-thumb-ph--c1 { background: linear-gradient(135deg, #f472b6, #be185d); }
.anime-thumb-ph--c2 { background: linear-gradient(135deg, #60a5fa, #1d4ed8); }
.anime-thumb-ph--c3 { background: linear-gradient(135deg, #34d399, #047857); }
.anime-thumb-ph--c4 { background: linear-gradient(135deg, #fbbf24, #b45309); }
.anime-thumb-ph--c5 { background: linear-gradient(135deg, #a78bfa, #5b21b6); }
.anime-thumb-ph--c6 { background: linear-gradient(135deg, #fb7185, #9f1239); }

/* 親要素の幅が非常に狭い場合のレスポンシブ調整 */
@media (max-width: 599px) {
  .anime-thumb-ph.anime-thumb-ph {
    padding: 6px 8px;
  }
  .anime-thumb-ph__title { font-size: .82rem; }
  .anime-thumb-ph__meta  { font-size: .66rem; }
}