/* 详情页专属样式；基础信息（.lb-vd-*）、白面板与选集列表为详情/下载/播放页共用，放 main.css */

/* 版心宽度与首页一致（沿用 .lb-home-content 的 --max-w 与 --page-pad）；上内距归零让模糊底叠到顶栏下 */
.lb-detail-main {
  padding-top: 0;
}

/* 面板内的区块（选集等）自带的底部外距要清掉，否则集数少时面板下方会留一大块空白 */
.lb-detail-main .lb-vd-panel.lb-module {
  margin-bottom: 0;
}

/* 面板内标题：18px／700（目标站），与首页区块标题的 24px 不同 */
.lb-detail-main .lb-vd-panel .lb-module-title,
.lb-detail-main .lb-playlist .lb-module-title {
  font-size: 18px;
  font-weight: 700;
}

/* 选集、角色信息、分集剧情、关联系列：单栏整行面板，面板间距见 --gap-panel */
.lb-vd-layout {
  display: flex;
  flex-direction: column;
  gap: var(--gap-panel);
}

.lb-vd-layout + .lb-vd-panel,
.lb-vd-panel--stack {
  margin-top: var(--gap-panel);
}

.lb-detail-main > .lb-comment-section,
.lb-detail-main > section.lb-comment-section {
  margin-top: var(--gap-panel);
}

/* 选集框最多显示 7 排（7 排按钮高＋6 个间距），超出在框内滚动；手机按钮较矮（见 main.css 的 767 段） */
.lb-detail-main .lb-playlist-episodes-wrap {
  --ep-row: 40px;
  --ep-gap: 10px;
  max-height: calc(7 * var(--ep-row) + 6 * var(--ep-gap));
}

@media (max-width: 767px) {
  .lb-detail-main .lb-playlist-episodes-wrap {
    --ep-row: 30px;
  }
}

/* ===== 分集剧情：只列前 3 集摘要，整条可点（强制1.2/9.3） ===== */
.lb-ep-plot-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lb-ep-plot-link {
  display: block;
  padding: 14px 20px;
  border-radius: var(--radius);
  background: var(--bg-white);
  color: var(--text-light);
  font-size: 14px;
  line-height: 1.6;
  transition: color 0.15s, box-shadow 0.15s;
}

.lb-ep-plot-link:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.lb-ep-plot-link:hover .lb-ep-plot-ep {
  color: var(--accent-tab);
}

.lb-ep-plot-ep {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-weight: 700;
}

.lb-ep-plot-desc {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ===== 关联系列：收起时只显示第一行（vod_detail.js 标记 .lb-rel-hidden，不用 overflow 裁切） ===== */
.lb-rel-series-grid > .lb-rel-hidden {
  display: none;
}

/* ===== 角色信息（选集下方的整行面板）：按宽度自动分多列、纵向排下去，头像＋姓名＋身份；超出 300px 高度在框内用滚轮上下滑，
   不锁滚轮（不设 overscroll-behavior），滚到底会接回整页 ===== */
.lb-cast-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0 16px;
  align-content: start;
  max-height: 300px;
  margin: 0 0 0 -8px;
  padding: 0 4px 0 0;
  overflow-y: auto;
  scrollbar-color: var(--border-mid) transparent;
  scrollbar-width: thin;
  list-style: none;
}

.lb-cast-list::-webkit-scrollbar {
  width: 5px;
}

.lb-cast-list::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: var(--border-mid);
}

.lb-cast-item {
  min-width: 0;
}

/* 左右各留 8px 给悬停底色，列表整体左移 8px 抵销，头像仍与面板标题对齐 */
.lb-cast-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}

.lb-cast-avatar {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--accent-light);
  transition: background 0.15s;
}

.lb-cast-avatar img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-cast-initial {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  transition: color 0.15s;
}

.lb-cast-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lb-cast-name {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.2s;
}

.lb-cast-role {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}

/* 悬停：整格淡蓝底，头像变主题蓝实心、首字变白，姓名转蓝（需求方 2026-10-17 在三案中选定） */
.lb-cast-link:hover {
  background: var(--accent-light);
}

.lb-cast-link:hover .lb-cast-avatar {
  background: var(--accent);
}

.lb-cast-link:hover .lb-cast-initial {
  color: #fff;
}

.lb-cast-link:hover .lb-cast-name {
  color: var(--accent-tab);
}

@media (max-width: 767px) {
  /* 只限详情页：用页面容器限定，不重写共用的白面板类 */
  .lb-detail-main .lb-vd-panel {
    padding: 16px 15px;
  }

  .lb-ep-plot-link {
    padding: 12px 15px;
  }

  .lb-cast-avatar {
    width: 32px;
    height: 32px;
  }
}