/* =========================================================
   開腸瑜伽協会 — 下層ページ共通スタイル
   役割: 下層ページに共通する骨格（FV／本文ブロック／2カラム／引用／関連／末尾CTA）。
   依存: tokens.css, base.css, layout.css, components.css
   読込: 全下層ページで <link rel="stylesheet" href="css/pages/subpage.css" />
   ========================================================= */

/* ヘッダー分の余白（固定ヘッダー下から始める） */
.page { padding-top: clamp(84px, 11vh, 124px); }
/* .fv--hero を持つページではヘッダーが KV に被さるので上余白は不要 */
.page--hero { padding-top: 0; }

/* パンくず */
.crumb { display: flex; align-items: center; gap: 0.8em; font-size: var(--fs-small); color: var(--ink-3); letter-spacing: 0.06em; }
.crumb a:hover { color: var(--ink); }
.crumb .sep { color: var(--line-strong); }

/* 下層FV */
.fv { padding: var(--s-7) 0 var(--section-y); }
.fv__head { max-width: 780px; }
.fv__eyebrow { color: var(--rose-brown); }
.fv__title { font-size: var(--fs-display); letter-spacing: 0.04em; line-height: 1.4; margin: var(--s-6) 0 var(--s-5); }
.fv__lead { font-size: var(--fs-lead); color: var(--ink-2); line-height: var(--lh-snug); max-width: 46ch; }
.fv__kv { margin-top: var(--s-9); position: relative; aspect-ratio: 16/7; border-radius: var(--radius-img); overflow: hidden; }
@media (max-width: 760px){ .fv__kv { aspect-ratio: 4/5; } }

/* ---------- .fv--hero：ヘッダー背景にビジュアル ----------
   ・先頭に全幅の KV 帯を敷き、固定ヘッダーはその上に重なる（透過＝on-hero）。
   ・KV を抜けた所で header.is-solid に切り替わる（site.js が .fv--hero を検出）。 */
.fv--hero { padding: 0 0 var(--section-y); }
.fv--hero .fv__bg {
  position: relative;
  width: 100%;
  height: clamp(420px, 62vh, 720px);
  overflow: hidden;
  background: var(--mint-050);
}
.fv--hero .fv__bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,16,12,0.32) 0%, rgba(20,16,12,0) 36%, rgba(20,16,12,0) 60%, rgba(20,16,12,0.28) 100%);
}
.fv--hero .container { padding-top: var(--s-8); }
@media (max-width: 760px){
  .fv--hero .fv__bg { height: clamp(380px, 70vh, 600px); }
}

/* 本文ブロック共通 */
.block { padding: var(--section-y) 0; }
.block--alt { background: var(--paper-2); }
.prose { max-width: var(--maxw-text); }
.prose h2 { font-size: var(--fs-h1); letter-spacing: 0.05em; line-height: 1.45; margin-bottom: var(--s-6); }
.prose h3 { font-size: var(--fs-h3); margin: var(--s-8) 0 var(--s-4); }
.prose p { color: var(--ink-2); margin-bottom: var(--s-5); }
.prose p + p { margin-top: 0; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,80px); align-items: center; }
.split--rev > .col-media { order: 2; }
@media (max-width: 820px){ .split { grid-template-columns: 1fr; gap: var(--s-7); } .split--rev > .col-media { order: 0; } }
.col-media { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-img); overflow: hidden; }
.col-text h3 { font-size: var(--fs-h2); letter-spacing: 0.04em; margin-bottom: var(--s-5); }
.col-text p { color: var(--ink-2); }

.sechead { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-7); }
.secnum { font-family: var(--font-latin); font-style: italic; font-size: 1.3rem; color: var(--ink-3); }

/* 引用・静かなバンド */
.quote { text-align: center; max-width: 760px; margin-inline: auto; }
.quote p { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.7; letter-spacing: 0.04em; color: var(--ink); }
.quote cite { display: block; margin-top: var(--s-6); font-style: normal; font-size: var(--fs-small); color: var(--ink-3); letter-spacing: 0.12em; }

/* 関連リンク */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-7); }
@media (max-width: 760px){ .related { grid-template-columns: 1fr; } }
.related a { border: 1px solid var(--line); border-radius: var(--radius-img); padding: var(--s-6); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); transition: background 0.5s var(--ease); }
.related a:hover { background: var(--paper); }
.related .t { font-family: var(--font-display); font-size: var(--fs-h3); }

/* ブロック c：カード列（既存 .card を継承） */
.cardrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,2.4vw,40px); }
@media (max-width: 760px){ .cardrow { grid-template-columns: 1fr; gap: var(--s-7); } }
.cardrow .card__media { aspect-ratio: 4/3; }

/* 末尾CTA */
.endcta { text-align: center; padding: var(--section-y-lg) 0; }
.endcta h2 { font-size: var(--fs-display); letter-spacing: 0.04em; line-height: 1.45; }
.endcta p { color: var(--ink-2); margin: var(--s-5) auto 0; max-width: 40ch; }
.endcta .btn { margin-top: var(--s-7); }

/* テンプレ注記（共通骨格の説明・実ページでは削除） */
.tpl-note { position: fixed; right: 14px; bottom: 14px; z-index: 70;
  font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--ink-2);
  background: rgba(250,247,243,0.9); border: 1px solid var(--line); border-radius: 2px; padding: 8px 12px; backdrop-filter: blur(4px); max-width: 280px; line-height: 1.5; }