@layer components {
	/* ============================================================
	 * ページネーション（横断共有プリミティブ・移植元 .pagination を WP query-pagination へ移植）
	 * 数字＝下線ボックス（current は太い薄青下線）／PREV・NEXT＝ラベル＋矢印。
	 * flex 中央寄せは .nexray-pagination 自身が担保（レイアウトクラス非依存）。
	 *
	 * 使用サーフェス：/project/（page-project-archive・taxonomy-project_category）／
	 * /news/（home.html）／/ir/release/（blocks/ir-news）。project 専用でないため
	 * project-archive.css から独立コンポーネントへ分離した（旧 .project-pagination）。
	 *
	 * 2色展開：既定＝紺地（明色・base 白基調）／.has-gray-page＝明るい地（暗色）。
	 * current 下線 blue-200・dots・hover 矢印色は両版共通＝差分のみ has-gray-page で上書き。
	 * ============================================================ */
	.nexray-pagination {
		justify-content: center; /* 全ページ共通で中央寄せ（レイアウトクラス非依存で担保） */
		align-items: flex-end; /* ラベル下端と数字ボックスの下辺を揃える */
		gap: var(--wp--preset--spacing--40);
		margin-top: 0; /* sheet／グリッド直下に詰める（全ページ共通） */
		padding-block: var(--wp--preset--spacing--40);
	}

	/* 数字グループ（1 2 … n） */
	.nexray-pagination .wp-block-query-pagination-numbers {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.nexray-pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 28px;
		height: 32px;
		font-size: 1rem;
		line-height: 1;
		/* リンク色（theme.json elements.link＝wp 層 :root :where(a)）は components 層の通常宣言で
		   勝てる（#98/#100）。current/dots/gray 変種は詳細度（各自 class 追加）で本規則に勝つ。 */
		color: var(--wp--preset--color--base);
		text-decoration: none;
		border-bottom: 1px solid var(--wp--preset--color--slate-500);
		transition:
			color var(--nexray-transition),
			border-color var(--nexray-transition),
			border-bottom-width var(--nexray-transition);
	}

	.nexray-pagination .page-numbers:hover:not(.current) {
		border-bottom-width: 5px;
		border-bottom-color: var(--wp--preset--color--base);
	}

	.nexray-pagination .page-numbers.current {
		color: var(--wp--preset--color--base);
		border-bottom: 5px solid var(--nexray-pagination-current-line);
	}

	/* 省略記号（…） */
	.nexray-pagination .page-numbers.dots {
		font-size: 0.625rem;
		color: var(--wp--preset--color--slate-400);
		letter-spacing: 0.05em;
		border-bottom: none;
	}

	/* PREV / NEXT：ラベル＋矢印を縦積み */
	.nexray-pagination .wp-block-query-pagination-previous,
	.nexray-pagination .wp-block-query-pagination-next {
		display: inline-flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--20);
		align-items: flex-start;
		color: var(--wp--preset--color--base);
		text-decoration: none;
		font-size: 0.625rem;
		line-height: 1;
		letter-spacing: 0.05em;
		transition:
			color var(--nexray-transition),
			gap var(--nexray-transition);
	}

	.nexray-pagination .wp-block-query-pagination-next {
		align-items: flex-end;
	}

	/* 矢印（移植元 SVG を mask で描画＝currentColor 追従）。PREV は反転。 */
	.nexray-pagination .wp-block-query-pagination-previous::after,
	.nexray-pagination .wp-block-query-pagination-next::after {
		content: "";
		width: 29px;
		height: 10px;
		background-color: currentColor;
		-webkit-mask: var(--nexray-pagination-arrow) no-repeat center / contain;
		mask: var(--nexray-pagination-arrow) no-repeat center / contain;
	}

	.nexray-pagination .wp-block-query-pagination-previous::after {
		transform: scaleX(-1);
	}

	.nexray-pagination .wp-block-query-pagination-previous:hover,
	.nexray-pagination .wp-block-query-pagination-next:hover {
		color: var(--nexray-pagination-current-line);
		gap: 4px;
	}

	/* hover 時の矢印は blue-200（両版共通）。紺地は文字も blue-200 で追従、
	   gray 地は文字 primary・矢印のみ blue-200 に分かれる。 */
	.nexray-pagination .wp-block-query-pagination-previous:hover::after,
	.nexray-pagination .wp-block-query-pagination-next:hover::after {
		background-color: var(--nexray-pagination-current-line);
	}

	/* --------------------------------------------------------
	 * 明るい配色ページ（ACF page_gray → body.has-gray-page）の暗色上書き。
	 * 既定＝紺地（明色）。差分プロパティのみ上書き（footer.css と同型）。
	 * current 下線 blue-200・dots slate-400・hover 矢印 blue-200 は共通で据え置き。
	 * -------------------------------------------------------- */
	.has-gray-page .nexray-pagination .page-numbers {
		color: var(--wp--preset--color--slate-700);
		border-bottom-color: var(--wp--preset--color--slate-200);
	}

	.has-gray-page .nexray-pagination .page-numbers:hover:not(.current) {
		border-bottom-color: var(--wp--preset--color--primary);
	}

	.has-gray-page .nexray-pagination .page-numbers.current {
		color: var(--wp--preset--color--primary);
	}

	.has-gray-page .nexray-pagination .wp-block-query-pagination-previous,
	.has-gray-page .nexray-pagination .wp-block-query-pagination-next {
		color: var(--wp--preset--color--slate-500);
	}

	.has-gray-page .nexray-pagination .wp-block-query-pagination-previous:hover,
	.has-gray-page .nexray-pagination .wp-block-query-pagination-next:hover {
		color: var(--wp--preset--color--primary);
	}
}