/* ==========================================================================
   台宝泵业 · 首页 Banner 轮播（导航下方）
   使用老模板整图素材 /images/banner1-3.jpg（1885×700）
   —— 自动滚动 + 左右切换 + 手指/鼠标滑动
   —— 图片按原始比例完整显示，任何屏宽都不裁切（object-fit:contain）
   ========================================================================== */

.tb-banner{
  position:relative;overflow:hidden;background:#071120;
  isolation:isolate;
}
.tb-banner__inner{position:relative}

/* ---------- 滑动轨道 ---------- */
.tb-banner__viewport{overflow:hidden;cursor:grab;background:#071120}
.tb-banner__viewport:active{cursor:grabbing}
.tb-banner__track{
  display:flex;align-items:stretch;
  will-change:transform;transform:translate3d(0,0,0);
  transition:transform .62s cubic-bezier(.22,.7,.28,1);
}
.tb-banner__track.is-dragging{transition:none}

.tb-slide{
  flex:0 0 100%;min-width:0;
  display:block;line-height:0;background:#071120;
}
.tb-slide img{
  display:block;width:100%;height:auto;
  max-height:76vh;
  object-fit:contain;object-position:center;
  -webkit-user-drag:none;user-select:none;
}
.tb-slide img::selection{background:transparent}

/* ---------- 左右切换按钮 ---------- */
.tb-banner__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(7,17,32,.34);border:1px solid rgba(255,255,255,.34);
  color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  cursor:pointer;box-shadow:0 10px 26px -14px rgba(0,0,0,.8);
  transition:background-color .24s cubic-bezier(.22,.7,.28,1),
             border-color .24s cubic-bezier(.22,.7,.28,1),
             transform .24s cubic-bezier(.22,.7,.28,1);
}
.tb-banner__nav svg{width:22px;height:22px;display:block}
.tb-banner__nav:hover{background:var(--blue-600,#0B5CFF);border-color:var(--blue-600,#0B5CFF);transform:translateY(-50%) scale(1.06)}
.tb-banner__nav:active{transform:translateY(-50%) scale(.95)}
.tb-banner__nav:focus-visible{outline:2px solid #7FA8FF;outline-offset:3px}
.tb-banner__nav--prev{left:26px}
.tb-banner__nav--next{right:26px}

/* ---------- 圆点指示 ---------- */
.tb-banner__dots{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;gap:9px;
}
.tb-banner__dot{
  width:9px;height:9px;padding:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.42);border:0;
  box-shadow:0 1px 4px rgba(0,0,0,.45);
  transition:width .32s cubic-bezier(.22,.7,.28,1),background-color .32s cubic-bezier(.22,.7,.28,1);
}
.tb-banner__dot:hover{background:rgba(255,255,255,.8)}
.tb-banner__dot.is-on{width:30px;background:#fff}
.tb-banner__dot:focus-visible{outline:2px solid #7FA8FF;outline-offset:3px}

/* 无障碍隐藏标题（Banner 为整图，保留 H1 给搜索引擎） */
.tb-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:1180px){
  .tb-banner__nav{width:48px;height:48px}
  .tb-banner__nav--prev{left:18px}
  .tb-banner__nav--next{right:18px}
}
@media (max-width:768px){
  .tb-slide img{max-height:none}
  .tb-banner__nav{width:38px;height:38px;background:rgba(7,17,32,.42)}
  .tb-banner__nav svg{width:17px;height:17px}
  .tb-banner__nav--prev{left:10px}
  .tb-banner__nav--next{right:10px}
  .tb-banner__dots{bottom:10px;gap:7px}
  .tb-banner__dot{width:7px;height:7px}
  .tb-banner__dot.is-on{width:20px}
}

/* 无障碍：减少动效 */
@media (prefers-reduced-motion:reduce){
  .tb-banner__track{transition:none}
  .tb-banner__nav,.tb-banner__dot{transition:none}
}