/*
 * sd-pagination — listings and Knowledge Hub (Session 2.3)
 * <nav aria-label="Pagination"> with real links (crawlable, Blueprint 11); current page aria-current="page".
 * Previous/Next carry text; on phones the numbers collapse to "Page 2 of 8".
 * States: default, hover, focus-visible, current, disabled (no previous on page 1).
 */

.sd-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sd-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sd-space-2);
  min-width: var(--sd-target-min);
  min-height: var(--sd-target-min);
  padding-inline: var(--sd-space-3);
  border: var(--sd-border-width) solid var(--sd-color-card-divider);
  border-radius: var(--sd-radius-md);
  background: var(--sd-color-surface);
  color: var(--sd-color-brand-blue);
  font-size: var(--sd-font-size-ui);
  font-weight: var(--sd-font-weight-medium);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color var(--sd-transition-feedback), border-color var(--sd-transition-feedback);
}

.sd-pagination__link svg { width: 1.25rem; height: 1.25rem; flex: none; }

.sd-pagination__link:hover,
.sd-pagination__link[data-state="hover"] {
  border-color: var(--sd-color-brand-blue);
  background: var(--sd-color-blue-050);
  color: var(--sd-color-brand-blue);
}

/* Current page: blue fill + copper underline (current = copper, Blueprint 3.6) */
.sd-pagination__link[aria-current="page"] {
  border-color: var(--sd-color-brand-blue);
  background: var(--sd-color-brand-blue);
  color: var(--sd-color-white);
  box-shadow: inset 0 -3px 0 var(--sd-color-accent-copper);
}

.sd-pagination__link[aria-disabled="true"] {
  border-color: var(--sd-color-border-subtle);
  background: var(--sd-color-surface-disabled);
  color: var(--sd-color-text-disabled);
  pointer-events: none;
}

.sd-pagination__gap { padding-inline: var(--sd-space-1); color: var(--sd-color-text-muted); }

.sd-pagination__status {
  display: none;
  font-size: var(--sd-font-size-ui);
  color: var(--sd-color-text-default);
}

@media (max-width: 639.98px) {
  .sd-pagination__item--number,
  .sd-pagination__gap { display: none; }
  .sd-pagination__status { display: block; }
  .sd-pagination__list { justify-content: space-between; }
}