/* ==========================================================================
   Banner 轮播 — 样式
   交互参考 TICA：自动轮换 + 可点击分页条 + 悬停出现的左右按钮
   色调：Sodick 绿系渐变 — 激活分页条 / 悬停按钮用亮绿 #2e9c27

   sticky-pinned Hero：首屏钉住效果
   - Hero 高度 = 视口高度的 90%（90vh），桌面端图片以 cover 铺满、边缘等比裁切
   - .hero-pin 是“钉住跑道”：高度 = 2 × Hero 高度（钉住期 = Hero 被完全覆盖）
   - .banner 从页面顶部开始，导航固定悬浮覆盖在 banner 上
   - 下方 .main 通过负 margin 从底部逐步覆盖 Hero，盖满后 Hero 随页面滑出
   - 移动端恢复原 16:9 全宽比例（含模糊衬底），桌面端独立使用 90vh
   ========================================================================== */

.hero-pin {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  height: 180vh; /* = 2 × 视口高度 90vh，钉住跑道为 banner 的两倍 */
}

.banner {
  position: sticky;
  top: 0;
  width: 100%;
  height: 90vh; /* 占屏幕高度的 90% */
  aspect-ratio: auto; /* 高度改为视口百分比，不再锁死原图比例 */
  margin-top: 0;
  overflow: hidden;
  z-index: 0;
}

/* 平板区间（768–1080px）：导航更矮，钉住跑道保持与 banner 一致 */
@media (max-width: 1080px) {
  .hero-pin {
    height: 180vh;
  }

  .banner {
    top: 0;
  }
}

.banner-fix-box {
  width: 100%;
  height: 100%;
}

.main {
  position: relative;
  z-index: 6;
  margin-top: -90vh; /* 与 banner 高度一致，用于滚动覆盖 Hero */
  background-color: #fff;
}

.swiper-bwhj,
.swiper-bwhj .swiper-wrapper,
.swiper-bwhj .swiper-slide {
  height: 100%;
}

/* 幻灯片：背景图作为模糊衬底铺满整屏 */
.swiper-bwhj .swiper-slide {
  position: relative;
  overflow: hidden;
  background-color: #f4f4f4;
}

/* 原图：cover 铺满 90vh 容器，保持比例、不拉伸，超出边缘等比裁切 */
.swiper-bwhj .swiper-slide > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.swiper-bwhj .banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   分页条：细长条，激活态亮绿并拉长
   -------------------------------------------------------------------------- */
.banner .swiper-pagination {
  left: 50%;
  right: auto;
  bottom: 26px;
  width: auto;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.banner .swiper-pagination-bullet {
  width: 26px;
  height: 3px;
  margin: 0 !important;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.55);
  opacity: 1;
  transition: width 0.35s ease, background-color 0.35s ease;
}

.banner .swiper-pagination-bullet-active {
  width: 44px;
  background: #2e9c27;
}

/* --------------------------------------------------------------------------
   左右按钮：悬停轮播区时出现，圆形半透明，悬停变亮绿
   -------------------------------------------------------------------------- */
.banner .swiper-button-next,
.banner .swiper-button-prev {
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  background-color: rgba(0, 0, 0, 0.28);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  opacity: 0;
  visibility: hidden;
  outline: none;
  transition: opacity 0.3s ease, background-color 0.3s ease, visibility 0.3s ease;
}

.banner .swiper-button-next {
  /* 右移避开右侧悬浮栏（floatbar） */
  right: 100px;
  left: auto;
  background-image: url("../img/img/next.png");
}

.banner .swiper-button-prev {
  left: 32px;
  right: auto;
  background-image: url("../img/img/prev.png");
}

.banner:hover .swiper-button-next,
.banner:hover .swiper-button-prev,
.banner .swiper-button-next:focus-visible,
.banner .swiper-button-prev:focus-visible {
  opacity: 1;
  visibility: visible;
}

.banner .swiper-button-next:hover,
.banner .swiper-button-prev:hover {
  background-color: #2e9c27;
}

/* --------------------------------------------------------------------------
   移动端：隐藏按钮，保留分页条与向下提示
   -------------------------------------------------------------------------- */
.arrow-down {
  display: none;
}

@media (max-width: 767.98px) {
  /* 移动端：恢复原 16:9 全宽展示，并同步调整钉住跑道高度与主区覆盖量 */
  .hero-pin {
    height: 112.5vw; /* = 2 × (100vw × 9 / 16) */
  }

  .banner {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .main {
    margin-top: -56.25vw; /* = 100vw × 9 / 16，与移动端 banner 高度一致 */
  }

  /* 移动端完整展示 banner 原图：contain 等比完整显示，不裁切；
     背景用同一张图的模糊放大版本铺满，避免出现大色块边框 */
  .swiper-bwhj .swiper-slide {
    background-color: #2f353a; /* 图片加载前的兜底色（中性深灰，非蓝） */
    background-size: cover;
    background-position: center;
  }

  .swiper-bwhj .swiper-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(14px) brightness(0.8);
    transform: scale(1.15);
    z-index: 0;
  }

  /* 用 Swiper 的 data-swiper-slide-index 匹配，loop 克隆幻灯片也能命中 */
  .swiper-bwhj .swiper-slide[data-swiper-slide-index="0"] {
    background-image: url("../img/img-sbk/banner1.jpg");
  }

  .swiper-bwhj .swiper-slide[data-swiper-slide-index="1"] {
    background-image: url("../img/img-sbk/banner2.jpg");
  }

  .swiper-bwhj .swiper-slide[data-swiper-slide-index="2"] {
    background-image: url("../img/img-sbk/banner3.jpg");
  }

  .swiper-bwhj .swiper-slide > a {
    z-index: 1;
  }

  .swiper-bwhj .banner-img {
    object-fit: contain;
  }

  .banner .swiper-pagination {
    bottom: 16px;
  }

  .banner .swiper-button-next,
  .banner .swiper-button-prev {
    display: none;
  }

  .arrow-down {
    display: block;
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: -25px;
    z-index: 7;
    animation: banner-arrows 2s ease-in-out 0.2s infinite;
  }

  .arrow-down img {
    width: 40px;
  }
}

@keyframes banner-arrows {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }
}