/* ============================================================================
   pddun.com 首页 Hero · 集团站点滚动视频窗口
   2026-09-19 小八 ｜ 与集团其余 8 站同一套交互与几何规范
   容器 16/10 · 桌面 517x323 · 懒加载(当前+下一条) · 降级保留封面并给播放按钮
   本文件独立于 assets/style.css，避免影响站点其他页面
   ============================================================================ */

/* ---------- Hero 两栏：左文案 / 右视频窗口 ---------- */
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) 517px;column-gap:48px;align-items:center}
.hero-copy{min-width:0}
.hero-copy .sub{max-width:100%}

/* ---------- 窗口容器（锁 16/10，保证零位移） ---------- */
.hv-box{position:relative;width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  border:1px solid rgba(230,194,110,.34);background:#0A1628;
  box-shadow:0 18px 44px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.04)}
/* 顶部/底部压暗，保证任何画面上角标与小字都能读清 */
.hv-box::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,12,22,.42) 0,rgba(6,12,22,0) 26%,
             rgba(6,12,22,0) 60%,rgba(6,12,22,.52) 100%)}
.hv-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hv-slide.is-on{opacity:1;z-index:2}
.hv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  background:#0A1628}

/* ---------- 窗口内标签层（全部叠在视频上，统一按"播放器"处理，深浅主题都清晰） ---------- */
.hv-kicker{position:absolute;left:12px;top:12px;z-index:5;font-size:11px;letter-spacing:.09em;
  color:rgba(255,255,255,.9);text-shadow:0 1px 7px rgba(0,0,0,.85);pointer-events:none;white-space:nowrap}
.hv-tag{position:absolute;right:12px;top:12px;z-index:5;
  background:rgba(7,14,26,.66);border:1px solid rgba(230,194,110,.34);border-radius:999px;
  padding:4px 11px;font-size:12px;font-weight:700;color:var(--gold-l,#f8e6a4);
  font-family:Consolas,Monaco,monospace;letter-spacing:.02em;backdrop-filter:blur(6px);white-space:nowrap}
.hv-cap{position:absolute;left:12px;bottom:11px;z-index:5;
  max-width:min(58%,calc(100% - 190px));
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:rgba(7,14,26,.66);border:1px solid rgba(230,194,110,.34);border-radius:999px;
  padding:5px 12px;font-size:12.5px;color:var(--gold-l,#f8e6a4);backdrop-filter:blur(6px);
  transition:background .2s,border-color .2s,color .2s}
.hv-cap b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hv-cap i{font-style:normal;opacity:.8;flex:none}
.hv-cap:hover{background:rgba(230,194,110,.22);border-color:var(--gold-l,#f8e6a4);color:#fff}
.hv-dots{position:absolute;right:12px;bottom:12px;z-index:5;display:flex;gap:4px;align-items:center}
.hv-dot{width:14px;height:4px;border-radius:2px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.42);box-shadow:0 1px 3px rgba(0,0,0,.55);
  transition:width .35s,background .35s}
.hv-dot.is-on{width:22px;background:var(--gold,#f0d26b)}
.hv-dot:focus-visible{outline:2px solid var(--gold-l,#f8e6a4);outline-offset:2px}

/* ---------- 降级 / 出错：显示「点击播放」（绝不让功能消失） ---------- */
.hv-play{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;gap:10px;
  align-items:center;justify-content:center;background:rgba(8,15,28,.5);
  border:0;cursor:pointer;color:var(--gold-l,#f8e6a4);font-family:inherit;
  font-size:13.5px;font-weight:700;letter-spacing:.03em}
.hv-box[data-static="1"] .hv-play,.hv-box.is-failed .hv-play{display:flex}
.hv-play-ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:rgba(230,194,110,.16);border:1.6px solid var(--gold,#f0d26b);
  font-size:18px;line-height:1;padding-left:3px}
.hv-play:hover{background:rgba(8,15,28,.66)}
.hv-play:hover .hv-play-ic{background:rgba(230,194,110,.3)}

/* ---------- 窗口外框随浅色主题微调（内部标签仍按播放器处理） ---------- */
body.light .hv-box{border-color:rgba(184,134,11,.45);
  box-shadow:0 14px 34px rgba(16,24,40,.18),inset 0 0 0 1px rgba(255,255,255,.5)}

/* ---------- 响应式：右列随视口收缩，1040px 以下改为上下堆叠 ---------- */
@media (max-width:1280px) and (min-width:1041px){
  .hero-in{grid-template-columns:minmax(0,1fr) min(460px,calc(100vw - 690px));column-gap:24px}
  .hv-dot{width:12px}.hv-dot.is-on{width:18px}
  .hv-cap{max-width:min(58%,calc(100% - 176px))}
  .hv-cap-tx{display:none}          /* 窄档省掉「进入」二字，避免站名被省略号截断 */
}
@media (max-width:1040px){
  .hero-in{grid-template-columns:1fr;row-gap:34px}
  .hv-box{max-width:517px}
}
@media (max-width:640px){
  .hv-box{max-width:100%;border-radius:12px}
  .hv-kicker{font-size:10px;left:10px;top:10px}
  .hv-tag{right:10px;top:10px;padding:3px 9px;font-size:11px}
  .hv-cap{left:10px;bottom:10px;padding:4px 10px;font-size:11px;gap:6px;
    max-width:min(58%,calc(100% - 148px))}
  .hv-dots{right:10px;bottom:11px;gap:3px}
  .hv-dot{width:10px;height:3.5px}
  .hv-dot.is-on{width:16px}
}