/* pagination.css — <nav aria-label="Pagination"><ul class="pagination"> (12 §5). 40 px targets. */

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  padding: 0;
  list-style: none;
}

.pagination__link {
  display: inline-grid;
  place-items: center;
  min-width: var(--page-btn);
  height: var(--page-btn);
  padding: 0 var(--sp-3);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.pagination__link:hover { border-color: var(--primary); color: var(--text-strong); text-decoration: none; }

.pagination__link[aria-current="page"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.pagination__gap { color: var(--text-subtle); padding: 0 var(--sp-1); }

.pagination__link[aria-disabled="true"] { opacity: .5; pointer-events: none; }