/* 影片详情页 */

.wy-detail-row { display: flex; flex-direction: column; gap: var(--gap); align-items: flex-start; }
.wy-detail-content { min-width: 0; width: 100%; }
.wy-detail-sidebar { width: 100%; }

/* 猜你喜欢 + 评论区 与 排行榜 sidebar 并排双栏；简介/选集/分集剧情维持在上方单栏，
   见 vod/detail.html 的 .wy-detail-lower（取代原本 .wy-detail-sidebar 整栏并排的写法） */
.wy-detail-lower { display: flex; flex-direction: column; gap: var(--gap); align-items: flex-start; }
.wy-detail-lower-main { min-width: 0; width: 100%; }

/* ===== Hero：资讯卡片 + 封面（照设计稿：灰底卡片与封面图交错叠放） ===== */
.wy-vd-hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* .wy-vd-card 仅作垂直排版容器，不带任何底色/阴影：标题、标签、播放按钮均直接显示在页面背景上 */
.wy-vd-card {
  display: flex;
  flex-direction: column;
}
/* 白底卡片样式落在简介资讯区（.wy-vd-info-panel）本身，照设计稿：只有简介/导演/演员等资讯区带灰底卡片 */
.wy-vd-info-panel {
  margin-top: 20px;
  order: 2;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px;
}
/* 播放/收藏按钮：手机版排在标签与简介卡片之间独立成块（照设计稿） */
.wy-vd-actions { order: 1; }

@media (max-width: 639.98px) {
  .wy-vd-headline > .wy-vd-title { justify-content: center; }
  .wy-vd-headline > .wy-vd-meta-line { justify-content: center; text-align: center; }
  .wy-vd-tags { justify-content: center; }
  .wy-vd-actions { justify-content: center; }
}
.wy-vd-thumb { position: relative; flex-shrink: 0; width: 100%; max-width: 220px; aspect-ratio: 2/3; border-radius: var(--radius); overflow: hidden; background: var(--bg-chip); box-shadow: var(--shadow); margin: 0 auto; }
.wy-vd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wy-vd-title { font-size: 26px; font-weight: 800; line-height: 1.35; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wy-vd-score { background: #41ac52; color: #fff; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-sm); }

/* 資訊小標籤（年份/地區/類型），照設計稿：淺灰底、深色字、圓角矩形，尺寸較大氣 */
.wy-vd-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.wy-vd-tag {
  display: inline-flex;
  align-items: center;
  background: var(--bg-white);
  border: 1px solid var(--border-mid);
  color: var(--text-second);
  font-size: 14px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--radius);
}
.wy-vd-tag a { color: inherit; }
.wy-vd-tag:hover, .wy-vd-tag a:hover { color: var(--accent); background: var(--accent-light); }

/* 簡介（vod_blurb）：桌機最多顯示三行，平板/手機最多兩行，超出以省略符號截斷 */
.wy-vd-desc {
  margin: 8px 0;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.9;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
@media (max-width: 1024.98px) {
  .wy-vd-desc { -webkit-line-clamp: 2; }
}

/* 導演/演员/首映/备注/影评：label 固定寬度對齊成一條線（照設計稿表格式排列） */
.wy-vd-meta-line {
  margin-top: 0;
  display: flex;
  font-size: 14px;
  color: var(--text-second);
  line-height: 1.8;
  padding: 6px 0;
}
.wy-vd-meta-line--muted { color: var(--text-second); }
.wy-vd-meta-label { flex: 0 0 56px; color: var(--text-faint); }
.wy-vd-meta-line--namelist { flex-wrap: wrap; }
.wy-vd-meta-line--namelist a { color: var(--text-second); margin-right: 4px; white-space: nowrap; }
.wy-vd-meta-line--namelist a:hover { color: var(--accent); }

/* 影評：外部搜尋連結圖示列，照設計稿彩色圓角方塊 + 白色圖示 */
.wy-vd-review-links { display: inline-flex; gap: 8px; vertical-align: middle; }
.wy-vd-review-links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  color: #fff; font-size: 15px;
}
.wy-vd-review-links a:hover { opacity: 0.85; }
.wy-vd-review-douban { background: #2e8b57; }
.wy-vd-review-douyin { background: #1a1a1a; }
.wy-vd-review-weibo { background: #e6162d; }
.wy-vd-review-kuaishou { background: #ff4906; }
.wy-vd-review-baidu { background: #2932e1; }

.wy-vd-actions { margin-top: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wy-vd-play-btn, .wy-vd-down-btn, .wy-vd-share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 40px; padding: 0 22px;
  border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 700;
}
.wy-vd-play-btn .mac-icon, .wy-vd-down-btn .mac-icon, .wy-vd-share-btn .mac-icon { font-size: 20px; }
.wy-vd-play-btn { background: var(--accent-vivid); color: #1a1200; }
.wy-vd-play-btn:hover { background: #ffc700; }
/* 次要按鈕（下载/分享）比照 dushe3.app 實測：深色底、白字 */
.wy-vd-down-btn, .wy-vd-share-btn { background: var(--dark-btn); color: #fff; }
.wy-vd-down-btn:hover, .wy-vd-share-btn:hover { background: var(--dark-btn-2); }

/* ===== Tabs ===== */
.wy-detail-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin: -18px -18px 16px; padding: 0 18px; }
.wy-dtab { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: var(--text-muted); padding: 14px 0 12px; position: relative; cursor: pointer; }
.wy-dtab.wy-active { color: var(--text); }
.wy-dtab.wy-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent-vivid); }

/* ===== 角色信息 ===== */
.wy-cast-list-wrap { position: relative; }
.wy-cast-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-height: 260px; overflow: hidden; }
.wy-cast-list-wrap.wy-cast-expanded .wy-cast-list, #castListWrap.wy-cast-expanded .wy-cast-list { max-height: none; }
.wy-cast-link { display: flex; align-items: center; gap: 10px; }
.wy-cast-avatar { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: var(--bg-chip); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--text-faint); }
.wy-cast-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wy-cast-name { display: block; font-size: 13px; color: var(--text-second); font-weight: 600; }
.wy-cast-role { display: block; font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.wy-cast-link:hover .wy-cast-name { color: var(--accent); }
/* 展开按钮默认隐藏，仅当 JS 检测到角色列表超出 3 行（.wy-cast-has-more）才显示 */
.wy-cast-expand-btn { display: none; margin-top: 10px; font-size: 12.5px; color: var(--accent); align-items: center; gap: 3px; }
.wy-cast-list-wrap.wy-cast-has-more .wy-cast-expand-btn { display: flex; }

/* ===== 我要评分 ===== */
.wy-rate-block { text-align: center; }
.wy-rate-label { font-size: 13.5px; color: var(--text-muted); }
.wy-rate-stars { display: inline-flex; gap: 8px; font-size: 24px; color: var(--border-strong); cursor: pointer; }
.wy-rs.wy-rs-on { color: var(--accent-vivid); }

/* ===== 分集剧情 ===== */
.wy-ep-plot-list { display: flex; flex-direction: column; gap: 10px; }
.wy-ep-plot-item { padding-bottom: 10px; border-bottom: 1px dashed var(--border); display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.wy-ep-plot-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.wy-ep-plot-ep { color: var(--text-second); font-weight: 700; }
.wy-ep-plot-link { flex-shrink: 0; font-size: 12px; color: var(--accent); }
.wy-ep-plot-more-btn { display: block; text-align: center; margin-top: 12px; font-size: 12.5px; color: var(--accent); }

@media (min-width: 640px) {
  .wy-vd-thumb { width: 160px; }
  .wy-cast-list { grid-template-columns: repeat(3, 1fr); }

  /* 猜你喜欢＋评论区 与 排行榜 sidebar 并排双栏（平板起，含桌面版） */
  .wy-detail-lower { flex-direction: row; margin-top: 22px; }
  .wy-detail-lower-main { flex: 1; }
  /* width + min-width:0 双保险：flex-basis 会被子元素 min-content（专题卡/榜单长标题）撑宽到 600px+ */
  .wy-detail-sidebar { flex: 0 0 240px; width: 240px; max-width: 240px; min-width: 0; margin-top: 0; }
  .wy-detail-lower-main { min-width: 0; }

  .wy-detail-lower-main > .wy-pannel-box:first-child { margin-top: 0; }
}


@media (min-width: 640px) and (max-width: 1024.98px) {
  .wy-detail-lower-main .wy-card-grid { grid-template-columns: repeat(3, 1fr); }
  /* 平板宽度较窄，排行榜栏进一步收窄，让左栏多留些空间 */
  .wy-detail-sidebar { flex: 0 0 200px; }
}
@media (min-width: 1025px) and (max-width: 1279.98px) {
  .wy-detail-lower-main .wy-card-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1280px) {
  .wy-detail-lower-main .wy-card-grid { grid-template-columns: repeat(9, 1fr); gap: 12px 10px; }
}


@media (min-width: 640px) and (max-width: 1024.98px) {
  .wy-vd-hero { position: relative; min-height: 280px; }
  .wy-vd-card { position: relative; }
  .wy-vd-headline {
    position: absolute;
    top: 0;
    left: 0;
    right: 190px;
  }

  .wy-vd-info-panel {
    margin-top: 140px;
    margin-right: 34px;
    padding: 20px 180px 91px 20px;
  }
  /* z-index：.wy-vd-actions 的 flex order 小于 .wy-vd-info-panel（手机版排序需要），
     绝对定位后仍按 order 决定层叠顺序，需明确提升层级才能盖在卡片内容之上 */
  .wy-vd-actions { position: absolute; left: 20px; right: 190px; bottom: 20px; margin-top: 0; z-index: 1; }
  .wy-vd-thumb {
    position: absolute;
    top: 0px;
    right: 0;
    width: 200px;
    max-width: none;
    margin: 0;
    box-shadow: var(--shadow-lg);
    z-index: 2;
  }
}

@media (min-width: 1025px) {
  .wy-cast-list { grid-template-columns: repeat(4, 1fr); }

  .wy-vd-hero { position: relative; display: block; min-height: 400px; }
  .wy-vd-card { position: relative; }
  .wy-vd-headline {
    position: absolute;
    top: 0;
    left: 0;
    right: 330px;
  }
  .wy-vd-info-panel {
    position: relative;
    /* 白底卡片顶部与右侧留白：实测校准值（照设计稿效果调整），margin-right 让卡片右缘
       与封面图之间留出间隙，不再紧贴 */
    margin-top: 140px;
    margin-right: 60px;
    min-height: 300px;
    padding: 20px 236px 91px 24px;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }
  /* ≥1025px 起，播放/收藏按钮改叠回简介卡片内部左下角（照设计稿：桌面/平板版按钮在卡片内）；
     z-index：flex order 使其绘制顺序早于 .wy-vd-info-panel，需明确提升层级才不被卡片盖住 */
  .wy-vd-actions {
    position: absolute;
    left: 24px;
    right: 310px;
    bottom: 20px;
    margin-top: 0;
    z-index: 1;
  }
  /* 封面图绝对定位、悬浮于白底卡片之上（z-index 高于卡片），故 top 为负值使其向上探出 hero、
     覆盖卡片右上角，制造交错感；卡片右侧 padding-right:310px 已预留避开封面图宽度（280px）+间距的文字安全区 */
  .wy-vd-thumb {
    position: absolute;
    top: -20px;
    right: 0;
    width: 280px;
    max-width: none;
    margin: 0;
    box-shadow: var(--shadow-lg);
    z-index: 2;
  }
}

/* ===== skill 整改补充 ===== */
.wy-dtab { background: none; border: 0; font: inherit; }
.wy-rate-stars .wy-rs { background: none; border: 0; font: inherit; cursor: pointer; }
.wy-vd-lead { margin: 0 0 12px; font-size: 14px; line-height: 1.8; color: var(--text-second); }
.wy-vd-tag--state { background: var(--accent-vivid); color: #1a1200; font-weight: 700; }
.wy-vd-meta-line--pair { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.wy-vd-sep { margin: 0 4px; color: var(--text-faint); }
.wy-vd-tagchip { display: inline-block; margin: 2px 6px 2px 0; padding: 1px 8px; border-radius: var(--radius-sm); background: var(--bg-chip); color: var(--text-second); font-size: 12px; }
.wy-vd-tagchip:hover { color: var(--accent); background: var(--accent-light); }
.wy-vd-share-btn { border: 0; font: inherit; cursor: pointer; }
.wy-rel-grid.wy-collapsed > li:nth-child(n+10) { display: none; }
.wy-rel-toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; padding: 6px 14px; font-size: 13px; color: var(--text-second); background: var(--bg-white); border: 1px solid var(--border-mid); border-radius: var(--radius-pill); cursor: pointer; }
.wy-rel-toggle:hover { color: var(--accent); border-color: var(--accent-vivid); }
.wy-rel-toggle[hidden] { display: none; }
.wy-aside-topic-list { list-style: none; margin: 0; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }

/* 侧栏内容不得撑宽：榜单/专题卡片在 240px 内截断 */
.wy-detail-sidebar .wy-aside-block, .wy-detail-sidebar .wy-vlt-rank-list, .wy-detail-sidebar .wy-aside-topic-list { min-width: 0; }
.wy-detail-sidebar .wy-vlt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wy-aside-topic-list > li { min-width: 0; }