@charset "utf-8";

/* ==========================================================
   list-pagination.css
   模块：全站列表分页统一样式
   用途：专家团队、客户案例、新闻动态、原创文章等所有列表页统一调用。

   统一分页结构：
   <nav class="expert-pagination" aria-label="列表分页">
     [!--show.listpage--]
   </nav>

   说明：
   1. 从专家团队分页样式独立出来；
   2. 使用子选择器 > a / > b，避免影响分页内部 b 标签；
   3. 隐藏帝国 CMS 分页标签之间的 &nbsp; 空白，防止错位；
   4. 兼容帝国 CMS Total record 统计项；
   5. 后续所有列表页只要引入本 CSS，并使用 expert-pagination 结构即可。
   ========================================================== */

:root {
  --pagination-blue: #003f97;
  --pagination-blue-dark: #002d73;
  --pagination-blue-light: #075fc2;
  --pagination-text: #23466f;
  --pagination-muted: #7a8aa0;
  --pagination-border: rgba(0, 63, 151, 0.16);
  --pagination-shadow: rgba(0, 45, 115, 0.06);
  --pagination-shadow-active: rgba(0, 63, 151, 0.18);
}

/* ========== 全站统一分页容器 ========== */
.expert-pagination {
  width: 100%;
  max-width: 100%;
  margin: 54px auto 0;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  text-align: center;
  font-size: 0; /* 隐藏帝国CMS分页标签之间的 &nbsp; 空白，避免错位 */
  line-height: 0;
  box-sizing: border-box;
}

.expert-pagination *,
.expert-pagination *::before,
.expert-pagination *::after {
  box-sizing: border-box;
}

/* ========== 帝国CMS分页按钮：普通页码、首页、上一页、下一页、尾页 ========== */
.expert-pagination > a,
.expert-pagination > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--pagination-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--pagination-text);
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 20px var(--pagination-shadow);
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* ========== 鼠标悬停 ========== */
.expert-pagination > a:hover {
  color: #ffffff;
  border-color: var(--pagination-blue);
  background: linear-gradient(135deg, var(--pagination-blue-light) 0%, var(--pagination-blue) 58%, var(--pagination-blue-dark) 100%);
  box-shadow: 0 10px 24px var(--pagination-shadow-active);
  transform: translateY(-1px);
}

/* ========== 当前页：帝国CMS通常输出 b ========== */
.expert-pagination > b,
.expert-pagination > .current,
.expert-pagination > .thisclass,
.expert-pagination > .active {
  color: #ffffff;
  border-color: var(--pagination-blue);
  background: linear-gradient(135deg, var(--pagination-blue-light) 0%, var(--pagination-blue) 58%, var(--pagination-blue-dark) 100%);
  box-shadow: 0 10px 24px var(--pagination-shadow-active);
  font-weight: 600;
}

/* ========== 帝国CMS Total record 统计项 ==========
   例如：<a title="Total record"><b>100</b></a>
   只显示数字信息，不做按钮视觉。
   ========================================================== */
.expert-pagination > a[title="Total record"] {
  min-width: auto;
  height: 38px;
  padding: 0 6px;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  color: var(--pagination-muted);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.expert-pagination > a[title="Total record"] b {
  color: var(--pagination-text);
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
}

/* ========== 兼容：如果分页外层被帝国CMS包了一层 .epages ========== */
.expert-pagination > .epages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font-size: 0;
  line-height: 0;
}

.expert-pagination > .epages > a,
.expert-pagination > .epages > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--pagination-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--pagination-text);
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 20px var(--pagination-shadow);
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.expert-pagination > .epages > a:hover {
  color: #ffffff;
  border-color: var(--pagination-blue);
  background: linear-gradient(135deg, var(--pagination-blue-light) 0%, var(--pagination-blue) 58%, var(--pagination-blue-dark) 100%);
  box-shadow: 0 10px 24px var(--pagination-shadow-active);
  transform: translateY(-1px);
}

.expert-pagination > .epages > b,
.expert-pagination > .epages > .current,
.expert-pagination > .epages > .thisclass,
.expert-pagination > .epages > .active {
  color: #ffffff;
  border-color: var(--pagination-blue);
  background: linear-gradient(135deg, var(--pagination-blue-light) 0%, var(--pagination-blue) 58%, var(--pagination-blue-dark) 100%);
  box-shadow: 0 10px 24px var(--pagination-shadow-active);
  font-weight: 600;
}

.expert-pagination > .epages > a[title="Total record"] {
  min-width: auto;
  height: 38px;
  padding: 0 6px;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  color: var(--pagination-muted);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.expert-pagination > .epages > a[title="Total record"] b {
  color: var(--pagination-text);
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
}

/* ========== 兜底：分页误放入网格时，强制独占一行 ========== */
.expert-list__grid > .expert-pagination,
.case-wrap > .expert-pagination,
.news-list__grid > .expert-pagination,
.article-list__grid > .expert-pagination {
  grid-column: 1 / -1;
  justify-self: center;
}

/* ========== 移动端适配 ========== */
@media (max-width: 640px) {
  .expert-pagination {
    margin-top: 34px;
    padding: 0;
    gap: 8px;
  }

  .expert-pagination > a,
  .expert-pagination > b,
  .expert-pagination > .epages > a,
  .expert-pagination > .epages > b {
    min-width: 34px;
    height: 34px;
    padding: 0 11px;
    font-size: 13px;
  }

  .expert-pagination > a[title="Total record"],
  .expert-pagination > .epages > a[title="Total record"] {
    width: 100%;
    height: auto;
    margin-bottom: 2px;
  }

  .expert-pagination > a[title="Total record"] b,
  .expert-pagination > .epages > a[title="Total record"] b {
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .expert-pagination {
    gap: 7px;
  }

  .expert-pagination > a,
  .expert-pagination > b,
  .expert-pagination > .epages > a,
  .expert-pagination > .epages > b {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }
}

/* 隐藏分页总条数统计 */
.expert-pagination > a[title="Total record"] {
    display: none !important;
}
/* 顺带清除它后面多余的&nbsp;空白间隙 */
.expert-pagination {
    gap: 0 10px;
}