/* 通用分页组件：页面只需复用 pagination 类即可。 */
.pagination {
  width: min(1440px, calc(100% - 80px));
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  color: #000;
  font-size: 16px;
}

/* 页码使用固定尺寸，避免切换时布局抖动。 */
.pagination-pages {
  display: flex;
  align-items: center;
  gap: 20px;
}

.pagination-pages a,
.pagination-pages > span {
  width: 34px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 16px;
  line-height: 1;
}

.pagination a {
  text-decoration: none;
}

.pagination-pages a {
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.pagination-pages a:hover,
.pagination-pages a:focus-visible {
  color: var(--blue);
  outline: 0;
}

.pagination-pages a.is-current {
  color: #fff;
  background: var(--blue);
}

.pagination-pages a.is-current:hover,
.pagination-pages a.is-current:focus-visible {
  color: #fff;
  background: var(--blue);
}

.pagination-text {
  color: #000;
  white-space: nowrap;
}

.pagination-text:hover,
.pagination-text:focus-visible {
  color: var(--blue);
  outline: 0;
}

.pagination-text.is-disabled {
  color: #ccc;
  pointer-events: none;
}

.pagination-jump-label,
.pagination-total {
  white-space: nowrap;
}

.pagination-input {
  box-sizing: border-box;
  width: 80px;
  height: 36px;
  padding: 0 10px;
  color: #000;
  font: inherit;
  border: 1px solid #ddd;
  outline: 0;
}

.pagination-input:focus {
  border-color: var(--blue);
}

/* 移动端改为可换行布局，保证分页控件不产生横向溢出。 */
html.is-mobile .pagination {
  width: auto;
  margin: 4px 16px 0;
  gap: 12px;
  flex-wrap: wrap;
}

html.is-mobile .pagination-pages {
  gap: 6px;
}

html.is-mobile .pagination-pages a,
html.is-mobile .pagination-pages > span {
  width: 26px;
  height: 28px;
  font-size: 14px;
}

html.is-mobile .pagination-input {
  width: 64px;
  height: 32px;
}