/**
 * ============================================================
 * 老站 slide 轮播补丁
 *
 * 为什么需要这个文件：
 *   老站的 slide / slide_wrap / slide_c / slide_effect_* / .arrs 等样式
 *   并不存在于 style.css，而是由 modules/slide.js（jQuery 插件）
 *   在运行时用 seajs.importStyle() 注入的。
 *
 *   我们复刻时没有引入 jQuery/seajs，这些规则就缺失了，导致：
 *     · .banner_li 没有 position:absolute -> 三张图竖直堆叠
 *     · 没有 .slide_c{display:none} -> 隐藏/显示切换失效
 *
 * 规则逐条对照官网运行时提取结果，数值保持一致。
 * ⚠️ 注意：.slide_nav 的定位与分页点背景图在 style.css 里已有，
 *    此处不重复定义，避免覆盖。
 * ============================================================
 */

/* ---------- slide.js 运行时注入的结构样式 ---------- */
.slide {
  display: block;
  position: relative;
  overflow: hidden;
}
.slide_wrap {
  position: relative;
  width: 100%;
}
.slide_wrap img {
  max-width: none;
}
.slide_c {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
}
.slide_effect_toggle .active {
  display: block;
}
/*
   ============================================================
   slide_effect_slide 的「并排」语义（2026-11-05 修正）

   ⚠️ 老规则是：
       .slide_effect_slide .active      { position: relative; display:block }
       .slide_effect_slide .slide_prev  { left:0;  display:block }
       .slide_effect_slide .slide_next  { right:0; display:block }

     这在**绝对定位体系**下成立（三张叠在同一位置，靠 left/right 微调）。
     但我们的 banner / pt4 都是「**三张并排 + 轨道平移**」模式：

       ul.banner_ul { width: 3 × 单张宽; transform: translateX(-idx × 单张宽) }

     此时如果让 .active 变 position:relative（回到文档流），
     而 .slide_prev / .slide_next 保持 position:absolute（脱离文档流），
     三张图的顺序就会错位 —— 实测表现为：
         active 的是第 0 张，但它被排到了 left=1403（视口外），
         视口里看到的反而是第 2 张。
      用户看到的就是「轮播错位 / 显示的不是当前那张」。

   ⚠️ 正解：保持 .slide_c 的绝对定位，三张都并排在同一行，
     由 ul 的 transform 统一平移。不再单独改 .active 的 position。

   ⚠️ 这个改动同时影响 banner 与 pt4：
     - banner：三张 absolute 并排，ul 宽 3×1366，平移切换 ✔
     - pt4   ：下面有更具体的 .pt4_li.slide_c 规则覆盖为 inline-block ✔
   ============================================================ */
.slide_effect_slide .active {
  display: block;
}
.slide_effect_slide .slide_prev {
  display: block;
}
.slide_effect_slide .slide_next {
  display: block;
}

/*
   ============================================================
   pt4 市场营销轮播（2026-11-05 修复「切到第二张空白」）

   【两种轮播机制不同，必须区别对待】
     banner  ：绝对定位 + active 类切显隐（一次只显示 1 个）
     pt4     ：所有 slide 横向并排 + transform 平移轨道

   本文件上面的 `.slide_c{display:none}` 和
   `.slide_effect_slide .active{display:block}` 是给 banner 用的，
   套到 pt4 上就变成：非 active 的 slide 不占位 → 平移过去是空白。

   【实测到的两个具体问题】
     ① 第二个 slide display:none、高度 0 → 切过去空白
     ② 修好显示后，两个 li 的 left 都是 37 → 上下堆叠没并排
        根本原因：老站靠 jQuery slide 插件动态设 left，
        我们没引插件，CSS 里没有任何并排规则（.slide_wrap 只有 width:100%）

   【解法】
     用 inline-block 并排（不用 flex，避免影响 banner 的绝对定位体系）：
       · 轨道 white-space:nowrap 阻止换行
       · li 改 inline-block，宽度由 JS 内联的 1366px 决定
     配合组件里已有的 transform:translateX(-idx*1366)，平移即可正确切换。

   ⚠️ 只作用于 .pt4 内部，不影响 banner。
   ============================================================ */
.index .pt4 .pt4_lunbo.slide_wrap {
  white-space: nowrap;
  width: auto;              /* 让轨道宽度由内容撑开（N × 1366） */
  font-size: 0;             /* 消除 inline-block 之间的空白间隙 */
}

.index .pt4 .pt4_lunbo .pt4_li.slide_c {
  display: inline-block;    /* 覆盖 .slide_c 的 display:none */
  position: relative;       /* 覆盖 .slide_c 的 position:absolute */
  vertical-align: top;
  white-space: normal;      /* 恢复 li 内部正常换行 */
  font-size: 14px;          /* 抵消轨道上的 font-size:0 */
}
.slide_nav {
  position: absolute;
  z-index: 8;
}
.slide .arrs {
  position: absolute;
  cursor: pointer;
  z-index: 9;
  -webkit-user-select: none;
  user-select: none;
}
.arrs.unable {
  cursor: default;
}

/* ---------- 平移切换 ----------
 * 官网 ul.banner_ul 的运行时样式：
 *   width: 单张宽 × 张数
 *   transform: translateX(-当前索引 × 单张宽)
 * 单张宽由 --banner-slide-w 控制，JS 只需设置索引。
 */
.index_banner .banner_area .banner_ul {
  width: calc(var(--banner-slide-w, 1366px) * var(--banner-count, 3));
  transition: transform 500ms ease;
  transform: translateX(calc(var(--banner-index, 0) * -1 * var(--banner-slide-w, 1366px)));
}

/*
   每张 li 的宽度等于单张宽，并【横向并排】

   ⚠️ .slide_c 是 position:absolute; left:0 —— 三张会全叠在同一个左上角。
      老站靠 slide 插件逐张设 left:i×宽，我们没引插件，必须自己补。
      用 left: calc(index × 单张宽) 让三张依次排开，
      再由 ul 的 translateX(-idx × 宽) 把当前那张移进视口。
*/
/*
   ⚠️ 必须 !important：
      .slide_c { position:absolute; left:0 } 在后面（同文件靠后）且特异性相同，
      普通规则压不住 —— 实测三张 left 全是 0，完全叠在一起。
*/
.index_banner .banner_area .banner_li {
  width: var(--banner-slide-w, 1366px);
}

.index_banner .banner_area .banner_li:nth-child(1) {
  left: 0 !important;
}
.index_banner .banner_area .banner_li:nth-child(2) {
  left: var(--banner-slide-w, 1366px) !important;
}
.index_banner .banner_area .banner_li:nth-child(3) {
  left: calc(var(--banner-slide-w, 1366px) * 2) !important;
}

/* ---------- ⚠️ 关键：data-src 会导致图片透明 ----------
 *
 * responsive.css 里有（老站懒加载机制）：
 *     img[data-src] { opacity: 0 }
 *
 * 老站在 lazyload 完成后移除 data-src 属性，图片随之显现。
 * 我们不做懒加载，所以 banner 模板里**不输出 data-src**。
 *
 * 这条兜底规则防止别处（历史内容/aeditor 富文本）残留 data-src 导致图片隐形。
 */
img[data-src][src]:not([src=""]) {
  opacity: 1 !important;
  filter: none !important;
}