/* pages.css — ページ固有のスタイル。値はすべて tokens.css 経由 */

/* トップ: 「もっと見る」リンク */
.more-link { margin-top: var(--space-5); }

/* トップ: ヒーロー下の導入 */
.home-lead { max-width: var(--container-text); }

/* 慈愛・法話 一覧ページ */
.blog-index__lead { margin-bottom: var(--space-5); color: var(--color-wood); font-size: var(--fs-sm); }
.blog-index__note { margin-top: var(--space-5); }

/* 行事案内: 星まつり料金表の見出し */
.content h3 + .fee-table { margin-top: var(--space-3); }

/* 水子寺ページ: ヘッダー画像は page-hero の背景として使う */
.page-hero--mizuko .page-hero__img { opacity: 0.5; }

/* アクセス: 地図画像 */
.access-map { margin-inline: auto; }
.text-center { text-align: center; }

/* 記事ページ */
.post-meta { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); font-size: var(--fs-sm); color: var(--color-wood); }
.post-meta .blog-row__tag { margin-left: 0; }
.post-footer { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--line-gold) solid var(--color-line); clear: both; }
.content .post-footer .button--text { text-decoration-color: var(--color-gold); }
.blog-index__lead + h2 { margin-top: var(--space-5); }

/* トップ1ページ構成: セクション内の本文 */
.content--inline { padding-block: 0; margin-top: var(--space-5); }
.content--inline h3 {
  font-size: var(--fs-lg); margin: var(--space-6) 0 var(--space-3);
  padding-left: var(--space-3); border-left: 3px solid var(--color-gold);
}
.content--inline h3:first-child { margin-top: 0; }
.content--inline h4 { font-size: var(--fs-base); margin: var(--space-5) 0 var(--space-2); }
.content--inline .container { padding-inline: 0; }

/* Figma 確定デザイン: トップの配置 */
.content__imgs { display: flex; flex-direction: column; gap: var(--space-3); margin: 0 auto var(--space-3); }
.content__imgs .content__img { margin-bottom: 0; }
.prayer-guide, .prayer-fees { display: grid; gap: var(--space-4); margin-bottom: var(--space-3); }
.prayer-guide__main > p { margin-bottom: var(--space-5); }
.prayer-guide__side { display: flex; flex-direction: column; gap: var(--space-2); }
.prayer-guide__side .content__img, .prayer-fees > .content__img { margin: 0; }
.prayer-guide__side .content__img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.prayer-guide__caption { margin: 0; font-size: var(--fs-xs); line-height: var(--lh-body); }
.prayer-guide__side .pdf-wrap { margin: 0; }
.prayer-fees__tables .fee-table { margin-bottom: var(--space-3); }
.access-contact { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-3); }
.access-contact address { margin: 0; }
.access-contact .pdf-wrap { margin: 0; }
@media (min-width: 920px) {
  .content__imgs { float: right; width: 300px; margin: 0 0 var(--space-3) var(--space-5); }
  .prayer-guide { grid-template-columns: 1fr 300px; gap: var(--space-5); }
  .prayer-fees { grid-template-columns: 1fr 300px; gap: var(--space-3); }
}

/* 御祈祷案内: 参拝の流れ(番号つきリスト) */
.flow { display: flex; flex-direction: column; gap: var(--space-3); margin: 0 0 var(--space-3); counter-reset: flow; }
.flow__item {
  display: flex; align-items: center; gap: var(--space-3); counter-increment: flow;
  padding: var(--space-2) var(--space-4); background: var(--color-white);
  border-radius: var(--radius-md);
  font-size: var(--fs-flow); line-height: var(--lh-body);
}
.flow__item::before {
  content: counter(flow); flex: none; width: 1.5em; text-align: center;
  font-family: var(--font-serif); font-weight: var(--fw-bold); color: var(--color-wood);
}
.flow__icon { flex: none; width: var(--icon-md); height: var(--icon-md); }
.flow__text { flex: 1; }

/* 縁起: 2枚目の画像は中央で切り抜く */
.content__img--cover { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

/* 御祈祷料金: 表の上端と画像の上端をそろえる */
.prayer-fees__tables .fee-table:first-child { margin-top: 0; }

/* 一覧の行は本文リンクの下線を付けない */
.content a.blog-row { text-decoration: none; color: inherit; }

/* 一覧: グループボタンとリストの間は 32px */
.blog-filter + .blog-list { margin-top: 0; }

/* SP(599px 以下) */
@media (max-width: 599px) {
  /* ヒーロー: 右の金線と文字が重ならないようにする */
  .hero__line { right: var(--space-3); }
  .hero__inner { padding-right: calc(var(--gutter) + var(--space-3)); }
  /* 画像: 横幅をいちばん狭い 300px にそろえて中央に置く */
  .content .content__img { width: 300px; max-width: 100%; margin-inline: auto; }
  .content__imgs, .prayer-guide__side { align-items: center; }
  /* PDFボタンは中央揃え */
  .pdf-wrap { text-align: center; }
  .access-contact { flex-direction: column; align-items: stretch; }
}

/* ── 以下は CMS 化で追加（chubudera/ のみ） ── */

/* 記事: キャプション付き画像（WordPress の [caption] から移したもの） */
.content__figure { margin: 0 auto var(--space-3); width: fit-content; max-width: 100%; }
.content__figure .content__img { margin-bottom: var(--space-1); }
.content__figure figcaption { font-size: var(--fs-xs); color: var(--color-wood); line-height: var(--lh-body); }
@media (min-width: 600px) {
  .content__figure--right { float: right; margin: 0 0 var(--space-3) var(--space-4); }
  .content__figure--left { float: left; margin: 0 var(--space-4) var(--space-3) 0; }
}

/* 記事: 移した記事の引用 */
.content blockquote { margin: 0 0 var(--space-3); padding-left: var(--space-3); border-left: 3px solid var(--color-line); }

/* 一覧: 絞り込みはリンク（ボタンと同じ見た目） */
a.blog-filter__btn { display: inline-flex; align-items: center; text-decoration: none; }
.content a.blog-filter__btn { color: var(--color-wood); }
.content a.blog-filter__btn.is-active { color: var(--color-white); }

/* 一覧: ページ送り（JS が使えるときは「もっと見る」に置き換える） */
.pager { margin-top: var(--space-5); }
.pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.pager a, .pager span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  padding-inline: var(--space-2); border: var(--line-gold) solid var(--color-line); border-radius: var(--radius-md);
  font-size: var(--fs-sm); color: var(--color-wood);
}
.content .pager a { text-decoration: none; }
.pager a:hover { background: var(--color-paper); }
.pager [aria-current="page"] { background: var(--color-ink); color: var(--color-white); }
.pager[hidden] { display: none; }