/**
 * css/pages/single-blog.css
 * ============================================================
 * A LEGEND 2：BLOG Single
 * ============================================================
 *
 * 役割：
 * - 通常投稿のBLOG詳細ページ固有の微調整を行います。
 *
 * 今回の改修：
 * - BLOG詳細のeyebrow色は既存どおり --aleg2-color-accent を維持します。
 * - single header背景装飾の固定ゴールドrgbaを --aleg2-glow-accent へ置換します。
 * - single content上部borderの固定ゴールドrgbaを
 *   --aleg2-color-accent ベースの color-mix へ置換します。
 * - color-mix非対応環境向けに --aleg2-color-accent のfallbackを用意します。
 * - background.glow がOFFの場合は、BLOG詳細固有の発光装飾を停止します。
 * - 既存セレクタ・既存HTML構造・適用対象は維持します。
 */

/* ------------------------------------------------------------
 * Single header eyebrow
 * ------------------------------------------------------------
 *
 * BLOG詳細ページの小見出し色です。
 *
 * BLOGは読み物系コンテンツとして、primaryではなくaccentを使い、
 * NEWS / GALLERY / APPLICATION などと印象を分けます。
 */
.aleg2-single--blog .aleg2-single-header__eyebrow {
	color: var(--aleg2-color-accent);
}

/* ------------------------------------------------------------
 * Single header glow
 * ------------------------------------------------------------
 *
 * BLOG詳細ページヘッダーの背景グローです。
 *
 * 旧コード：
 * - rgba(255, 207, 90, 0.14)
 *
 * 改修後：
 * - --aleg2-glow-accent
 *
 * 固定ゴールドではなく、Design設定のaccent系カラーへ追従させます。
 */
.aleg2-single--blog .aleg2-single-header::before {
	background:
		radial-gradient(
			circle,
			var(--aleg2-glow-accent),
			transparent 66%
		);
}

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

/* ------------------------------------------------------------
 * Single content accent border
 * ------------------------------------------------------------
 *
 * BLOG詳細ページ本文パネルの上部アクセントです。
 *
 * 旧コード：
 * - border-top-color: rgba(255, 207, 90, 0.32)
 *
 * 改修後：
 * - --aleg2-color-accent を薄く混ぜたborderへ変更します。
 *
 * これにより、管理画面でaccent色を変更した場合に、
 * BLOG詳細本文パネルのアクセントも連動します。
 */
.aleg2-single--blog .aleg2-single-content {
	border-top-color: color-mix(in srgb, var(--aleg2-color-accent) 42%, var(--aleg2-color-border));
}

/**
 * color-mix非対応環境向けの保険です。
 *
 * 固定ゴールドへ戻さず、accent tokenをそのまま使用します。
 */
@supports not (color: color-mix(in srgb, #fff 50%, #000)) {
	.aleg2-single--blog .aleg2-single-content {
		border-top-color: var(--aleg2-color-accent);
	}
}