/* ==========================================================================
   pagination.css — recipe grid paging, used above and below the grid
   ========================================================================== */

.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-1);
}

.pagination[hidden] {
	display: none;
}

.pagination--center {
	justify-content: center;
}

.pagination__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: var(--s-2);
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--ink-muted);
	font-size: var(--t-md);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.pagination__btn:hover:not(:disabled) {
	background: var(--mint-soft);
	color: var(--ink);
}

.pagination__btn[aria-current="page"] {
	background: var(--ink);
	color: var(--surface);
	cursor: default;
}

.pagination__btn:disabled {
	opacity: .35;
	cursor: default;
}

.pagination__btn .icon {
	font-size: 1rem;
}

/* Step buttons carry a word on wide screens and shrink to the arrow alone
   when the row gets tight. */
.pagination__step {
	padding-inline: var(--s-3);
}

@media (max-width: 34rem) {
	.pagination__step span {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.pagination__step {
		padding-inline: var(--s-2);
	}
}

.pagination__gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 2.25rem;
	color: var(--ink-faint);
	font-weight: 600;
	user-select: none;
}

/* --- first-paint guard ---------------------------------------------------
   The whole collection is server-rendered, so without this a hundred cards
   would flash in and then collapse to one page. It also stops the browser
   fetching thumbnails for cards that are about to be removed.
   The 13 below is data-page-size + 1 on #recipe-grid in views/home.html --
   change both together. A <noscript> block in that template undoes it. */

.grid-cards[data-page-size]>.recipe-card:nth-child(n+13) {
	display: none;
}

/* --- the row under the grid ----------------------------------------------
   Paging happens at the foot of the grid, so changing page scrolls back to
   the section heading. That heading has to clear the sticky site header. */

#recipes-top {
	scroll-margin-top: 5.5rem;
}
/* --- the row under the grid ---------------------------------------------- */

.recipes-foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
	margin-top: var(--s-7);
}

.recipes-status {
	font-size: var(--t-sm);
	color: var(--ink-faint);
	text-align: center;
}

.recipes-status:empty {
	display: none;
}