/* ============================================================
   page.css — 固定ページ（page.php）専用
   本文タイポは prose.css（.page-body）に集約。ここは固定ページに
   固有な「レイアウト幅」だけを持つ。

   Gutenberg のブロック配置（通常 / 幅広 / 全幅）をフロントに反映する:
     通常 = contentSize 960px（.page-entry > *）
     幅広 = wideSize 1360px（.alignwide）
     全幅 = フルブリード（.alignfull）
   値は theme.json の settings.layout と一致させている。
   ============================================================ */

.page-inner {
	/* 上余白は .page-head の margin-bottom が担うので padding-top は持たない。 */
	padding: 0 clamp(18px, 4vw, 40px) var(--wp--preset--spacing--section);
}

/* --- タイトル帯（breadcrumb ＋ アイブロウ ＋ h1 ＋ 説明文を統合） ---
   背景なし＝透明（白地）。背景色/画像を meta box で付けると全幅ヒーロー帯に
   なる。breadcrumb は背景の有無に関わらず head 内の同じ位置に出す（差異最小）。
   全幅ブリード（.page-head は article 直下＝ビューポート幅）で背景を敷き、
   .page-head-inner が content-narrow に絞る。 */
.page-head {
	position: relative;
	margin-bottom: clamp(32px, 5vw, 64px);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.page-head-inner {
	position: relative;
	z-index: 2;
	/* 水平 padding は持たず content=content-narrow(960)。左右ガターは width の
	   min() で確保し、本文（.page-inner の clamp ガター）と左端を一致させる。 */
	width: min(var(--content-narrow), calc(100% - 2 * clamp(18px, 4vw, 40px)));
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--40);
}

/* breadcrumb は article と共通の見た目・位置（.breadcrumb / .breadcrumb-inner
   は common.css の標準のまま）。背景ありのヒーロー時だけ帯 bg を透過にして
   ヒーロー背景に馴染ませる（テキスト明色化は is-on-dark 側で行う）。 */
.page-head.has-page-head-bg .breadcrumb {
	position: relative;
	z-index: 2;
	background: transparent;
}

.page-eyebrow {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-en);
	font-size: var(--text-sm);
	letter-spacing: .22em;
	color: var(--accent);
	font-weight: 700;
}
.page-title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--text-xl);
	line-height: 1.4;
	letter-spacing: .01em;
	color: var(--ink);
	margin-top: 8px;
}
.page-lead {
	margin-top: var(--wp--preset--spacing--40);
	max-width: 42em;
	font-size: var(--text-base);
	line-height: 1.9;
	color: var(--muted);
}

/* --- 背景あり（ヒーロー帯） ---
   上余白は帯の padding-top ＋ breadcrumb が担い、head-inner は padding-top:0
   （sample2 のように breadcrumb 直後から本文ブロックが始まる）。 */
.page-head.has-page-head-bg {
	padding-top: 0;
}
.page-head.has-page-head-bg .breadcrumb-inner {
	margin-bottom: clamp(32px, 4vw, 48px);
}
.page-head.has-page-head-bg .page-head-inner {
	padding-top: 0;
	padding-bottom: clamp(32px, 5vw, 64px);
}
/* 画像上のオーバーレイ（テキスト可読性）。color-mix で透過スクリム。 */
.page-head.has-page-head-image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
.page-head.has-page-head-image.is-on-dark::before {
	background: color-mix(in srgb, var(--ink) 42%, transparent);
}
.page-head.has-page-head-image.is-on-light::before {
	background: color-mix(in srgb, var(--paper) 45%, transparent);
}

/* --- 明るい文字（暗い背景向け） --- */
.page-head.is-on-dark .page-title {
	color: var(--paper);
}
.page-head.is-on-dark .page-eyebrow {
	color: var(--paper);
}
.page-head.is-on-dark .page-lead {
	color: var(--text-on-dark);
}
.page-head.is-on-dark .breadcrumb-item,
.page-head.is-on-dark .breadcrumb-sep {
	color: var(--text-on-dark);
}
.page-head.is-on-dark .breadcrumb-current {
	color: var(--paper);
}

/* --- 本文の幅システム（Gutenberg 配置の反映） ---
   .page-entry は max-width を持たず全幅。子要素側で読み幅（960）を作る。
   こうすると .alignfull の子だけを画面端まで（フルブリード）広げられる。 */
.page-entry > * {
	max-width: var(--content-narrow);
	margin-inline: auto;
}
.page-entry > .alignwide {
	max-width: var(--content-width);
}
/* 全幅: 親の横 padding を負マージンで相殺し 100vw に広げる。
   body に overflow-x:hidden があるためスクロールバー分のはみ出しは吸収される。 */
.page-entry > .alignfull {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}