/* ===========================================================
   Layout / Page
   下層固定ページの本文ラッパー（P-18）。
   基準幅 1280px、padding は CLAUDE.md 準拠（clamp(16px,4vw,80px)）。
   実際の最大幅と左右余白は .l-section__inner 側で定義済み。
   ここでは上下の余白と、本文内ブロックの縦リズムを担う。
   =========================================================== */

.l-page {
	display: block;
	padding-block: 32px 64px;
}

@media (min-width: 768px) {
	.l-page {
		padding-block: 48px 96px;
	}
}

/* 本文内ラッパー（max-width / padding-inline は .l-section__inner から継承） */
.l-page__inner {
	/* リズム指定の起点となる要素。
	   ブロックエディタ出力（the_content）は .l-page__inner の直下に並ぶ。 */
}

/* ===========================================================
   --narrow modifier
   読み物中心のページ（/access/ など）でページ全体を 800px・中央寄せにする。
   CLAUDE.md「800px = 縦に流れるテキスト中心」の指針に準拠。

   ・親 .l-section__inner（0,1,0 / max-width: 1280px）と同詳細度（0,1,0）だが
     カスケード順（_section.css → _page.css）の後勝ちで上書きされる。
     l-section__inner--narrow と「対」になる存在。
   ・padding-inline は .l-section__inner のものをそのまま継承（重複指定しない）。
   ・適用対象は page.php 側のスラッグリストで管理（後方互換）。
   ・お知らせ/コラム等の archive-/single- テンプレートでも同 modifier を当てれば
     同じ 800px 表示で揃えられる。
   =========================================================== */
.l-page__inner--narrow {
	max-width: var(--content-max-narrow);
}

/* ===========================================================
   .is-narrow スコープ：本文/パンくず/目次の「内枠」を素の800px化
   --------------------------------------------------------------
   狙い:
     ・フッター「クリニック情報」の PC コンテンツ幅 800px と、本文・パンくず・
       目次の左右端を完全に揃える。
     ・現状 .l-section__inner は max-width: 1280px ＋ padding-inline:
       clamp(16px,4vw,80px) なので、--narrow を当てた 800px の内側がさらに
       80px ずつ削れて ~640px になり、フッターと端が揃わない。
     ・狭ページのときだけ「素の 800px」を内枠に使い、SP では 16px のガターを残す
       （フッター p-clinic の SP も「画面幅 - 32px」＝ 左右16px に揃える）。

   実装:
     ・body に 'is-narrow' クラス（functions.php の body_class フィルター）
     ・.is-narrow スコープ限定で .l-section__inner を上書き
     ・本文 (.l-page__inner) / パンくず (.p-breadcrumb__inner) /
       目次 (.p-toc__inner) の3か所は全て .l-section__inner を base にしている
       ので、1ルールで3か所同時に揃う。
     ・width: min(800px, 100% - 32px) で
        - 広い画面: 800px ぴったり
        - 狭い画面: 左右16px のガターを確保
     ・max-width: none で base / --narrow の max-width を両方無効化
     ・padding-inline: 0 で l-section__inner の padding を打ち消す
     ・他ページの .l-section__inner は一切影響を受けない（.is-narrow 限定）
   =========================================================== */
.is-narrow .l-section__inner {
	width: min( var(--content-max-narrow), 100% - 32px );
	max-width: none;
	padding-inline: 0;
	margin-inline: auto;
}

/* ===========================================================
   本文ブロックの縦リズム
   margin-top で上方向に統一（margin相殺を回避）。
   「見出しの前は大きく、見出し直後は小さく、同話題は中」の3段階。
   セレクタは .l-page__inner スコープに限定し、TOPや他テンプレに影響させない。
   =========================================================== */

/* 通常ブロック同士（小）— モバイルファースト */
.l-page__inner > * + * {
	margin-top: 20px;
}

@media (min-width: 768px) {
	.l-page__inner > * + * {
		margin-top: 24px;
	}
}

/* H2 大見出し（is-style-section）の前（大） */
.l-page__inner .is-style-section {
	margin-top: 56px;
}

@media (min-width: 768px) {
	.l-page__inner .is-style-section {
		margin-top: 80px;
	}
}

/* H3 中見出し（is-style-subsection）の前（中） */
.l-page__inner .is-style-subsection {
	margin-top: 40px;
}

@media (min-width: 768px) {
	.l-page__inner .is-style-subsection {
		margin-top: 48px;
	}
}

/* H4 の前 */
.l-page__inner h4 {
	margin-top: 24px;
}

@media (min-width: 768px) {
	.l-page__inner h4 {
		margin-top: 32px;
	}
}

/* 見出し直後のブロックは近づける（見出しと内容をセットに） */
.l-page__inner .is-style-section + *,
.l-page__inner .is-style-subsection + *,
.l-page__inner h4 + * {
	margin-top: 12px;
}

@media (min-width: 768px) {
	.l-page__inner .is-style-section + *,
	.l-page__inner .is-style-subsection + *,
	.l-page__inner h4 + * {
		margin-top: 16px;
	}
}

/* 枠囲み（is-style-bordered）の前 */
.l-page__inner .is-style-bordered {
	margin-top: 24px;
}

@media (min-width: 768px) {
	.l-page__inner .is-style-bordered {
		margin-top: 32px;
	}
}

/* ボタンの前（表や本文とくっつかないように） */
.l-page__inner .wp-block-button {
	margin-top: 24px;
}

@media (min-width: 768px) {
	.l-page__inner .wp-block-button {
		margin-top: 32px;
	}
}

/* 料金表（is-style-clinic）の前 */
.l-page__inner .is-style-clinic {
	margin-top: 20px;
}

@media (min-width: 768px) {
	.l-page__inner .is-style-clinic {
		margin-top: 24px;
	}
}

/* ===========================================================
   下層本文内ボタンの配置
   ・SP（〜767px）: 中央寄せ（タップしやすさ優先）
   ・PC（768px〜）: 左寄せ（本文と同じ起点）
   wp-block-button（単体）と wp-block-buttons（まとまり）の両方に効かせる。
   .l-page スコープ限定で、TOP の .c-button 配置には触らない。
   =========================================================== */

/* SP（モバイルファースト） */
.l-page .wp-block-buttons {
	justify-content: center;
}

.l-page .wp-block-button {
	text-align: center;
}

/* PC: 左寄せに戻す */
@media (min-width: 768px) {
	.l-page .wp-block-buttons {
		justify-content: flex-start;
	}

	.l-page .wp-block-button {
		text-align: left;
	}
}