/**
 * css/pages/page.css
 * ============================================================
 * A LEGEND 2：Page
 * ============================================================
 *
 * 役割：
 * - page.php の通常固定ページを装飾します。
 *
 * 今回の改修：
 * - 固定ページ背景の固定水色・紫グローを
 *   --aleg2-glow-primary / --aleg2-glow-secondary へ置換します。
 * - 固定ページ本文パネル背景の固定白半透明グラデーションを
 *   --aleg2-glass-bg / --aleg2-glass-bg-strong へ置換します。
 * - アイキャッチ枠の角丸を --aleg2-radius-media へ接続します。
 * - 本文パネルの角丸を --aleg2-radius-panel へ接続します。
 * - アイキャッチ影・本文影を --aleg2-shadow-panel / --aleg2-shadow-card へ整理します。
 * - ヘッダーの英字ラベル・日付を font token / color token へ接続します。
 * - background.glow がOFFの場合は固定ページ背景グローを停止します。
 * - 既存セレクタ・既存HTML構造・レスポンシブ挙動は維持します。
 *
 * 追加の今回改修：
 * - .aleg2-page-top を追加し、固定ヘッダー下の退避余白をここへ集約します。
 * - パンくずと固定ページヘッダーを同じ上部ブロックとして扱い、
 *   breadcrumb ON/OFF / show_header ON/OFF の組み合わせでも配置が安定するようにします。
 */

/* ------------------------------------------------------------
 * Page root
 * ------------------------------------------------------------
 *
 * 固定ページ全体の土台です。
 *
 * 注意：
 * - min-height:70vh は本文が短い固定ページでも画面下部が詰まらないよう維持します。
 * - padding-bottom は section token を使い、全体の余白設定へ追従させます。
 * - overflow:hidden は背景グローが横にはみ出してページ幅を壊さないよう維持します。
 */
.aleg2-page {
	position: relative;
	min-height: 70vh;
	padding-bottom: var(--aleg2-section-padding-y-sm);
	overflow: hidden;
}

/**
 * 固定ページ背景グロー。
 *
 * 旧コードでは rgba(142,230,255,0.08) / rgba(182,140,255,0.08) の
 * 固定水色・紫でした。
 *
 * 改修後：
 * - --aleg2-glow-primary
 * - --aleg2-glow-secondary
 *
 * これにより、管理画面のデザイン色を変更した場合に、
 * 固定ページ背景の色味も連動します。
 */
.aleg2-page::before {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	content: "";
	background:
		radial-gradient(circle at 16% 14%, var(--aleg2-glow-primary), transparent 34vw),
		radial-gradient(circle at 86% 42%, var(--aleg2-glow-secondary), transparent 32vw);
}

/**
 * 背景グローOFF時。
 *
 * design.background.glow がOFFの場合、bodyに .aleg2-bg-glow が付かない設計です。
 * その場合はPage共通の発光背景も停止します。
 */
body:not(.aleg2-bg-glow) .aleg2-page::before {
	display: none;
}

/* ------------------------------------------------------------
 * Page article
 * ------------------------------------------------------------
 *
 * 固定ページ本文全体のarticleラッパーです。
 *
 * 現時点ではpositionのみを持たせ、
 * 将来の装飾レイヤーや追加UIの基準にできるようにします。
 */
.aleg2-page-article {
	position: relative;
}

/* ------------------------------------------------------------
 * Page top area
 * ------------------------------------------------------------
 *
 * パンくずと固定ページヘッダーをまとめる上部レイアウト領域です。
 *
 * 重要：
 * - 固定ヘッダーからの退避余白はここで担当します。
 * - .aleg2-page-header 側に退避余白を持たせると、
 *   その前に出るパンくずが固定ヘッダーに被るため、責務をこのラッパーへ移します。
 * - breadcrumb OFF / show_header OFF の場合も、本文やアイキャッチが
 *   固定ヘッダー直下へ潜り込まないようにします。
 */
.aleg2-page-top {
	position: relative;
	width: 100%;
	padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--aleg2-header-height, 80px) + clamp(24px, 4vw, 56px));
}

/**
 * 固定ページ文脈のパンくず下余白。
 *
 * breadcrumb.css は全ページ共通なので、固定ページ固有の間隔は page.css に閉じ込めます。
 */
.aleg2-page-top > .aleg2-breadcrumb {
	margin-bottom: clamp(20px, 3vw, 36px);
}

/**
 * ヘッダー非表示時の保険。
 *
 * パンくずだけを出す設定でも、後続要素との距離を確保します。
 */
.aleg2-page-top--has-breadcrumb:not(.aleg2-page-top--has-header) {
	padding-bottom: clamp(20px, 3vw, 36px);
}

/**
 * パンくずも固定ページヘッダーも非表示の場合。
 *
 * 固定ヘッダーからの安全余白だけは維持します。
 */
.aleg2-page-top:not(.aleg2-page-top--has-breadcrumb):not(.aleg2-page-top--has-header) {
	padding-bottom: clamp(20px, 3vw, 36px);
}

/* ------------------------------------------------------------
 * Page header
 * ------------------------------------------------------------
 *
 * 固定ページ上部のタイトルエリアです。
 *
 * 固定ヘッダーからの退避は .aleg2-page-top が担当します。
 * ここではタイトルブロック自体の幅・下余白を管理します。
 */
.aleg2-page-header {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-sm));
	padding-top: 0;
	padding-bottom: clamp(36px, 6vw, 72px);
	margin-inline: auto;
}

/**
 * Page eyebrow。
 *
 * 固定ページの小見出しラベルです。
 * 英字ラベルとして表示される想定のため、latin fontへ接続します。
 */
.aleg2-page-header__eyebrow {
	display: inline-flex;
	gap: var(--aleg2-space-2);
	align-items: center;
	margin: 0 0 var(--aleg2-space-4);
	color: var(--aleg2-color-primary);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 900;
	letter-spacing: var(--aleg2-letter-spacing-wider);
	line-height: 1.4;
	text-transform: uppercase;
}

/**
 * eyebrow左のライン。
 *
 * currentColorを使うことで、eyebrow色に追従します。
 */
.aleg2-page-header__eyebrow::before {
	width: 38px;
	height: 1px;
	background: currentColor;
	content: "";
}

/**
 * Page title。
 *
 * 標準固定ページの主見出しです。
 * 見出しfont / heading色へ接続し、デザイン設定に追従させます。
 *
 * BLOG詳細と同じ --aleg2-font-size-single-title を参照することで、
 * 数値を重複保持せず、標準コンテンツタイトルの大きさを統一します。
 * 本文内の見出しや専用ヒーロー型ページには影響しません。
 */
.aleg2-page-header__title {
	margin: 0;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-heading);
	font-size: var(--aleg2-font-size-single-title);
	line-height: var(--aleg2-line-height-tight);
	letter-spacing: var(--aleg2-letter-spacing-tight);
	text-wrap: balance;
}

/**
 * Page meta。
 *
 * 更新日と編集リンクをまとめる補助メタ行です。
 * 編集リンク本体の見た目は css/components/edit-link.css が担当します。
 */
.aleg2-page-header__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-2);
	align-items: center;
	margin-top: var(--aleg2-space-5);
}

/**
 * Page date。
 *
 * 更新日や投稿日を表示する場合の補助表示です。
 * .aleg2-page-header__meta の中で編集リンクと自然に並ぶよう、
 * 既存の文字組みを維持しつつ inline-flex のチップとして扱います。
 */
.aleg2-page-header__date {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0.34em 0.82em;
	color: var(--aleg2-color-text-faint);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 800;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	line-height: 1;
	text-transform: uppercase;
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-button);
}

/* ------------------------------------------------------------
 * Featured image
 * ------------------------------------------------------------
 *
 * 固定ページ上部のアイキャッチです。
 *
 * 旧コードの幅・下余白・overflowは維持します。
 * 大きな画像枠として、角丸は --aleg2-radius-media へ接続します。
 */
.aleg2-page-featured {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-lg));
	margin: 0 auto var(--aleg2-space-10);
	overflow: hidden;
	background: var(--aleg2-color-surface);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-media);
	box-shadow: var(--aleg2-shadow-panel);
}

/**
 * アイキャッチ画像。
 *
 * 既存の横幅100%・最大高さ・cover表示を維持します。
 */
.aleg2-page-featured img {
	display: block;
	width: 100%;
	max-height: min(70vh, 720px);
	object-fit: cover;
}

/* ------------------------------------------------------------
 * Page content
 * ------------------------------------------------------------
 *
 * 固定ページ本文エリアです。
 *
 * 旧コード：
 * - background: rgba(255,255,255,0.08) / rgba(255,255,255,0.028)
 * - border-radius: var(--aleg2-radius-xl)
 *
 * 改修後：
 * - background: var(--aleg2-glass-bg-strong) / var(--aleg2-glass-bg)
 * - border-radius: var(--aleg2-radius-panel)
 *
 * content.single.common.content_width から生成される
 * --aleg2-single-content-width を使用します。
 * BLOG詳細の本文外枠と同じ正規変数を参照するため、管理画面で幅を変更しても
 * 両画面が同時に追従し、ページ固有の幅定義は持ちません。
 */
.aleg2-page-content {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-single-content-width, var(--aleg2-container-sm)));
	padding: clamp(28px, 5vw, 56px);
	margin-inline: auto;
	color: var(--aleg2-color-text);
	background:
		linear-gradient(
			145deg,
			var(--aleg2-glass-bg-strong),
			var(--aleg2-glass-bg)
		);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-panel);
	box-shadow: var(--aleg2-shadow-card);
	backdrop-filter: var(--aleg2-backdrop-glass);
}

/**
 * 本文先頭要素の余白調整。
 *
 * 既存挙動を維持します。
 */
.aleg2-page-content > *:first-child {
	margin-top: 0;
}

/**
 * 本文末尾要素の余白調整。
 *
 * 既存挙動を維持します。
 */
.aleg2-page-content > *:last-child {
	margin-bottom: 0;
}

/**
 * 固定ページ本文内リンク。
 *
 * base.css / typography.css 側でもリンク色は定義されていますが、
 * 固定ページ本文パネル内で確実にDesign Tokenへ追従するよう補助します。
 */
.aleg2-page-content a {
	color: var(--aleg2-color-link);
	text-decoration-line: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
	transition:
		color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-page-content a:hover {
	color: var(--aleg2-color-link-hover);
}

/**
 * キーボード操作時のフォーカス表示。
 */
.aleg2-page-content a:focus-visible {
	outline: none;
	color: var(--aleg2-color-link-hover);
	box-shadow: var(--aleg2-focus-ring);
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------
 *
 * 既存の640px以下の余白・角丸調整を維持します。
 */
@media (max-width: 640px) {
	.aleg2-page-top {
		padding-top: calc(var(--aleg2-header-height, 72px) + var(--aleg2-space-5));
	}

	.aleg2-page-header {
		padding-top: 0;
		padding-bottom: var(--aleg2-space-8);
	}

	.aleg2-page-featured,
	.aleg2-page-content {
		border-radius: var(--aleg2-radius-panel);
	}


	.aleg2-page-header__meta {
		gap: var(--aleg2-space-2);
	}

	.aleg2-page-header__date {
		min-height: 26px;
		padding-inline: 0.72em;
	}

	.aleg2-page-content {
		padding: var(--aleg2-space-5);
	}
}