/* ============================================================
   Hero banner carousel — strict spec:
   100% wide, 600px tall (300px on phones), ONE slide visible,
   object-fit: cover, 3s autoplay loop, 0.6s ease-in-out slide+fade,
   bottom-centre dots, semi-transparent side arrows (desktop),
   hover pauses, touch swipe on mobile. Native CSS/JS only.
   ============================================================ */

.hero-banner{position:relative;width:100%;height:clamp(560px,68vh,760px);overflow:hidden;background:var(--deep);line-height:0}
.hb-track{display:flex;width:100%;height:100%;transition:transform .6s ease-in-out;will-change:transform}
.hb-slide{position:relative;flex:0 0 100%;width:100%;height:100%;opacity:.35;transition:opacity .6s ease-in-out}
.hb-slide.is-on{opacity:1}
.hb-slide img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}

/* 文案层不要吃掉轮播的点击/滑动手势 */
.hero-copy{pointer-events:none}
.hero-copy .wrap{pointer-events:auto}

/* bottom-centre dot indicators */
.hb-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;z-index:5;display:flex;gap:10px;line-height:1}
.hb-dot{width:11px;height:11px;border-radius:50%;border:none;padding:0;cursor:pointer;background:rgba(255,255,255,.45);box-shadow:0 1px 4px rgba(0,0,0,.35);transition:background .25s,transform .25s}
.hb-dot:hover{background:rgba(255,255,255,.8)}
.hb-dot.is-on{background:#fff;transform:scale(1.25)}
.hb-dot:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* semi-transparent side arrows (desktop only) */
.hb-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(4,26,33,.38);color:#fff;transition:background .25s;line-height:1}
.hb-arrow:hover{background:rgba(4,26,33,.62)}
.hb-arrow:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.hb-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hb-prev{left:18px}
.hb-next{right:18px}

/* mobile: 300px tall, dots + swipe only */
@media (max-width:1120px){
  .hero-banner{height:clamp(420px,52vh,560px)}
}
@media (max-width:640px){
  .hero-banner{height:300px}
  .hb-arrow{display:none}
  .hb-dots{bottom:12px;gap:8px}
  .hb-dot{width:9px;height:9px}
}
@media (prefers-reduced-motion:reduce){
  .hb-track,.hb-slide{transition:none}
}