/* ============================================================
   Pagination
   HTML: <nav aria-label> > a + strong[aria-current="page"] + a
   ============================================================ */

nav.pagination {
  display: flex;
  align-items:flex-end;
  justify-content: center;
  gap: var(--space-1);
  padding-block: var(--gap-block);
}

nav.pagination a,
nav.pagination strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}

nav.pagination a {
  color: var(--color-text-muted);
}

nav.pagination a:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
  text-decoration: none;
}

/* Active page */
nav.pagination strong {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: 600;
}

/* Prev/Next arrows */
nav.pagination a[rel="prev"],
nav.pagination a[rel="next"] {
  color: var(--color-text);
}

nav.pagination a[rel="prev"]:hover,
nav.pagination a[rel="next"]:hover {
  background: var(--color-bg-alt);
}