/* ============================================================
   story.css - ストーリー系ページ共通
   canon.html（シーズン一覧） / season1_hub.html（話一覧） / s1_ep*.html（本文）
   base.css を先に読み込んでいる前提。
   ============================================================ */

/* ============================================================
   1. シーズン一覧（canon.html）- 縦積みの大きめカード
   ============================================================ */
.story-menu {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(70%, 900px);
  padding: 16px;
  margin: 0 auto;
}

.story-menu-card {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--ease);
}

.story-menu-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}

/* BAS1.png は 1076x194 の横長バナー。height 固定 + cover だと大きく切れるため
   高さは元比率のままにする。 */
.story-menu-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* カード内のリンクは下線・色を継承（グローバルには効かせない） */
.story-menu-card a {
  text-decoration: none;
  color: inherit;
}

.story-menu-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-menu-content h2 {
  margin: 0 0 10px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(1.2em, 4vw, 2em);
  color: var(--accent);
}

.story-menu-content p {
  font-family: var(--font-jp);
  font-size: clamp(0.88em, 2.5vw, 1.2em);
  line-height: 1.9;
  color: var(--text-muted);
}

.headline {
  text-align: center;
}

/* ============================================================
   2. 話一覧（season1_hub.html）- 横並びカード
   ============================================================ */
/* 共通コンテナ。本文ページ（s1_ep*.html）でも同じ箱を使うため、
   ここでは「中央寄せ + 最大幅」だけを持たせる。
   幅は min(100%, 900px)。80% 指定だと画面が狭いときに左右10%ずつが
   無駄な余白になるので、余白は padding 側で一定量だけ確保する。 */
.story-container {
  display: grid;
  width: min(100%, 900px);
  gap: 24px;
  margin: 24px auto;
  padding: 0 16px;
}

/* grid-auto-rows: 1fr で全カードの高さが最も高いカードに揃う。
   本文を切り詰めずにサイズを統一できる。
   カードが入っているとき（＝話一覧）だけに限定しないと、本文ページで
   ナビ・見出し・本文の全行が本文と同じ高さまで引き伸ばされてしまう。 */
.story-container:has(.story-card) {
  grid-auto-rows: 1fr;
}

.story-card {
  display: flex;
  flex-direction: row;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--ease);
  text-decoration: none;
  color: inherit;
}

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

/* 幅は clamp 一本で全画面幅に対応（ブレークポイントごとの上書きを廃止）。
   高さはカードいっぱい・contain なので切れずに中央へ収まる。 */
/* 幅は clamp 一本で全画面幅に対応（ブレークポイントごとの上書きは不要）。
   下限112px / カード幅の42% / 上限220px。
   高さはカードいっぱいで contain なので、切れずに中央へ収まる。 */
.story-card img {
  width: clamp(112px, 42%, 220px);
  height: 100%;
  flex-shrink: 0;
  object-fit: contain;
}

.story-content {
  padding: 20px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-content h2 {
  margin: 0 0 10px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(1.1em, 3.5vw, 1.6em);
  color: var(--accent);
}

.story-content p {
  font-family: var(--font-jp);
  font-size: clamp(0.85em, 2.3vw, 1em);
  line-height: 1.9;
  color: var(--text-muted);
  text-align: left;
}

.story-content .read-more {
  margin-top: 14px;
  display: inline-block;
  background-color: var(--accent);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--ease);
  width: fit-content;
  font-size: 0.9em;
}

.story-content .read-more:hover {
  background-color: var(--accent-light);
}

/* ============================================================
   3. 本文ページ（s1_ep*.html）
   ============================================================ */
.chapter-title {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(1.3em, 5vw, 2em);
  color: var(--accent);
  text-align: center;
  margin: 0 0 8px;
  padding: 0;
}

.story-body {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 32px 40px;
  font-family: var(--font-jp);
  line-height: 2.2;
  font-size: clamp(0.95em, 2.5vw, 1.1em);
  color: #ddd;
}

.story-body p {
  text-align: left;
  margin: 0 0 1.4em;
}

.story-body p:last-child {
  margin-bottom: 0;
}

/* 前後ナビ
   リンクが2本でも3本でも「目次に戻る」が必ず中央に来るよう、
   3カラムグリッドで役割ごとに列を固定する。
   コンテナ幅(900px)いっぱいに広げると前後リンクが端まで飛んで中央が
   空くだけなので、max-width で並びの幅を抑えて中央寄せする。 */
.story-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

.story-nav .prev  { grid-column: 1; justify-self: start; }
.story-nav .index { grid-column: 2; justify-self: center; }
.story-nav .next  { grid-column: 3; justify-self: end; }

.story-nav a {
  font-family: var(--font-ui);
  color: var(--accent);
  text-decoration: none;
  font-size: clamp(0.85em, 2.5vw, 1em);
  font-weight: 700;
  padding: 8px 14px;
  border: 1px solid var(--accent-deep);
  border-radius: var(--radius-sm);
  transition: background var(--ease-fast), color var(--ease-fast);
}

.story-nav a:hover {
  background: var(--accent-deep);
  color: #fff;
}

/* ============================================================
   レスポンシブ
   ============================================================ */

/* ===== タブレット (<=900px) ===== */
@media (max-width: 900px) {
  .story-menu {
    width: 90%;
  }
}

/* ===== タブレット (<=768px) ===== */
@media (max-width: 768px) {
  /* 幅は min(100%, 900px) のままで足りる（狭い画面では自動的に100%）。
     ここでは内側の余白だけ詰める。 */
  .story-container {
    padding: 0 12px;
    gap: 16px;
  }

  .story-content {
    padding: 14px;
  }

  .story-body {
    padding: 20px 22px;
  }
}

/* ===== スマホ (<=600px) ===== */
@media (max-width: 600px) {
  .story-menu {
    width: 95%;
    gap: 16px;
    padding: 10px;
  }

  .story-menu-content {
    padding: 14px;
  }
}

/* ===== 極小 (<=380px) ===== */
@media (max-width: 380px) {
  .story-menu-content {
    padding: 10px;
  }

  .story-content {
    padding: 10px;
  }

  .story-body {
    padding: 16px;
  }

  .story-nav a {
    padding: 6px 10px;
    font-size: 0.8em;
  }
}