/* ---------- Pager (Django: web/components/pager.html, Paginator with 50 per page) ----------
 * The range shown and the total, previous and next, the first and last page, the pages around
 * the current one, and gaps between them. A list of one page has no pager. Shown in
 * components/news.html. */

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; }
.pager-info { color: var(--muted); font-size: 10px; letter-spacing: .05em; }
.pager-info strong { color: var(--text); font-weight: 600; }
.pager-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pager-pages a, .pager-pages span { display: inline-grid; min-width: 32px; height: 32px; padding: 0 9px; place-items: center; border: 1px solid var(--line); color: var(--text); font-family: var(--font-mono); font-size: 11px; }
.pager-pages a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pager-pages a[aria-current="page"] { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); font-weight: 600; }
.pager-pages .pager-gap { border-color: transparent; color: var(--muted); }
.pager-pages .pager-step { display: inline-flex; gap: 4px; letter-spacing: .05em; }
.pager-pages .is-disabled { color: var(--muted); opacity: .45; }

@media (max-width: 600px) {
  .pager { justify-content: center; }
  .pager-pages .pager-step b { display: none; }
}