/**
 * css/pages/archive.css
 * ============================================================
 * A LEGEND 2：Archive Common
 * ============================================================
 *
 * 役割：
 * - BLOG / NEWS / GALLERY / APPLICATION / taxonomy / category の
 *   一覧ページ共通レイアウトを装飾します。
 *
 * 今回の改修：
 * - Archive背景の固定水色・紫グローを
 *   --aleg2-glow-primary / --aleg2-glow-secondary へ置換します。
 * - Pagination背景の固定白半透明を --aleg2-glass-bg へ置換します。
 * - Pagination hover / current の固定文字色 #061018 を
 *   --aleg2-color-on-primary へ置換します。
 * - Paginationの角丸を --aleg2-radius-button へ接続します。
 * - Paginationに box-shadow / focus-visible を追加し、操作性を補強します。
 * - background.glow がOFFの場合はArchive背景グローを停止します。
 * - 既存セレクタ・既存HTML構造・一覧listレイアウト・レスポンシブ挙動は維持します。
 * - listレイアウト時もカード画像比率を必ず守ります。
 * - 左メディア列を比率ボックス、右本文列を収まりのよい情報エリアとして扱い、
 *   本文量・余白でカード外枠だけが下へ伸びる「枠ズレ」を防ぎます。
 */

/* ------------------------------------------------------------
 * Archive root
 * ------------------------------------------------------------
 *
 * 一覧ページ全体の土台です。
 *
 * 注意：
 * - min-height:70vh は一覧件数が少ない場合でもページ下部が詰まらないよう維持します。
 * - overflow:hidden は背景グローがページ幅を壊さないよう維持します。
 */
.aleg2-archive {
	position: relative;
	min-height: 70vh;
	padding-bottom: var(--aleg2-section-padding-y-sm);
	overflow: hidden;
}

/**
 * Archive背景グロー。
 *
 * 旧コードでは rgba(142,230,255,0.09) / rgba(182,140,255,0.08) の
 * 固定水色・紫でした。
 * 今回は --aleg2-glow-primary / --aleg2-glow-secondary を使い、
 * 管理画面のデザイン色へ追従させます。
 */
.aleg2-archive::before {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	content: "";
	background:
		radial-gradient(circle at 12% 12%, var(--aleg2-glow-primary), transparent 34vw),
		radial-gradient(circle at 92% 34%, var(--aleg2-glow-secondary), transparent 32vw);
}

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

/* ------------------------------------------------------------
 * Archive grid wrapper
 * ------------------------------------------------------------
 *
 * 一覧カードグリッドの外枠です。
 *
 * 既存の margin-top は維持します。
 */
.aleg2-archive-grid {
	position: relative;

	/*
	 * Archive全体のカードhover安全域。
	 * .aleg2-archive は背景グローの横はみ出しを抑えるためoverflow:hiddenを維持します。
	 * その内側でカードの枠線・影・liftが切れないよう、一覧外枠に逃げ代を持たせます。
	 */
	--aleg2-archive-card-interaction-safe-space: var(--aleg2-card-interaction-safe-space, 7px);
	padding-block: var(--aleg2-archive-card-interaction-safe-space);
	margin-block-start: calc(var(--aleg2-space-6) - var(--aleg2-archive-card-interaction-safe-space));
	margin-block-end: calc(var(--aleg2-archive-card-interaction-safe-space) * -1);
}

/**
 * Archiveでは .aleg2-archive-grid が安全域を担当します。
 * 共通 .aleg2-content-grid 側の安全域と二重にならないよう、
 * 直下の一覧gridだけはArchiveスコープで基準位置へ戻します。
 */
.aleg2-archive-grid > .aleg2-content-grid {
	padding-block: 0;
	margin-block: 0;
}

/* ------------------------------------------------------------
 * List layout
 * ------------------------------------------------------------
 *
 * archive layout が list の場合、カードを横長にします。
 *
 * 注意：
 * - .aleg2-content-grid は共通コンポーネント側でも制御されます。
 * - ここではArchive一覧のlist表示に必要な差分だけを指定します。
 */
.aleg2-archive--layout-list .aleg2-content-grid {
	grid-template-columns: 1fr;
}

/**
 * list layout のカードリンク。
 *
 * 既存どおり、左にメディア、右に本文を置く2カラムにします。
 */
.aleg2-archive--layout-list .aleg2-post-card__link {
	display: grid;
	grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
	align-items: start;
}

/**
 * list layout のメディア。
 *
 * 横長listカードでも、カード画像比率は必ず守ります。
 *
 * 重要：
 * - 画像比率を無効化すると、縦長画像が全体表示に近い高さで出てしまい、
 *   カードが巨大化します。
 * - 一方で、height:100% や min-height を画像側に持たせると、
 *   左メディア列の高さに本文側が引っ張られます。
 * - そのため、list表示ではメディアを「左カラム内の比率ボックス」として扱い、
 *   本文は右カラムで独立して自然に伸縮させます。
 */
.aleg2-archive--layout-list .aleg2-post-card__media {
	align-self: start;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: auto;
	min-height: 0;
	aspect-ratio: var(--aleg2-content-grid-card-image-ratio, var(--aleg2-card-image-ratio, 16 / 10));
}

/**
 * list layout の本文。
 *
 * 横並びgridでは、本文側に min-width:0 がないと長いタイトルや説明文が
 * カラム幅を押し広げ、画像列との境界が崩れる場合があります。
 * カード内部のflex構造は維持し、本文だけが安全に折り返せるようにします。
 */
.aleg2-archive--layout-list .aleg2-post-card__body {
	/*
	 * listカードでは、外枠の高さが右本文だけに引っ張られると、
	 * 左の画像比率枠とカード枠がずれて見えます。
	 * 画像側は比率を守り、本文側は横並びカード向けに余白・行数・overflowを
	 * 整えることで、固定高さに頼らず自然に収まる状態を作ります。
	 */
	min-width: 0;
	min-height: 0;
	padding: clamp(14px, 1.9vw, 24px);
	overflow: hidden;
}

.aleg2-archive--layout-list .aleg2-post-card__terms {
	/*
	 * BASICカードではtermsがタイトルより前に出ます。
	 * 共通カードの margin-top:auto をそのまま使うと、list表示で本文エリアの
	 * 高さ計算が不自然になるため、横長カードでは通常フローへ戻します。
	 */
	margin-top: 0;
	padding-top: 0;
}

.aleg2-archive--layout-list .aleg2-post-card__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.aleg2-archive--layout-list .aleg2-post-card__excerpt {
	display: -webkit-box;
	margin-top: var(--aleg2-space-3);
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.aleg2-archive--layout-list .aleg2-post-card__footer {
	padding-top: var(--aleg2-space-3);
}


/**
 * Archive list専用カード。
 *
 * layout=list では template-parts/components/post-card/layout-list.php が
 * .aleg2-post-card-list を出力します。
 * 通常カードHTMLをCSS Gridで横並びにするだけでは、右本文の高さがGrid行高に参加し、
 * 左の画像比率枠よりカード外枠だけが下へ伸びるため、ここでは構造を明確に分けます。
 *
 * 実装の要点：
 * - メディアは通常フローに残し、カード外枠の高さ基準にします。
 * - 本文は同じリンク内でabsolute配置し、メディア比率枠の高さ内に収めます。
 * - 画像比率は content-grid から渡る --aleg2-content-grid-card-image-ratio を使い、
 *   画像あり/画像なしplaceholderのどちらも同じ高さにします。
 */
.aleg2-archive--layout-list .aleg2-post-card-list {
	--aleg2-archive-list-media-width: clamp(180px, 34%, 360px);
	position: relative;
	display: block;
	min-height: 0;
	height: auto;
}

.aleg2-archive--layout-list .aleg2-post-card-list__media {
	width: var(--aleg2-archive-list-media-width);
	max-width: 100%;
	margin: 0;
	aspect-ratio: var(--aleg2-content-grid-card-image-ratio, var(--aleg2-card-image-ratio, 16 / 10));
}

.aleg2-archive--layout-list .aleg2-post-card-list__body {
	position: absolute;
	inset-block: 0;
	inset-inline-start: var(--aleg2-archive-list-media-width);
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	padding: clamp(14px, 1.9vw, 24px);
	overflow: hidden;
}

.aleg2-archive--layout-list .aleg2-post-card-list__body > * {
	min-width: 0;
}

.aleg2-archive--layout-list .aleg2-post-card-list__app-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-2);
	margin-top: var(--aleg2-space-3);
	overflow: hidden;
}

/*
 * 画像を非表示にする設定の場合は、list専用のabsolute構造を解除します。
 * 画像比率枠がない状態では本文を通常フローへ戻し、既存のテキストカードとして扱います。
 */
.aleg2-archive--layout-list .aleg2-post-card.is-image-hidden .aleg2-post-card-list {
	display: block;
}

.aleg2-archive--layout-list .aleg2-post-card.is-image-hidden .aleg2-post-card-list__body {
	position: relative;
	inset: auto;
}

/* ------------------------------------------------------------
 * Pagination wrapper
 * ------------------------------------------------------------
 *
 * WordPress pagination の外枠です。
 *
 * 幅は本文/一覧幅と揃えるため、container-lg を使います。
 */
.aleg2-pagination {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-lg));
	margin: var(--aleg2-space-12) auto 0;
}

/**
 * Pagination list。
 *
 * 既存どおり中央寄せで折り返します。
 */
.aleg2-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-2);
	justify-content: center;
	padding: 0;
	margin: 0;
	list-style: none;
}

.aleg2-pagination__item {
	margin: 0;
}

/* ------------------------------------------------------------
 * Pagination numbers
 * ------------------------------------------------------------
 *
 * ページ番号・前後リンクの共通スタイルです。
 *
 * 旧コード：
 * - background: rgba(255,255,255,0.05)
 * - border-radius: var(--aleg2-radius-pill)
 *
 * 改修後：
 * - background: var(--aleg2-glass-bg)
 * - border-radius: var(--aleg2-radius-button)
 *
 * ボタンUIとして扱うため、button radiusへ接続します。
 */
.aleg2-pagination__item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 0.6em 0.9em;
	color: var(--aleg2-color-text-muted);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-sm);
	font-weight: 800;
	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);
}

/**
 * Pagination hover / current。
 *
 * 旧コードでは color:#061018 固定でした。
 * 今回は --aleg2-color-on-primary を使い、primary背景上で読める色へ接続します。
 */
.aleg2-pagination__item .page-numbers:hover,
.aleg2-pagination__item .page-numbers.current {
	color: var(--aleg2-color-on-primary);
	background: var(--aleg2-color-primary);
	border-color: var(--aleg2-color-primary);
	box-shadow: var(--aleg2-shadow-soft);
}

/**
 * hover liftが有効な場合だけ、Paginationを少し持ち上げます。
 */
body.aleg2-buttons-hover-lift .aleg2-pagination__item .page-numbers:hover {
	transform: translateY(calc(var(--aleg2-button-hover-amount) * -1));
}

/**
 * キーボード操作時のフォーカス表示。
 */
.aleg2-pagination__item .page-numbers: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-pagination__item .page-numbers.current {
	pointer-events: none;
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------
 *
 * 既存の 700px ルールは維持します。
 */
@media (max-width: 700px) {
	.aleg2-archive--layout-list .aleg2-post-card__link {
		grid-template-columns: 1fr;
	}

	.aleg2-archive--layout-list .aleg2-post-card__media {
		/*
		 * スマホではlistカードも縦積みになります。
		 * PCと同じく card_image_ratio を守り、画像あり/なしの高さを揃えます。
		 */
		min-height: 0;
		aspect-ratio: var(--aleg2-content-grid-card-image-ratio, var(--aleg2-card-image-ratio, 16 / 10));
	}

	.aleg2-archive--layout-list .aleg2-post-card-list {
		display: block;
	}

	.aleg2-archive--layout-list .aleg2-post-card-list__media {
		width: 100%;
	}

	.aleg2-archive--layout-list .aleg2-post-card-list__body {
		position: relative;
		inset: auto;
	}
}