/* ==========================================================
   story.css - 文化故事列表页专属样式
   ========================================================== */
body[data-page="story"] {
  background-color: var(--color-bg-cream-deep);
}


/* ========== 置顶推荐区（peek 轮播） ========== */
.featured-section {
  position: relative;
  padding: var(--sp-24) 0;
  overflow: hidden;
}

/* L形装饰条 */
.featured-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20vw;
  height: 20vw;
  background: #F5F0E8;
  z-index: -1;
}

/* 外层 flex 容器：左间距 = 文章间距 */
.featured-wrapper {
  display: flex;
  align-items: stretch;
  padding-left: var(--sp-24);
}

/* 当前文章：图+白卡，无间隙 */
.featured-main {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  flex: 1;
  flex-shrink: 0;
  min-width: 0;
  transition: opacity 0.3s;
}

/* 左：主图 7:5 */
.featured-image {
  overflow: hidden;
  cursor: pointer;
}

.featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* 右：白卡（与主图无间隙） */
.featured-card {
  background: var(--color-bg-white);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
  padding: var(--sp-24);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-8);
  position: relative;
  cursor: pointer;
}

.featured-date {

  font-size: var(--fs-lg);
  font-weight: var(--fw-normal);
  color: var(--color-text-muted);
}

.featured-title {

  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
  line-height: var(--lh-normal);
}

/* 正文 + 更多咨询（左侧边框分组） */
.featured-text-group {
    border-left: 2px solid var(--color-divider);
    padding-left: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    margin-top: var(--sp-8);
}

.featured-excerpt {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-dark);
  line-height: var(--lh-loose);
}

.featured-more {

  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s;
}

.featured-more:hover {
  color: var(--color-secondary);
}

.featured-more-text {
  text-decoration: underline;
}

.featured-more-arrow {
  margin-left: var(--sp-3);
  text-decoration: none;
}

/* 导航按钮 — 卡片右下角 */
.featured-nav {
  position: absolute;
  bottom: var(--sp-6);
  right: var(--sp-6);
  display: flex;
  gap: var(--sp-6);
}

.featured-nav-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-dark);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: color 0.3s;
}

.featured-nav-btn:hover:not(:disabled) {
  color: var(--color-secondary);
}

.featured-nav-btn:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* 右侧 peek：下篇文章部分露出，溢出隐藏 */
.featured-peek {
  margin-left: var(--sp-24);
  /* = wrapper 的 padding-left */
  width: 150px;
  flex-shrink: 0;
  overflow: hidden;
  transition: opacity 0.3s;
}

.featured-peek img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  object-position: left center;
}

/* ========== 内容区布局 ========== */
.story-content-section {
  padding: var(--sp-24) 0;
}

/* 暂时隐藏底部推荐阅读区域（逻辑保留，仅不展示） */
.recommend--story {
  /*display: none;*/
}

.content-layout {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: var(--sp-24);
  /* 内容区占 container 的 80%（而非 100%），保持居中 */
  /* max-width: 80%;
  margin-inline: auto; */
}

.category-head {
  margin-bottom: var(--sp-8);
}

.category-head-title {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  color: var(--color-secondary);
}

.category-head-en {
  font-size: var(--fs-base);
  letter-spacing: 4px;
  text-transform: uppercase;
}

.category-head-dot,
.category-head-cn {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

/* ========== 左侧搜索 ========== */
.category-search {
  position: relative;
  margin-bottom: var(--sp-4);
}

.search-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.search-input {
  width: 100%;
  height: 44px;
  padding: 0 0 0 32px;
  border: none;
  border-bottom: 2px solid #8f8f8f;
  border-radius: 0;
  font-size: var(--fs-base);

  color: #8f8f8f;
  background: transparent;
  outline: none;
}

.search-input::placeholder {
  color: #c6c6c6;
}

/* ========== 左侧分类 ========== */
.category-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  align-self: start;
}

.category-list {
  list-style: none;
}

.category-item {
  position: relative;
  padding: var(--sp-5) 0 var(--sp-5) var(--sp-5);
  cursor: pointer;
  transition: all 0.3s;
}

.category-item + .category-item {
  margin-top: var(--sp-4);
}

/* 左侧竖线指示器 */
.category-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  border-radius: 2px;
  background: var(--color-secondary);
  transition: height 0.25s;
}

.category-item:hover::before,
.category-item.active::before {
  height: 50%;
}

.category-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--color-text-muted);
  letter-spacing: 0;
  transition: color 0.3s;
}

.category-item:hover .category-name {
  color: var(--color-text-dark);
}

.category-item.active .category-name {
  color: var(--color-text-dark);
}

.category-back-link {
  display: inline-block;
  margin-top: var(--sp-16);
  margin-left: var(--sp-5);
  font-size: var(--fs-base);
  color: var(--color-text-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.category-back-link:hover {
  color: var(--color-seal);
}

/* ========== 文章列表 ========== */
.story-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
}

.story-list-item {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-6);
  align-items: start;
  background: var(--color-bg-white);
  padding: 0 var(--sp-6) var(--sp-8) var(--sp-6);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.3s;
  position: relative;
  text-decoration: none;
  color: inherit;
}

/* 图片 + 日期列 */
.story-item-media {
  margin-top: -24px;
  display: flex;
  flex-direction: column;
}

.story-item-thumb {
  aspect-ratio: 16 / 9;
  overflow: visible;
  background: var(--color-bg-white);
}

.story-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.story-list-item:hover .story-item-thumb img {
  transform: scale(1.05);
}

/* 引号占位（无图）— 大引号代替图片，保持超出卡片效果 */
.story-item-thumb.no-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  aspect-ratio: 4 / 3;
}

.story-item-thumb.no-image img {
  display: none;
}

.story-item-thumb.no-image::before {
  content: '\201C';
  font-size: 330px;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.08);
  line-height: 1;
  position: absolute;
  /* 引号字形位于字符盒(330×330)右上角，需将定位点左下偏移以实现视觉居中 */
  top: 63%;
  left: 20%;
  transform: translate(-50%, -50%);
}

/* 日期 */
.story-item-date {
  display: flex;
  align-items: baseline;
  gap: 2px;
  padding-top: var(--sp-3);
}

.date-day {
  font-size: var(--fs-hero);
  font-weight: var(--fw-normal);
  color: var(--color-text-dark);
  line-height: 1;
}

.date-sep {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-normal);
  /*隐藏原"/"文字，改由伪元素绘制细斜线*/color: transparent;
  position: relative;
  transform: translateY(30%);
  -webkit-transform: translateY(30%);
  -moz-transform: translateY(30%);
  -ms-transform: translateY(30%);
  -o-transform: translateY(30%);
}

/* 细斜线：线宽 width 即粗细，可在此精确控制 */
.date-sep::before {
  content: '';
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 50%;
  width: 1px;
  background: var(--color-text-dark);
  transform: translateX(-50%) rotate(20deg);
}

.date-month {
  font-size: var(--fs-base);
  color: var(--color-text-dark);
  position: relative;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
}

/* 文章内容 */
.story-item-body {
  padding-top: 0;
}

.story-item-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-dark);
  line-height: 1.4;
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
  letter-spacing: 0;
  transition: color 0.3s;
}

.story-item-subtitle {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-dark);
  line-height: 1.4;
  margin-bottom: var(--sp-2);
  letter-spacing: 0;
  transition: color 0.3s;
}

.story-item-excerpt {
  font-size: var(--fs-base);
  color: var(--color-text-dark);
  line-height: 1.57;
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-6);
  display: -webkit-box;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.story-item-more {
  position: absolute;
  bottom: var(--sp-6);
  right: var(--sp-6);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-dark);
  transition: color 0.3s;
  text-decoration: underline;
}

.story-item-more:hover {
  color: var(--color-secondary);
}

/* ========== 空状态 ========== */
.empty-state {
  text-align: center;
  padding: var(--sp-20) 0;
}

.empty-state p {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  letter-spacing: 2px;
}

/* ========== 查询加载中（ES 请求期间） ========== */
.artisan-es-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-16) 0;
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  letter-spacing: 1px;
}

.artisan-es-loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-top-color: var(--color-seal);
  border-radius: 50%;
  animation: artisanEsSpin 0.7s linear infinite;
}

@keyframes artisanEsSpin {
  to { transform: rotate(360deg); }
}

/* ========== 搜索结果：匹配关键词标红 ========== */
.search-hit {
  color: #c0392b;
  font-style: normal;
}

/* ========== 文章分页器 ========== */
.story-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-16);
  padding: var(--sp-4) 0;
}

.story-pagination .pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-base);
  color: var(--color-text-main);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: all 0.3s;
  cursor: pointer;
  white-space: nowrap;
}

.story-pagination .pagination-btn:hover {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.story-pagination .pagination-info {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  padding: 0 var(--sp-2);
}

/* ES 列表分页数字页码容器：与主分页 #pagination-pages 布局一致（flex 排列圆形数字按钮） */
#storyEsPages {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ========== 底部推荐阅读 ========== */
.recommend-section {
  padding: var(--sp-24) 0;
}

.recommend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}

.recommend-card {
  display: block;
  background: var(--color-bg-white);
  overflow: hidden;
  transition: transform 0.3s;
}

.recommend-card:hover {
  transform: translateY(-4px);
}

.recommend-card-img {
  aspect-ratio: 5 / 3;
  overflow: hidden;
}

.recommend-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.recommend-card:hover .recommend-card-img img {
  transform: scale(1.05);
}

.recommend-card-body {
  padding: var(--sp-5);
}

.recommend-card-title {

  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-dark);
  line-height: var(--lh-relaxed);
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recommend-card-excerpt {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

/* ========== recommend--story 推荐阅读区（与 artisan-show 对齐） ========== */
.recommend--story {
    padding: var(--sp-24) 0;
}

.recommend--story .recommend-header {
    margin-bottom: var(--sp-10);
    border-bottom: 1px solid var(--color-divider);
    padding-bottom: var(--sp-4);
}

.recommend--story .recommend-title {
    /* 覆盖 common.css section-title 默认的居中+装饰线 */
    text-align: left !important;
    padding: 0 !important;
    position: static !important;
    display: block !important;
}

.recommend--story .recommend-title::before,
.recommend--story .recommend-title::after {
    content: none !important;
}

/* 隐藏旧的 excerpt */
.recommend--story .recommend-card-excerpt {
    display: none;
}

/* ========== 响应式：窄屏 ========== */
@media (max-width: 1199px) {
  .featured-wrapper {
    padding-left: var(--sp-8);
  }

  .featured-main {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .featured-peek {
    margin-left: var(--sp-8);
    /* = wrapper 的 padding-left */
    width: 90px;
  }


  .featured-card {
    padding: var(--sp-8);
  }

  .featured-text-group{
    gap: var(--sp-4);
    margin-top: var(--sp-4);
  }

  .featured-excerpt {
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .content-layout {
    grid-template-columns: 280px 1fr;
    gap: 32px;
    /* 平板及以下恢复满宽，避免过窄 */
    max-width: none;
  }

  .story-list {
    gap: var(--sp-12);
  }

  .story-list-item {
    grid-template-columns: 280px 1fr;
    gap: var(--sp-5);
    padding: 0 var(--sp-4) var(--sp-6) var(--sp-4);
  }

  .story-item-media {
    margin-top: -16px;
  }

  .story-item-title,
  .story-item-subtitle {
    font-size: var(--fs-lg);
    line-height: 1.35;
  }

  .story-item-title {
    margin-top: var(--sp-5);
  }

  .story-item-excerpt {
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-4);
    line-clamp: 3;
    -webkit-line-clamp: 3;
  }

  .date-day {
    font-size: var(--fs-4xl);
  }

  .date-sep {
    font-size: var(--fs-3xl);
  }

  .date-month{
    font-size: var(--fs-xl);
    transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
}

  .story-item-thumb.no-image::before {
    font-size: 280px;
  }
}


/* ========== 响应式：平板 ========== */
@media (max-width: 1024px) {
  .featured-wrapper {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }

  .featured-main {
    grid-template-columns: 1fr 1fr;
  }

  .featured-peek {
    display: none;
  }

  .featured-card {
    padding: var(--sp-6);
  }

  .featured-nav {
    bottom: var(--sp-4);
    right: var(--sp-4);
  }

  .featured-nav-btn {
    width: var(--sp-8);
    height: var(--sp-8);
    font-size: var(--fs-xs);
  }

  .category-name {
    font-size: var(--fs-base);
  }

  .category-back-link {
    font-size: var(--fs-sm);
  }

  .story-list-item {
    grid-template-columns: 180px 1fr;
    gap: var(--sp-4);
    padding: 0 var(--sp-3) var(--sp-5) var(--sp-3);
  }

  .story-item-media {
    margin-top: -16px;
  }

  .story-item-body {
    display: flex;
    flex-direction: column;
  }

  .story-item-title,
  .story-item-subtitle {
    font-size: var(--fs-base);
    line-height: 1.4;
    margin-bottom: var(--sp-1);
  }

  .story-item-excerpt {
    margin-top: var(--sp-3);
    margin-bottom: var(--sp-3);
    line-clamp: 3;
    -webkit-line-clamp: 3;
  }

  .story-item-more {
    position: static;
    align-self: flex-end;
    margin-top: var(--sp-2);
  }

  .date-day {
    font-size: var(--fs-3xl);
  }

  .date-sep {
    font-size: var(--fs-2xl);
  }

  .date-month {
    font-size: var(--fs-lg);
  }

  .story-item-thumb.no-image::before {
    font-size: 180px;
  }

  .recommend-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
  }
}

/* ========== 响应式：手机 ========== */
@media (max-width: 768px) {
  .featured-section {
    padding: var(--sp-16) 0 var(--sp-12);
  }

  .featured-section::before {
    width: 120px;
    height: 40px;
  }

  .featured-wrapper {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }

  .featured-main {
    grid-template-columns: 1fr;
  }

  .featured-peek {
    display: none;
  }

  .featured-card {
    padding: var(--sp-6);
    gap: var(--sp-3);
  }

  .featured-date {
    font-size: var(--fs-xs);
  }

  .featured-title {
    font-size: var(--fs-lg);
  }

  .featured-excerpt {
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
  }

  .featured-more {
    font-size: var(--fs-xs);
  }

  .featured-nav {
    bottom: var(--sp-4);
    right: var(--sp-4);
    gap: var(--sp-2);
  }

  .featured-nav-btn {
    width: var(--sp-8);
    height: var(--sp-8);
    font-size: var(--fs-xs);
  }

  .story-content-section {
    padding: var(--sp-16) 0 var(--sp-12);
  }

  .content-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: none;
  }

  .category-sidebar {
    position: static;
  }

  .category-list {
    display: block;
  }

  .category-item {
    padding: var(--sp-4) 0 var(--sp-4) 16px;
  }

  .category-item + .category-item {
    margin-top: var(--sp-2);
  }

  .category-item::before {
    top: 50%;
    transform: translateY(-50%);
  }

  .category-item:hover::before,
  .category-item.active::before {
    height: 1.2em;
  }

  .category-name {
    font-size: var(--fs-base);
  }

  .category-back-link {
    margin-top: var(--sp-6);
    margin-left: 16px;
    font-size: var(--fs-base);
  }

  .story-list {
    gap: var(--sp-8);
  }

  .story-list-item {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    padding: 0 var(--sp-4) var(--sp-4) var(--sp-4);
  }

  .story-item-media {
    margin-top: 0;
  }

  .story-item-thumb {
    aspect-ratio: 16 / 9;
    order: -1;
  }

  .story-item-thumb.no-image {
    aspect-ratio: 16 / 9;
  }

  .story-item-thumb.no-image::before {
    font-size: 330px;
  }

  .story-item-date {
    flex-direction: row;
    gap: 4px;
    align-items: baseline;
    padding-top: var(--sp-4);
  }

  .story-item-title,
  .story-item-subtitle {
    font-size: var(--fs-base);
    line-height: 1.35;
    margin-bottom: var(--sp-1);
  }

  .story-item-title {
    margin-top: var(--sp-2);
  }

  .story-item-excerpt {
    margin-top: var(--sp-2);
    margin-bottom: var(--sp-2);
    line-clamp: 2;
    -webkit-line-clamp: 2;
  }

  .story-item-more {
    position: static;
    align-self: flex-end;
    margin-top: var(--sp-1);
  }

  .date-day {
    font-size: var(--fs-3xl);
  }

  .date-sep {
    margin: 0;
    font-size: var(--fs-xl);
    transform: translateY(20%);
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -ms-transform: translateY(20%);
    -o-transform: translateY(20%);
}

  .date-month {
    font-size: var(--fs-base);
    transform: translateY(30%);
    -webkit-transform: translateY(30%);
    -moz-transform: translateY(30%);
    -ms-transform: translateY(30%);
    -o-transform: translateY(30%);
}

  .recommend-section {
    padding: var(--sp-16) 0 var(--sp-12);
  }

  .recommend-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

/* 分页容器 */
.el-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 所有页码按钮统一为圆圈 - 数字完美居中 */
.el-pagination .number {
  min-width: 34px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  line-height: 30px !important;  /* 减去 border 宽度 */
  padding: 0 !important;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  background: transparent;
  border: 2px solid transparent;
  box-sizing: border-box !important; /* 关键：让 border 在内部 */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: none;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 选中状态 - 蓝色背景 + 白色文字 + 阴影 */
.el-pagination .number.active {
  background: linear-gradient(135deg, #409EFF, #337ecc) !important;
  color: #ffffff !important;
  border-color: #409EFF !important;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4) !important;
  transform: scale(1.05);
  font-weight: 600;
}

/* 悬停效果（非选中） */
.el-pagination .number:not(.active):hover {
  background: #ecf5ff !important;
  color: #409EFF !important;
  border-color: #b3d8ff !important;
  transform: scale(1.05);
}

/* 选中悬停保持原样 */
.el-pagination .number.active:hover {
  background: linear-gradient(135deg, #409EFF, #337ecc) !important;
  color: #ffffff !important;
  border-color: #409EFF !important;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4) !important;
  transform: scale(1.05);
}

/* 禁用点击效果 */
.el-pagination .number:active {
  transform: scale(0.95);
}

/* ========== 外置自模板的内联样式 ========== */

/* Banner 背景图（story 专属，通用 .page-banner-bg 已含尺寸/定位；CSS 无法解析 ${base}，用相对路径） */
.story-banner-bg {
  background-image: url('../images/story/story-banner-01.jpg');
}

/* ES 加载中 / ES 分页器：默认隐藏，JS 用 .show()/.hide() 切换（.show() 以内联样式覆盖此规则） */
#storyEsLoading,
#storyEsPagination {
  display: none;
}

/* 底部推荐阅读分页器：居中横向排列（原内联 display:flex;justify-content:center;align-items:center;gap:12px） */
#recommend-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}