/* ===========================================================
   Object / Project / Pagination
   WordPress 標準のページネーション（the_posts_pagination() /
   paginate_links()）にブランドカラーを当てる汎用コンポーネント。
   archive-news 専用ではなく、サイト全体で .pagination / .page-numbers
   が出ればどこでもこの見た目になる（コラム公開時にも同じ見た目で揃う）。

   想定マークアップ（the_posts_pagination の標準出力）:
     <nav class="navigation pagination" aria-label="...">
       <h2 class="screen-reader-text">投稿ナビゲーション</h2>
       <div class="nav-links">
         <a class="prev page-numbers" href="...">‹ 前へ</a>
         <a class="page-numbers" href="...">1</a>
         <span class="page-numbers current">2</span>
         <span class="page-numbers dots">…</span>
         <a class="page-numbers" href="...">10</a>
         <a class="next page-numbers" href="...">次へ ›</a>
       </div>
     </nav>

   ・モバイルファースト（SP base、PC は @media (min-width:768px) で上書き）
   ・hover は @media (hover: hover) and (min-width: 768px) でガード
     （SP のタップで sticky hover にならない方針＋既存ルールに合わせる）
   ・!important 不使用
   =========================================================== */

.pagination {
	margin-top: 32px;
	text-align: center;
}

@media (min-width: 768px) {
	.pagination {
		margin-top: 48px;
	}
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
}

@media (min-width: 768px) {
	.pagination .nav-links {
		gap: 8px;
	}
}

/* ===========================================================
   共通：番号ボタン / 前へ / 次へ / 現在 / 省略 すべての base
   =========================================================== */
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 10px;
	border-radius: 10px;
	background-color: var(--color-white);
	border: 1px solid var(--color-navy-300);
	color: var(--color-navy-500);
	font-family: var(--font-base);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@media (min-width: 768px) {
	.pagination .page-numbers {
		min-width: 44px;
		height: 44px;
		font-size: 15px;
	}
}

/* 前へ / 次へ は横長に */
.pagination .prev.page-numbers,
.pagination .next.page-numbers {
	padding-inline: 14px;
}

@media (min-width: 768px) {
	.pagination .prev.page-numbers,
	.pagination .next.page-numbers {
		padding-inline: 16px;
	}
}

/* ===========================================================
   ホバー（a タグだけ。span.current / span.dots には効かせない）
   モバイルでの sticky hover を避けるため hover-capable デバイス＋PC幅限定。
   =========================================================== */
@media (hover: hover) and (min-width: 768px) {
	.pagination a.page-numbers:hover {
		background-color: var(--color-pink-200);
		border-color: var(--color-pink-300);
		color: var(--color-pink-500);
	}
}

/* ===========================================================
   現在ページ：pink-500 で塗りつぶし
   =========================================================== */
.pagination .page-numbers.current {
	background-color: var(--color-pink-500);
	border-color: var(--color-pink-500);
	color: var(--color-white);
	font-weight: 700;
}

/* ===========================================================
   省略（…）：枠なし・背景なし。番号間に挟まる
   =========================================================== */
.pagination .page-numbers.dots {
	border: none;
	background-color: transparent;
	min-width: auto;
	padding-inline: 4px;
	color: var(--color-text-light);
}