.vod-archive{padding:20px 0;--vod-cover-ratio:16/9}
/* 稳定滚动条宽度以避免内容左右抖动 */
:root{scrollbar-gutter:stable both-edges}
/* 还原：不强制滚动条占位 */
.vod-archive.vod-ratio-32{--vod-cover-ratio:3/2}
.vod-container{max-width:1200px;margin:0 auto;padding:0 24px}

/* header */
.vod-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px}
.vod-title{margin:0;font-size:26px;line-height:1.2;color:#111;font-weight:600}

/* chips */
.vod-chip{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;min-width:112px;border:1px solid color-mix(in srgb, var(--theme-color) 50%, transparent);border-radius:8px;background:var(--vod-chip-bg);color:var(--vod-chip-text);text-decoration:none;font-weight:600;box-shadow:0 4px 10px rgba(0,0,0,.04);transition:box-shadow .15s ease,border-color .15s ease}
.vod-chip:hover{box-shadow:0 8px 18px rgba(0,0,0,.06);border-color:var(--theme-color)}
.vod-chip.is-active{background:var(--theme-color);color:#fff;border-color:var(--theme-color);box-shadow:none}
.vod-chips{display:flex;gap:8px;flex-wrap:wrap}

.vod-toolbar{display:none}
.vod-count{font-size:13px;color:#888}

/* grid */
.vod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:1199px){.vod-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:991px){.vod-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575px){.vod-grid{grid-template-columns:1fr;gap:10px}}

/* card */
.vod-card{position:relative;background:#fff;border:1px solid #eee;border-radius:10px;overflow:hidden;transition:transform .12s ease,box-shadow .12s ease}
.vod-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.vod-card-cover{position:relative;aspect-ratio:var(--vod-cover-ratio);background:#f6f6f6}
.vod-card-cover:after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.25) 100%);pointer-events:none}
.vod-play{display:none}
.vod-card-cover img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:auto}
.vod-card-title{padding:12px 12px 8px;font-size:14px;line-height:1.45;color:#111;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:575px){.vod-card-title{font-size:13px;padding:10px 10px 6px}}
.vod-card-meta{display:flex;gap:6px;align-items:center;color:#777;padding:0 12px 12px;font-size:12px}
.vod-dot{opacity:.6}

/* overlays (HD, duration, VIP, corner) */
.vod-badge-hd{position:absolute;right:8px;top:8px;background:#ff3b30;color:#fff;font-size:12px;font-weight:700;line-height:1;padding:4px 6px;border-radius:6px}
.vod-duration{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.75);color:#fff;font-size:12px;line-height:1;padding:4px 6px;border-radius:6px}
.vod-badge-vip{position:absolute;left:8px;bottom:8px;background:#8a2be2;color:#fff;font-size:12px;line-height:1;padding:4px 6px;border-radius:6px}
.vod-badge-corner{position:absolute;right:0;top:0;background:#ffcc00;color:#111;font-size:11px;font-weight:700;padding:6px 8px;border-bottom-left-radius:8px}

/* clickable area */
.vod-card a{color:inherit;text-decoration:none;display:block}

/* more */
.vod-more{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#111;text-decoration:none;padding:0;border:none;border-radius:0;background:transparent;box-shadow:none;transition:color .15s ease}
.vod-more:after{content:"›";font-size:14px;line-height:1;color:inherit}
.vod-more:hover{color:var(--theme-color)}

/* misc */
.vod-pagination{margin:28px 0 8px;text-align:center}
.vod-empty{color:#999}
.vod-single{padding:20px}
.vod-hero{margin-bottom:12px}
.vod-player{margin-bottom:16px}
.vod-excerpt{color:#777}
.vod-reco{margin-top:20px}

/* spacing tuning to match theme whitespace */
.vod-archive{padding-top:32px}
.vod-header{margin-bottom:24px}
.vod-block-title{margin:0;font-size:22px;line-height:1.25;font-weight:700;color:#111;letter-spacing:0}
.vod-block-title:after{content:"";display:block;width:24px;height:2px;background:var(--theme-color);border-radius:2px;margin-top:6px}
.vod-block{margin:24px 0 8px}
.vod-block-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}


/* compact rectangular tool style for dropdown */
.vod-select{position:relative; display:inline-block}
.vod-select-toggle{
  display:inline-flex; align-items:center; justify-content:space-between;
  height:36px; padding:0 16px; font-size:14px; font-weight:600;
  border:1px solid color-mix(in srgb, var(--theme-color) 50%, transparent); border-radius:8px; background:#fff; color:#333;
  box-shadow:0 4px 10px rgba(0,0,0,.04); cursor:pointer;
  min-width:120px; max-width:160px;
}
.vod-select-toggle:hover{border-color:var(--theme-color)}
.vod-select-toggle:after{content:""; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid #999; margin-left:8px; transition:transform .15s ease}
.vod-select.is-open .vod-select-toggle:after{transform:rotate(180deg)}
.vod-select-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:160px; max-width:220px; background:#fff;
  border:1px solid #e6e6e6; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.08);
  list-style:none; margin:0; padding:6px;
  z-index:1000;
}
.vod-select-menu li{margin:0}
.vod-select-menu a{display:block; padding:8px 10px; font-size:14px; color:#333; text-decoration:none; border-radius:6px}
.vod-select-menu a:hover,.vod-select-menu a[aria-current="true"]{background:var(--theme-color); color:#fff}

/* ---- VOD hotfix: force container width + 4-col grid + 16:9 cover (restore baseline) ---- */
/* when container is nested inside archive */
.vod-archive .vod-container{max-width:1200px !important;margin-left:auto !important;margin-right:auto !important;padding-left:24px !important;padding-right:24px !important}
/* when archive and container classes are on the same element */
.vod-archive.vod-container{max-width:1200px !important;margin-left:auto !important;margin-right:auto !important;padding-left:24px !important;padding-right:24px !important}
@media (min-width:1200px){
  .vod-archive{max-width:1200px !important;margin-left:auto !important;margin-right:auto !important}
  .vod-archive .vod-grid{grid-template-columns:repeat(4,1fr) !important;gap:12px !important}
}
@media (max-width:1199px){.vod-archive .vod-grid{grid-template-columns:repeat(3,1fr) !important}}
@media (max-width:991px){.vod-archive .vod-grid{grid-template-columns:repeat(2,1fr) !important}}
@media (max-width:575px){.vod-archive .vod-grid{grid-template-columns:1fr !important;gap:10px !important}}
.vod-archive .vod-card-cover{aspect-ratio:16/9 !important}
/* keep mobile full width */
@media (max-width:575px){
  .vod-archive .vod-container, .vod-archive.vod-container{max-width:100% !important;padding-left:14px !important;padding-right:14px !important}
  .vod-archive{padding-top:24px}
  .vod-chip{height:32px;min-width:96px;padding:0 12px}
  .vod-select-toggle{height:32px;padding:0 12px}
  .vod-more{padding:0}
}
/* if parent is flex, prevent stretching to full width */
.vod-archive{flex:0 0 auto !important}