/* =============================================================================
   PAGER
   ============================================================================= */

.pager {
  display: flex;
  justify-content: center;
  margin-block: var(--space-12);
}

.pager__items {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.pager__item a,
.pager__item > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: all var(--transition-fast);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-secondary);
  background: var(--color-surface);
}

.pager__item a:hover {
  background: var(--color-brand-subtle);
  border-color: var(--color-border-brand);
  color: var(--color-brand-text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Current page */
.pager__item.is-active > a {
  background: var(--gradient-brand);
  border-color: transparent;
  color: var(--color-text-inverse);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
  pointer-events: none;
}

/* Ellipsis */
.pager__item--ellipsis span {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: default;
  min-width: unset;
  padding: 0 var(--space-1);
}

/* Prev / Next / First / Last — icon + label */
.pager__item--previous a,
.pager__item--next a,
.pager__item--first a,
.pager__item--last a {
  padding-inline: var(--space-4);
  font-weight: var(--font-semibold);
  gap: var(--space-2);
}

/* Mobile — hide text label, show icon only */
@media (max-width: 480px) {
  .pager__label {
    display: none;
  }

  .pager__item--previous a,
  .pager__item--next a,
  .pager__item--first a,
  .pager__item--last a {
    min-width: 40px;
    padding-inline: 0;
  }

  /* Hide first/last on very small screens to save space */
  .pager__item--first,
  .pager__item--last {
    display: none;
  }
}