/* =====================================================================
   記事詳細
   Figma detail-pc（2187:10474）/ detail-sp（2187:12893）
   PC：FV（画像560＋本文560）→ 本文（左：画像の固定パネル576 / 右：施設情報・目次・本文607）
       → 関連記事3列 → 一覧へ戻る
   本文そのものの文字組みは blocks.css の .c-prose（編集画面と共有）
   ===================================================================== */

/* ---------------------------------------------------------------
   本文エリア
   PC：左に画像の固定パネル（アイキャッチ→本文の画像の順に切り替わる）、
       右に 日付・タイトル・タグ → 施設情報 → 目次 → 本文 が流れる。
   参考にした動き：https://tokyo-voice.jp/articles/shiori/
   --------------------------------------------------------------- */

.p-article {
  --article-gutter: clamp(var(--page-gutter), 8.333vw, var(--page-gutter-wide)); /* 1440px幅で120px */
  --media-max-h: 373px; /* アイキャッチ（560×373＝3:2）の高さ。本文の画像はこれより縦長にしない */
  /* ヘッダーと記事（画像・日付）の間隔の上限。ヘッダー自体が下に40pxの余白を持っているので、
     ここは記事カードと同じ40pxで足りる */
  --media-anchor-max: 40px;
  /* 写真を入れ替えるクロスフェードの長さ。**ここが唯一の正**で、single.js はこの値を読んで
     「フェード中は次の切り替えを重ねない」判定に使う（JS側に同じ数字を書かない） */
  --media-fade: 0.8s;
  /* 写真の手前に入れる余白（PCのみ）。写真1枚あたりのスクロール量を稼ぐためのもの */
  --media-breath: var(--space-40); /* 160→40（オーナー指示 2026-10-07：見出し手前の空きが大きすぎる） */
}

.p-article__body {
  display: grid;
  /* 1440px幅で 576＋607。画面が狭いときは両方とも縮む（固定幅だと本文に重なる） */
  grid-template-columns: minmax(0, 576px) minmax(0, 607px);
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  /* 下の余白はここ（外側）に持たせる。.p-article__main 側に移すと画像の列が80px背高くなり、
     パネルが注意書きの下端より80px行きすぎて止まる */
  padding: 0 var(--article-gutter) var(--space-80);
}

/* 画像が1枚もない記事は、右の列だけを中央に置く */
.p-article__body--no-media {
  grid-template-columns: minmax(0, 607px);
  justify-content: center;
}

.p-article__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  min-width: 0;
  /* FVは左の画像の内側に16px入った位置から始める（--fv-offset は画像の上端。single.js が実測） */
  /* 左の余白は画像との距離を決めるので変数にしてある（検証中にURLから切り替えるため） */
  padding: calc(var(--fv-offset, var(--space-40)) + var(--space-16)) var(--space-24) 0 var(--main-gap, var(--space-32));
}

/* ---- 右の列の先頭：日付・タイトル・タグ ---- */

.p-article__head {
  display: flex;
  flex-direction: column;
  /* 画像の高さの内側に収まる高さ（上16px・下24px）。日付は上、タグは下にそろい、
     余った分は日付→タイトル／タイトル→タグに均等に入る（--fv-media-h は single.js が実測） */
  justify-content: space-between;
  min-height: max(0px, calc(var(--fv-media-h, 0px) - var(--space-40)));
}

.p-article__date {
  color: var(--color-text-gray);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-tight);
}

.p-article__title {
  margin-top: var(--space-24); /* 日付との最低間隔。余白があればもっと開く */
  color: var(--color-text);
  font-family: var(--font-jp);
  /* 幅が狭いと3行4行になって画像の高さを超えるので、少しだけ小さくする */
  font-size: clamp(20px, 1.95vw, 24px);
  font-weight: 500;
  line-height: var(--lh-body);
  letter-spacing: 0.06em;
}

/* タグは全部出して折り返す */
.p-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
  margin-top: var(--space-24); /* タイトルとの最低間隔。余白があればもっと開く */
}

/* ---- 左：画像の固定パネル ----
   パネル（stage）は画面の高さいっぱいで、スクロールしても画面に張り付く。
   画像はその中で上下・左右の中央。アイキャッチは560px、本文の画像は496pxと
   大きさは違うが、中心をそろえてあるので切り替わっても位置がぶれない。 */

/* ヘッダーが固定なので、パネルはヘッダーの下にぴたりと張り付く。
   本文の列と同じ位置から始まるので、開いた瞬間から固定されていて、読み進めても動かない */
.p-article__media {
  min-width: 0;
}

/* 写真は縦に連なる1本のフィルム。読んでいる位置の写真が定位置に来るようにフィルムをずらし、
   すぐ下に次の写真をのぞかせる（カメラロールの重なり）。
   切り替えは「上にスライド」ではなく**クロスフェード**。フィルムを2枚重ねて置き、
   裏の1枚を次の位置に組んでから不透明度だけを入れ替える（single.js が位置を計算する）。
   スライドをやめた理由：写真の多い記事だと左半分が本文より速く動き、読むのを邪魔していた（2026-09-27） */
.p-article__media-stage {
  position: sticky;
  top: var(--header-height, 167px);
  overflow: hidden;
  /* 画面いっぱいの高さにすると、記事の終わり1画面ぶんで固定が解除されてしまい、
     末尾の注意書きを読むころには写真が上に流れて見えなくなる。
     --media-tail のぶんだけ低くして、その距離ぶん長く固定されるようにする */
  /* パネルは「画像の列の下端」で止まる。その列は本文の最後（注意書き）で終わるので、
     パネルを低くするほど、止まったときに写真の下端が注意書きの下端に近づく。
     ただし低くしすぎると、写真の下に次の写真がのぞくスペース（カメラロールの演出）が消える。
     --media-tail はその調整値。下限500pxは、写真373px＋次の写真のチラ見せ分を確保するため */
  height: max(500px, calc(100svh - var(--header-height, 167px) - var(--media-tail, 160px)));
  /* 右に16pxだけ余白を取り、アイキャッチ（560px）が本文との間に40px空くようにする。
     本文の画像（496px）は同じ中心軸でひとまわり小さく表示される */
  padding-right: var(--space-16);
}

/* 2枚を同じ場所に重ねるので絶対配置。ステージ（sticky＝配置済み要素）が基準になる */
.p-article__media-track {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--media-film-gap, var(--space-48));
  /* 位置はアニメさせない（一瞬で動かして、見た目はフェードだけで変える）。
     既定値の40pxは、JSが測る前でも1枚目が正しい位置に出るようにするため
     （--media-anchor-max と同じ値。ズレるとページを開いた瞬間にガタッと動く） */
  transform: translate3d(0, var(--media-shift, 40px), 0);
  will-change: opacity;
}

/* 裏で次の写真を組んでおく側。JSが止まってもこれは出てこない */
.p-article__media-track.is-hidden {
  opacity: 0;
}

/* 最初の1回はフェードさせない（読み込みで高さが変わるあいだに光ってしまう）。
   読み込みが落ち着いてから single.js が両方に is-ready を付ける */
.p-article__media-track.is-ready {
  transition: opacity var(--media-fade) var(--easing);
}

.p-article__media-group {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--space-16);
  width: 496px;
  max-width: 100%;
  max-height: calc(100svh - var(--space-80));
  overflow: hidden;
  /* 読んでいない写真は、白をかぶせたように薄くする（ぼかしはかけない） */
  filter: blur(var(--media-dim-blur, 0px));
  transition: opacity var(--duration-slow) var(--easing), filter var(--duration-slow) var(--easing);
}

/* 前後1枚より遠い写真は出さない（ぼかしの描画を増やさないため。is-near は single.js が付ける）。
   .is-film-ready は single.js が最後に付ける印。JSが止まったときに写真が全部消えないよう、
   「薄くする・隠す」はこの印が付いてからにする */
.is-film-ready .p-article__media-group:not(.is-active):not(.is-near) {
  opacity: 0;
}

/* アイキャッチだけ大きい（Figma：FVの画像は560×373＝3:2） */
.is-film-ready .p-article__media-group {
  opacity: var(--media-dim-opacity, 0.28);
}

.p-article__media-group--eyecatch {
  width: 560px;
}

.p-article__media-group--eyecatch .p-article__media-img {
  width: 100%;
  max-height: none;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.p-article__media-group.is-active {
  opacity: 1;
  filter: none;
}

/* 動きを減らす設定の人にはフェードもさせない（写真は一瞬で入れ替わる） */
@media (prefers-reduced-motion: reduce) {
  .p-article__media-track.is-ready {
    transition: none;
  }
}

.p-article__media-img {
  display: block;
  border-radius: var(--radius);
}

/* 画像の下の説明（Figma：平成角ゴシック500 14px・中央）。管理画面でキャプションを入れたときだけ出る */
.p-article__media-caption {
  color: var(--color-text);
  font-family: var(--font-jp);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-title);
  letter-spacing: 0.08em;
  text-align: center;
}

/* 1枚：横幅いっぱい。縦長の写真はアイキャッチより縦に長くせず、
   比率はそのままに小さくして中央に置く */
.p-article__media-images--single .p-article__media-img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--media-max-h);
  margin-inline: auto;
}

/* ギャラリー：2列（2枚なら横並び、4枚なら2×2）。枚数が奇数なら最後の1枚は横幅いっぱい */
.p-article__media-images--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.p-article__media-images--grid .p-article__media-img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.p-article__media-images--grid .p-article__media-img:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* 本文中に残した画像はPCでは隠す（左のパネルに出ているため）。SPではこちらを表示する */
@media (width > 1000px) { /* 2カラムのとき（1000px以下は本文中に画像を出す） */
  .is-film-ready .p-article__body:not(.p-article__body--no-media) .p-article__inline-media {
    display: none;
  }

  /* アイキャッチと同じ写真が本文にもある場合、PCでは左のパネルに出ているので本文側は隠す
     （画像が他に無い記事でも確実に隠れるよう、--no-media の条件を付けずに単独で指定する） */
  .p-article__inline-media--dup {
    display: none;
  }

  /* 見出し役の段落（`<p><strong>2. ウスペンスキー大聖堂｜…</strong></p>` のように
     太字だけでできた段落）の**手前**に余白を入れる。
     PCでは本文中の画像を隠すので本文が詰まり、写真1枚あたりのスクロール量が足りず、
     左の写真が見えないうちに次へ進んでしまう。その分を取り戻すための余白。

     **「写真の直前」ではなく「見出し役の段落」に付ける**のが要点。写真の有無で余白が変わると、
     写真の無い項目だけ前の項目とくっついて見え、関係があるように読めてしまう（2026-09-28にオーナー指摘）。
     測定でも、写真が連続している記事では「写真の直前」ルールは効果ゼロだった
     （直前の要素がPCで隠した画像なので余白が付かない）。

     連続して置かれた画像（あいだに文章が無い）には余白が入らない。
     そこは記事側で文章を足すか写真を減らすしかない。

     **H3が正しい書き方**。太字だけの段落は見た目が見出しなだけで、構造としては本文なので、
     検索エンジンには伝わらない。既存記事はH3へ移行中。移行のあいだは両方に同じ余白を当てる */
  .c-prose > h3 {
    margin-top: var(--media-breath, 40px);
  }

  .c-prose > p:has(> strong:only-child) {
    margin-top: var(--media-breath, 40px);
  }

  /* 注意文は灰色の箱に24pxの内側余白があるので、本文との間隔（64px）をそのぶん詰める。
     見た目の間隔は 40 + 24 = 64px になる */
  .p-article__note {
    margin-top: calc(var(--space-40) - var(--space-64));
  }
}

/* ---- 施設情報（Figma：背景#f7f7f7・余白24・行間12、項目名の幅96） ---- */

.p-article__facility {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-family: var(--font-jp);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: var(--lh-loose);
}

.p-article__facility-row {
  display: flex;
  gap: var(--space-16);
}

.p-article__facility dt {
  flex: 0 0 96px;
  letter-spacing: 0.06em;
}

.p-article__facility dd {
  display: flex;
  gap: var(--space-8);
  min-width: 0;
  letter-spacing: 0.08em;
}

.p-article__facility dd::before {
  content: ":";
}

/* ---- 目次（今読んでいる見出しだけ濃い色。single.js が .is-current を付け替える） ---- */

.p-article__toc-title {
  margin-bottom: var(--space-16); /* 項目側に上8pxの余白が付いたぶん詰める（見た目は24pxのまま） */
  color: var(--color-text-gray);
  font-family: var(--font-jp);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: var(--lh-loose);
  letter-spacing: 0.06em;
}

/* 行の余白ぶんも押せるように、間隔はリンクの内側（padding）とリストのgapで半分ずつ持つ */
.p-article__toc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* 左右の余白は li に持たせる。リンクの padding では**下線が内側に寄らない**ため
   （border は padding の外側に引かれる）。これで文字・矢印・下線が同じ位置でそろう */
.p-article__toc-list li {
  margin-inline: var(--toc-pad, var(--space-8));
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-line);
}

.p-article__toc-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding-block: var(--space-8); /* 上下の余白も押せる範囲にする（高さ29→45px） */
  /* 左右は li の margin で確保しているのでここは0 */
  color: var(--color-text);
  font-family: var(--font-jp);
  font-size: var(--fs-base); /* 16px（オーナー指示でPCは18→16） */
  font-weight: 500;
  line-height: var(--lh-loose);
  letter-spacing: 0.08em;
  transition: color var(--duration) var(--easing);
}

.p-article__toc-link.is-current {
  color: var(--color-text);
  opacity: 1;
}

/* ホバー中はグレーにして、今そこを指していることを控えめに示す */
.p-article__toc-link:hover {
  color: var(--color-text-gray);
  opacity: 1;
}

.p-article__toc-arrow {
  flex: none;
  width: 20px;
  height: 20px;
}

/* ホバー中は矢印も上から下へ流れる。動きは控えめに（移動量・速さともに弱め） */
@keyframes vialog-toc-arrow-flow {
  0%   { transform: translateY(-22%); opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(22%); opacity: 0; }
}

.p-article__toc-link:hover .p-article__toc-arrow {
  color: var(--color-text-gray);
  animation: vialog-toc-arrow-flow 1.4s var(--easing) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .p-article__toc-link:hover .p-article__toc-arrow {
    animation: none;
  }
}

/* 目次から飛んだとき、固定ヘッダーの下に見出しが隠れないように下げる */
.p-article__content :is(h2, h3) {
  scroll-margin-top: calc(var(--header-height, 167px) + var(--space-40));
}

/* ---- 本文の最後に自動で入るお知らせ（single.php） ---- */

.p-article__note {
  padding: var(--space-24);
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-family: var(--font-jp);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-loose);
  letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------
   関連記事（見出し → 32 → カード3列（間40）→ 24 → 一覧へ戻る → 120 → フッター）
   --------------------------------------------------------------- */

.p-article__related {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-bottom: 120px;
}

.p-article__related-head {
  padding-inline: var(--article-gutter);
}

.p-article__related-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-40);
  margin-top: var(--space-32);
  padding-inline: var(--article-gutter);
}

.p-article__back {
  display: flex;
  justify-content: center;
  margin-top: var(--space-24);
}

/* ---------------------------------------------------------------
   タブレット〜小さめのPC幅：左のパネルを割合で細くして、本文の列の幅を確保する
   --------------------------------------------------------------- */

@media (min-width: 1001px) and (max-width: 1300px) {
  .p-article__body:not(.p-article__body--no-media) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}

@media (min-width: 1001px) and (max-width: 1100px) {
  .p-article__media-stage {
    padding-inline: 0 var(--space-24);
  }

  .p-article__related-cards {
    gap: var(--space-24);
  }
}

/* ---------------------------------------------------------------
   タブレット・SP（1000px以下）
   2カラムだと画像が小さくなりすぎるので、画像のパネルはやめて縦に積む。
   本文中の画像は元の位置に表示する（Figma detail-sp と同じ組み方）
   --------------------------------------------------------------- */

@media (max-width: 1000px) {
  .p-article__media {
    margin-top: 0;
  }

  /* SPはパネルを固定せず、アイキャッチだけをFVの画像として出す（本文の画像は本文中に出る） */
  .p-article__media-stage {
    position: static;
    display: block;
    overflow: visible;
    height: auto;
    padding: 0;
  }

  .p-article__media-track {
    position: static;
    display: block;
    transform: none;
  }

  /* クロスフェード用の複製はPCだけのもの（SPはアイキャッチ1枚しか出さない） */
  .p-article__media-track--clone {
    display: none;
  }

  .p-article__media-group {
    display: none;
    width: 100%;
  }

  .p-article__media-group--eyecatch {
    display: block;
    width: 100%;
    max-height: none;
    opacity: 1;
    filter: none;
  }

  /* アイキャッチが無い記事ではパネルごと出さない（本文中の画像と二重になるため） */
  .p-article__media:not(:has(.p-article__media-group--eyecatch)) {
    display: none;
  }

  .p-article__media-images--single .p-article__media-img {
    width: 100%;
    max-height: none;
  }

  .p-article__head {
    min-height: 0;
    padding: var(--space-8) var(--space-4) var(--space-24);
  }

  .p-article__title {
    margin-top: var(--space-8);
    font-size: var(--fs-lg);
    line-height: var(--lh-title);
    letter-spacing: 0.08em;
  }

  .p-article__tags {
    margin-top: var(--space-20);
  }

  .p-article__body,
  .p-article__body--no-media {
    display: flex;
    flex-direction: column;
    gap: var(--space-8); /* アイキャッチ → 日付・タイトル（Figma detail-sp） */
    margin-top: var(--space-16); /* ヘッダー → 記事 */
    padding-inline: var(--article-gutter);
    /* 縦積みのときは下の余白を .p-article__main 側（80px）だけにする。
       両方に付くと80pxが二重になって160px空いてしまう */
    padding-bottom: 0;
  }

  .p-article__main {
    gap: var(--space-40);
    padding: 0 0 var(--space-64); /* 本文の終わりから関連記事まで64px。縦積みでは頭ぞろえをしない */
  }

  .p-article__content {
    padding-inline: var(--space-8);
  }
}

/* ---------------------------------------------------------------
   SP（Figma detail-sp）だけの調整
   --------------------------------------------------------------- */

@media (max-width: 768px) {
  .p-article__body,
  .p-article__body--no-media {
    padding-inline: var(--page-gutter);
  }

  .p-article__facility {
    gap: var(--space-8);
  }

  .p-article__toc {
    padding-inline: var(--space-16);
  }

  .p-article__toc-title {
    font-size: var(--fs-md);
  }

  .p-article__toc-list {
    gap: var(--space-4);
  }

  .p-article__toc-list li {
    /* SPは目次の箱に左右16pxの余白があるので、これ以上内側に寄せない
       （寄せると本文の文字より右に入り、行頭がそろわない） */
    margin-inline: 0;
    padding-bottom: var(--space-4);
  }

  .p-article__toc-link {
    font-size: var(--fs-base);
    line-height: var(--lh-title);
    letter-spacing: 0.06em;
  }

  .p-article__related {
    padding-bottom: var(--space-80); /* ボタンの下からフッターまで */
  }

  .p-article__related-head {
    padding-inline: var(--page-gutter);
  }

  .p-article__related-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
    padding-inline: var(--page-gutter);
  }

  .p-article__back {
    margin-top: var(--space-48); /* カードの下端からボタンまで */
    padding-inline: var(--page-gutter); /* ボタンは画面幅いっぱい（335px） */
  }
}