/**
 * css/pages/single.css
 * ============================================================
 * A LEGEND 2：Single Common
 * ============================================================
 *
 * 役割：
 * - BLOG / NEWS / GALLERY / APPLICATION の詳細ページ共通レイアウトを装飾します。
 *
 * 今回の改修：
 * - 詳細ページ背景の固定紫・水色グローを
 *   --aleg2-glow-secondary / --aleg2-glow-primary へ置換します。
 * - 本文パネル背景の固定白半透明グラデーションを
 *   --aleg2-glass-bg / --aleg2-glass-bg-strong へ置換します。
 * - アイキャッチ枠・本文枠の角丸を
 *   --aleg2-radius-media / --aleg2-radius-panel へ接続します。
 * - 影を --aleg2-shadow-panel / --aleg2-shadow-card / --aleg2-shadow-soft へ整理します。
 * - ページ内分割リンク背景の固定白半透明を --aleg2-glass-bg へ置換します。
 * - ページ内分割リンク hover/current の固定文字色 #061018 を
 *   --aleg2-color-on-primary へ置換します。
 * - キーボード操作用の focus-visible を追加します。
 * - background.glow がOFFの場合は詳細ページ背景グローを停止します。
 * - 既存セレクタ・既存HTML構造・レスポンシブ挙動は維持します。
 *
 * 追加の今回改修：
 * - .aleg2-single-top を追加し、固定ヘッダー下の退避余白をここへ集約します。
 * - パンくずと詳細ヘッダーを同じ上部ブロックとして扱い、
 *   breadcrumb ON/OFF / show_header ON/OFF の組み合わせでも配置が破綻しにくい構造にします。
 * - 固定ヘッダー分の余白を single-header 側ではなく page root 側の上部ブロックが担当します。
 */

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

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

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

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

/* ------------------------------------------------------------
 * Single top area
 * ------------------------------------------------------------
 *
 * パンくずと詳細ヘッダーをまとめる上部レイアウト領域です。
 *
 * 重要：
 * - 固定ヘッダーからの退避余白はここで担当します。
 * - .aleg2-single-header 側にヘッダー退避を持たせると、
 *   パンくずだけが固定ヘッダーに被るため、責務をこのラッパーへ移します。
 * - breadcrumb OFF / show_header OFF の場合も、最初のメディアや本文が
 *   固定ヘッダー直下へ潜り込まないよう、topラッパーは常に余白を持ちます。
 */
.aleg2-single-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 は archive / taxonomy / page でも共通利用されるため、
 * 詳細ページ固有の余白は single.css 側で限定的に扱います。
 */
.aleg2-single-top > .aleg2-breadcrumb {
	margin-bottom: clamp(20px, 3vw, 36px);
}

/**
 * 詳細ヘッダー非表示時の保険。
 *
 * パンくずのみ表示する設定でも、その下のメディアや本文へ適度な間隔を確保します。
 */
.aleg2-single-top--has-breadcrumb:not(.aleg2-single-top--has-header) {
	padding-bottom: clamp(20px, 3vw, 36px);
}

/**
 * パンくずも詳細ヘッダーも非表示の場合。
 *
 * 上部の安全余白だけを残し、後続のメディアや本文が固定ヘッダーに隠れないようにします。
 */
.aleg2-single-top:not(.aleg2-single-top--has-breadcrumb):not(.aleg2-single-top--has-header) {
	padding-bottom: clamp(20px, 3vw, 36px);
}

/* ------------------------------------------------------------
 * Featured media
 * ------------------------------------------------------------
 *
 * 詳細ページ上部のアイキャッチメディアです。
 *
 * 旧コードの幅・下余白・overflowは維持します。
 * 角丸は大きなメディア枠として --aleg2-radius-media へ接続します。
 */
.aleg2-single-media {
	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-single-media__image {
	display: block;
	width: 100%;
	max-height: min(74vh, 760px);
	object-fit: cover;
}

/* ------------------------------------------------------------
 * Single content wrapper
 * ------------------------------------------------------------
 *
 * 詳細本文の外枠です。
 *
 * container-smを使い、本文を読みやすい幅に制限します。
 */
.aleg2-single-content-wrap {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-sm));
	margin-inline: auto;
}

/* ------------------------------------------------------------
 * Single content panel
 * ------------------------------------------------------------
 *
 * 本文エリアのガラス風パネルです。
 *
 * 旧コード：
 * - 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)
 *
 * 詳細ページ本文は最も長く読む場所なので、
 * 背景は強すぎず、境界だけを軽く出す設計にします。
 */
.aleg2-single-content {
	padding: clamp(28px, 5vw, 56px);
	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-single-content > *:first-child {
	margin-top: 0;
}

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

/* ------------------------------------------------------------
 * Page links
 * ------------------------------------------------------------
 *
 * WordPressの <!--nextpage--> で分割された本文のページリンクです。
 *
 * 既存のflex wrap構造は維持します。
 */
.aleg2-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-2);
	align-items: center;
	margin-top: var(--aleg2-space-8);
	color: var(--aleg2-color-text-muted);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-sm);
	font-weight: 800;
}

/**
 * ページリンク本体。
 *
 * 旧コードでは rgba(255,255,255,0.06) の固定白半透明でした。
 * 今回は --aleg2-glass-bg へ置換し、ライト/ダーク両方に対応します。
 */
.aleg2-page-links a,
.aleg2-page-links .post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	min-height: 34px;
	padding: 0.4em 0.72em;
	color: var(--aleg2-color-text-muted);
	line-height: 1;
	text-decoration: none;
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-button);
	backdrop-filter: var(--aleg2-backdrop-glass);
	transition:
		color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		background var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		border-color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

/**
 * 現在ページ・hover状態。
 *
 * 旧コードでは color:#061018 固定でした。
 * 今回は --aleg2-color-on-primary を使い、
 * primary背景上で読める文字色にします。
 */
.aleg2-page-links .current,
.aleg2-page-links a:hover {
	color: var(--aleg2-color-on-primary);
	text-decoration: none;
	background: var(--aleg2-color-primary);
	border-color: var(--aleg2-color-primary);
	box-shadow: var(--aleg2-shadow-soft);
}

/**
 * hover liftが有効な場合だけ、ページリンクを少し持ち上げます。
 */
body.aleg2-buttons-hover-lift .aleg2-page-links a:hover {
	transform: translateY(calc(var(--aleg2-button-hover-amount) * -1));
}

/**
 * キーボード操作時のフォーカス表示。
 */
.aleg2-page-links a:focus-visible {
	outline: none;
	color: var(--aleg2-color-on-primary);
	background: var(--aleg2-color-primary);
	border-color: var(--aleg2-color-primary);
	box-shadow:
		var(--aleg2-shadow-soft),
		var(--aleg2-focus-ring);
}

/**
 * 現在ページ。
 *
 * span.current として出力される場合はクリック対象ではないため、
 * pointer-eventsを止めて現在位置であることを明確にします。
 */
.aleg2-page-links .current {
	pointer-events: none;
}

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

	.aleg2-single-media,
	.aleg2-single-content {
		border-radius: var(--aleg2-radius-panel);
	}

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