/**
 * css/components/archive-header.css
 * ============================================================
 * A LEGEND 2：Archive Header
 * ============================================================
 *
 * 役割：
 * - template-parts/components/archive-header.php のアーカイブ見出しを装飾します。
 * - BLOG / NEWS / GALLERY / APPLICATION / taxonomy で共通利用します。
 *
 * 今回の改修：
 * - 固定水色グローを --aleg2-glow-primary へ置換します。
 * - 見出し色を design.colors.heading 由来の --aleg2-color-heading へ接続します。
 * - 見出しフォントを design.fonts.heading 由来の --aleg2-font-heading へ接続します。
 * - eyebrow は英字装飾扱いとして --aleg2-font-latin / --aleg2-color-primary へ接続します。
 * - description は --aleg2-color-text-muted / --aleg2-line-height-body へ接続します。
 * - 横幅・左右余白は design.layout.* 由来の container token を使い続けます。
 * - 既存セレクタ・既存HTML構造・レスポンシブ挙動は維持します。
 * - Archive共通レイアウト側でパンくずリストをヘッダー前へ移動したため、
 *   .aleg2-breadcrumb + .aleg2-archive-header の余白を調整します。
 * - パンくずが表示されない場合は、従来どおり .aleg2-archive-header 自体の
 *   padding-top を使ってファーストビュー余白を確保します。
 */

/* ------------------------------------------------------------
 * Archive header wrapper
 * ------------------------------------------------------------
 *
 * BLOG / NEWS / GALLERY / APPLICATION / taxonomy の共通ヘッダーです。
 *
 * 注意：
 * - 幅は --aleg2-container-lg を使い、通常コンテンツ幅に合わせます。
 * - 左右余白は --aleg2-container-padding を使い、design.layout.page_side に追従します。
 * - 上下余白はファーストビュー直下として広めに維持します。
 */
.aleg2-archive-header {
	position: relative;
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-lg));
	padding-top: clamp(96px, 12vw, 180px);
	padding-bottom: clamp(42px, 7vw, 88px);
	margin-inline: auto;
}

/* ------------------------------------------------------------
 * Breadcrumb bridge
 * ------------------------------------------------------------
 *
 * Archive共通レイアウトでは、パンくずリストを archive header より前に表示します。
 *
 * 目的：
 * - 以前は archive header 自体の padding-top が、固定ヘッダー下の余白を担っていました。
 * - パンくずを archive header の前に出すと、パンくずが画面上部へ寄りすぎる可能性があります。
 * - そのため、Archive直下の最初のパンくずに上余白を持たせます。
 *
 * 重要：
 * - パンくずが表示されない場合は、この調整は効きません。
 * - その場合は従来どおり .aleg2-archive-header の padding-top が効きます。
 * - つまり、パンくずON/OFFどちらでもファーストビューの余白が破綻しません。
 */
.aleg2-archive > .aleg2-breadcrumb:first-child {
	margin-top: clamp(96px, 12vw, 180px);
}

/**
 * パンくずの直後に archive header が続く場合の余白調整です。
 *
 * 目的：
 * - パンくず側で上余白を確保した分、archive header の上余白を少し詰めます。
 * - これにより「パンくず → 大きすぎる空白 → 見出し」という間延びを防ぎます。
 *
 * 注意：
 * - 隣接セレクタを使うことで、パンくずが無い場合の既存レイアウトには影響させません。
 */
.aleg2-archive > .aleg2-breadcrumb:first-child + .aleg2-archive-header {
	padding-top: clamp(28px, 4.5vw, 64px);
}

/**
 * 背景グロー。
 *
 * 旧コードでは rgba(142,230,255,0.15) の固定水色でした。
 * 今回は --aleg2-glow-primary を参照し、
 * デザイン設定のprimary/accent系カラーへ自然に追従させます。
 */
.aleg2-archive-header::before {
	position: absolute;
	top: 52%;
	left: 0;
	z-index: -1;
	width: min(56vw, 680px);
	height: min(56vw, 680px);
	pointer-events: none;
	content: "";
	background:
		radial-gradient(
			circle,
			var(--aleg2-glow-primary),
			transparent 66%
		);
	transform: translate3d(-38%, -50%, 0);
}

/**
 * 背景グローOFF時。
 *
 * design.background.glow がOFFの場合、bodyに .aleg2-bg-glow が付かない設計です。
 * それに合わせてアーカイブヘッダー固有のグローも停止します。
 */
body:not(.aleg2-bg-glow) .aleg2-archive-header::before {
	display: none;
}

/* ------------------------------------------------------------
 * Eyebrow
 * ------------------------------------------------------------
 *
 * アーカイブ種別を示す小さなラベルです。
 *
 * 英字や短い識別子として使われるため、
 * design.fonts.latin 由来の --aleg2-font-latin を使います。
 */
.aleg2-archive-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);
	text-transform: uppercase;
}

/**
 * eyebrow 左側のライン。
 *
 * currentColor を使い、primary色に自動追従させます。
 */
.aleg2-archive-header__eyebrow::before {
	display: inline-block;
	width: 42px;
	height: 1px;
	background: currentColor;
	content: "";
	opacity: 0.75;
}

/* ------------------------------------------------------------
 * Title
 * ------------------------------------------------------------
 *
 * アーカイブの主見出しです。
 *
 * 既存の大きな可変サイズは維持しつつ、
 * 色・フォント・行高・字間をDesign Tokenへ接続します。
 */
.aleg2-archive-header__title {
	max-width: 980px;
	margin: 0;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-heading);
	font-size: clamp(2.6rem, 1.35rem + 6vw, 7.2rem);
	font-weight: 900;
	line-height: var(--aleg2-line-height-tight);
	letter-spacing: var(--aleg2-letter-heading);
	text-transform: uppercase;
}

/* ------------------------------------------------------------
 * Description
 * ------------------------------------------------------------
 *
 * アーカイブ説明文です。
 *
 * taxonomy説明やBLOG一覧の補足文などで使われるため、
 * 主張しすぎない muted 色にします。
 */
.aleg2-archive-header__description {
	max-width: 720px;
	margin-top: var(--aleg2-space-6);
	color: var(--aleg2-color-text-muted);
	font-size: var(--aleg2-font-size-md);
	line-height: var(--aleg2-line-height-body);
}

/**
 * 説明文内リンク。
 *
 * taxonomy説明などでリンクが混ざる場合に、本文リンクとして自然に見えるようにします。
 */
.aleg2-archive-header__description a {
	color: var(--aleg2-color-link);
	text-decoration-line: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	transition: color var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-archive-header__description a:hover {
	color: var(--aleg2-color-link-hover);
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------
 *
 * 既存のスマホ調整を維持します。
 */
@media (max-width: 640px) {
	.aleg2-archive-header {
		padding-top: 88px;
		padding-bottom: var(--aleg2-space-10);
	}

	/**
	 * スマホでは固定ヘッダー下の余白を少し抑えます。
	 * パンくずが先頭に出る場合でも、画面上部に詰まりすぎない程度にします。
	 */
	.aleg2-archive > .aleg2-breadcrumb:first-child {
		margin-top: 88px;
	}

	/**
	 * パンくず直後の見出しは、スマホでも間延びしないよう余白を圧縮します。
	 */
	.aleg2-archive > .aleg2-breadcrumb:first-child + .aleg2-archive-header {
		padding-top: var(--aleg2-space-6);
	}

	.aleg2-archive-header__eyebrow::before {
		width: 28px;
	}
}