/* ============================================================
   Listing: the pagination band (template-parts/listing/pagination.php)
   List v2 desktop y 3077-3165 (notes 3.9): full width, White, 86px
   between 1px Grey Mid rules (drawn short of the right edge: built
   full width), the controls centred on the page. Numbers Poppins 16 on
   a 42px pitch, the current one Primary Navy with a 17 x 2 underline,
   the others Grey Dark; a bold navy ellipsis; small solid navy
   triangles for previous / next (Grey Mid when there is no such page),
   about 27-30px from the nearest number as drawn: each sits at the
   inner edge of its own 44px target.
   Hover (where the pointer can hover) and keyboard focus: numbers
   turn navy and underline; the triangles turn Dark Orange and slide
   their way (not under reduced motion). Phones get the same band (the
   mobile design draws no paging).
   ============================================================ */

.listing-pager {
	border-block: var(--border-hairline) solid var(--color-pagination-rule);
	background-color: var(--color-surface);
}

.listing-pager[hidden] {
	display: none;
}

.listing-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	min-height: 86px;
	margin: 0;
	padding: 0 var(--gutter);
	list-style: none;
}

.listing-pagination__item {
	display: flex;
}

.listing-pagination__link,
.listing-pagination__step,
.listing-pagination__gap {
	position: relative;
	display: grid;
	place-items: center;
	min-width: 42px;
	height: var(--tap-target);
	padding: 0 4px;
	font-size: var(--fs-body);
	line-height: 1;
	text-decoration: none;
}

.listing-pagination__link {
	color: var(--color-pagination);
	transition: color var(--transition);
}

.listing-pagination__link::after {
	content: "";
	position: absolute;
	bottom: 8px;
	left: 50%;
	width: 17px;
	height: 2px;
	background-color: currentColor;
	opacity: 0;
	transform: translateX(-50%);
	transition: opacity var(--transition);
}

.listing-pagination__link.is-current {
	color: var(--color-pagination-current);
}

.listing-pagination__link.is-current::after {
	opacity: 1;
}

a.listing-pagination__link:focus-visible {
	color: var(--color-pagination-current);
}

a.listing-pagination__link:focus-visible::after {
	opacity: 0.35;
}

@media (hover: hover) {
	a.listing-pagination__link:hover {
		color: var(--color-pagination-current);
	}

	a.listing-pagination__link:hover::after {
		opacity: 0.35;
	}
}

.listing-pagination__link:focus-visible,
.listing-pagination__step:focus-visible {
	outline-color: var(--color-focus-light);
	outline-offset: -2px;
}

/* The drawn ellipsis: bold 20, navy, on a 36px pitch. */
.listing-pagination__gap {
	min-width: 36px;
	color: var(--color-pagination-current);
	font-size: 20px;
	font-weight: var(--fw-bold);
}

.listing-pagination__step {
	min-width: var(--tap-target);
	color: var(--color-pagination-current);
	transition: color var(--transition);
}

/* The drawn triangles: about 8 x 10 (the icon's ink at 18px), each 4px
   in from the inner edge of its target, so 6px of icon box and 4px of
   padding lie between the triangle and the number's 42px cell (the
   digit centred in it): 27-30px of white space, as drawn. */
.listing-pagination__step .icon {
	width: 18px;
	height: 18px;
	transition: transform var(--transition);
}

.listing-pagination__step--prev {
	justify-items: end;
	padding: 0 4px 0 0;
}

.listing-pagination__step--next {
	justify-items: start;
	padding: 0 0 0 4px;
}

.listing-pagination__step.is-disabled {
	color: var(--color-pagination-disabled);
}

a.listing-pagination__step:focus-visible {
	color: var(--color-arrow-hover-on-light);
}

@media (hover: hover) {
	a.listing-pagination__step:hover {
		color: var(--color-arrow-hover-on-light);
	}
}

@media (prefers-reduced-motion: no-preference) {
	a.listing-pagination__step--prev:focus-visible .icon {
		transform: translateX(calc(-1 * var(--arrow-nudge)));
	}

	a.listing-pagination__step--next:focus-visible .icon {
		transform: translateX(var(--arrow-nudge));
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	a.listing-pagination__step--prev:hover .icon {
		transform: translateX(calc(-1 * var(--arrow-nudge)));
	}

	a.listing-pagination__step--next:hover .icon {
		transform: translateX(var(--arrow-nudge));
	}
}

@media (forced-colors: active) {
	a.listing-pagination__link {
		text-decoration: underline;
	}

	.listing-pagination__link.is-current::after {
		background-color: currentColor;
		forced-color-adjust: none;
	}

	.listing-pagination__step .icon {
		forced-color-adjust: auto;
	}
}