/*
 * core/query-pagination-numbers renders via paginate_links(), a fixed
 * WordPress core structure (<a class="page-numbers">, <span class="page-numbers
 * current">) with no per-item block attributes — needs real CSS. Same for
 * border/text-color on all three pagination blocks (previous/next/numbers):
 * none of them support border or text-color as a block attribute at all
 * (confirmed in their own block.json), so those stay CSS regardless.
 * Font-size is a real block attribute on the template blocks instead, so
 * the client can edit it directly. None of the three have a fill of
 * their own — same as the page background, so nothing to set there.
 *
 * Previous/next use WordPress's built-in "chevron" pagination arrow
 * (paginationArrow:"chevron" on wp:query-pagination), not a custom icon.
 *
 * Grid, not the block's own flex layout: previous/next render as empty
 * strings on page 1 / the last page, which would re-center the row
 * around whichever two remain under flex. Explicit grid-column per
 * child keeps numbers centered regardless of which ones exist.
 *
 * minmax(0, auto) + min-width:0 + flex-wrap let the numbers group shrink
 * and wrap on narrow screens — without them, a page with many number
 * pills forces the whole grid wider than the viewport instead of
 * wrapping, breaking mobile layout.
 */
.post-listing-pagination.wp-block-query-pagination {
	display: grid;
	grid-template-columns: 1fr minmax(0, auto) 1fr;
	align-items: center;
}

.post-listing-pagination .wp-block-query-pagination-previous {
	grid-column: 1;
	justify-self: start;
}

.post-listing-pagination .wp-block-query-pagination-numbers {
	grid-column: 2;
	justify-self: center;
	min-width: 0;
}

.post-listing-pagination .wp-block-query-pagination-next {
	grid-column: 3;
	justify-self: end;
}

.post-listing-pagination .wp-block-query-pagination-previous,
.post-listing-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	min-height: 2.5rem;
	padding: 0 var(--wp--preset--spacing--40);
	border: var(--wp--custom--border-width--base) solid var(--wp--preset--color--neutral-400);
	border-radius: var(--wp--preset--border-radius--200);
	color: var(--wp--preset--color--neutral-700);
	font-weight: 600;
	text-decoration: none;
}

.post-listing-pagination .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--10);
}

.post-listing-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5em;
	min-height: 2.5em;
	padding: 0 0;
	border: var(--wp--custom--border-width--base) solid var(--wp--preset--color--neutral-300);
	border-radius: var(--wp--preset--border-radius--200);
	color: var(--wp--preset--color--neutral-700);
	font-weight: 600;
	text-decoration: none;
}

.post-listing-pagination .page-numbers.current,
.post-listing-pagination a.page-numbers:hover,
.post-listing-pagination .wp-block-query-pagination-previous:hover,
.post-listing-pagination .wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--accent-600);
	background-color: var(--wp--preset--color--accent-600);
	color: var(--wp--preset--color--neutral-100);
}

.post-listing-pagination .page-numbers.dots {
	border: none;
	background: none;
}

/*
 * Core's own chevron arrows (wp-includes/css/dist/block-library/style.css)
 * set a 1ch margin on these spans — overridden here at matching
 * specificity (both classes on the same selector) rather than relying on
 * enqueue order to win the cascade.
 */
.wp-block-query-pagination.post-listing-pagination .wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination.post-listing-pagination .wp-block-query-pagination-next-arrow {
	margin: 0;
	font-size: 1.4em;
}