/* ==========================================================================
   影视详情页（vod/detail）＋ widget/detail_hero（下载页共用）
   参考站 .myui-content：左 75% 主栏（面包屑 → 海报 220 ＋ 资讯 → 各区块）、右 25% 同类热播。
   共用块（播放列表／评论／分享／侧栏专题／面包屑）在 main.css，这里不再写一份（强制11.9）。
   ========================================================================== */

/* ---------- 两栏容器 ---------- */
.detail-bottom-layout {
    display: flex;
    align-items: flex-start;
    padding: 15px var(--page-pad) 0;
}
.detail-bottom-main { flex: 1 1 75%; min-width: 0; }
.detail-sidebar {
    flex: 0 0 25%;
    min-width: 0;
    padding-left: 25px;        /* .myui-sidebar { padding: 0 0 0 25px } */
}

/* ---------- Hero（基础资讯模块） ---------- */
.detail-hero-wrap {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--section-gap);
    padding: 15px;
    border-radius: var(--radius);
}
/* 详情页：hero 直接放在 <main> 下、横跨整页（下载页的 hero 在 .down-content 里，不吃这条） */
.page-content > .detail-hero-wrap {
    margin-bottom: 0;
    padding: 15px var(--page-pad) 20px;
    border-radius: 0;
}
.detail-hero-wrap > .detail-bc-wrap,
.detail-hero-wrap > .detail-top { position: relative; z-index: 2; }

/* 背景底图（做法同 tp26 .detail-hero-bg／.detail-hero-vignette）：
   剧照铺满整条，vignette 从左、从下淡回 --bg-base（左侧不再留纯底色，海报后面也看得到图）。
   白底配深色字，所以淡出比 tp26（深底白字）更早、更重：文字压在图上的那段约 70% 底色（2026-09-29 依使用者要求调淡）。 */
.detail-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;                 /* 使用者 2026-09-29：底图拉满整条资讯区（原本只铺右侧 70%） */
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    background: none;            /* 不吃全局 img 的 load.gif 占位：大图区域不该出现转圈 */
    z-index: 0;
    pointer-events: none;
}
.detail-hero-bg.is-nopic { display: none; }
.detail-hero-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--bg-base) 85%, transparent) 0%,
            color-mix(in srgb, var(--bg-base) 72%, transparent) 45%,
            color-mix(in srgb, var(--bg-base) 25%, transparent) 100%),
        linear-gradient(0deg, var(--bg-base) 0%, transparent 30%);
}
.detail-bc-wrap { margin-bottom: 15px; }

.detail-top { width: 100%; }
.detail-flex-left { display: flex; align-items: flex-start; gap: 20px; }

/* 海报：.myui-content__thumb .myui-vodlist__thumb { width: 220px } 2:3、圆角 5 */
.detail-poster {
    position: relative;
    flex: 0 0 220px;
    width: 220px;
    aspect-ratio: 2 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-thumb);
    background: var(--bg-card) url("../img/load.gif") no-repeat center/cover;
}
.detail-poster img { width: 100%; height: 100%; object-fit: cover; }
.poster-tag {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: right;
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-info { flex: 1; min-width: 0; }

/* 片名：.myui-content__detail .title { margin: 10px 0; 24px; 行高 30 } */
.detail-title-row { display: flex; align-items: center; gap: 10px; }
.detail-title {
    margin: 10px 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    color: var(--text-title);
}
.detail-title a { color: inherit; }
.detail-title-en { margin: -4px 0 10px; font-size: 12px; color: var(--text-3); }

.detail-score-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.score-num { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; line-height: 24px; color: var(--score-hi); }
.detail-stars { position: relative; display: inline-block; font-size: 16px; line-height: 1; letter-spacing: 2px; }
.detail-stars-bg { color: var(--border-2); }
/* §17.20：依比例填色的上层只能 top/left，不能用 inset:0 */
.detail-stars-fg { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--score-hi); }

/* 资讯行：.myui-content__detail .data { margin-bottom:10; 行高 20 }，标签 .text-muted */
.dmg-list { margin: 0; padding: 0; list-style: none; }
.dmg-row {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dmg-label { color: var(--text-2); }
.dmg-row:not(.dmg-row--line) > .dmg-label::after { content: "："; }
.dmg-val a { color: var(--text-1); }
.dmg-val a + a { margin-left: 8px; }
.dmg-val a:hover { color: var(--link-hover); }
.dmg-row--line { display: flex; flex-wrap: wrap; align-items: center; white-space: normal; }
.dmg-group { white-space: nowrap; }
.dmg-sep { display: inline-block; width: 1px; height: 14px; margin: 0 12px; overflow: hidden; color: transparent; background: var(--border); vertical-align: -2px; }
.dm-tagchip {
    display: inline-block;
    padding: 0 10px;
    border: 1px solid var(--border-2);   /* .myui-content__tag a */
    border-radius: 15px;
    font-size: 12px;
    line-height: 20px;
}
.dmg-val .dm-tagchip + .dm-tagchip { margin-left: 5px; }
.dmg-row--wrap .dm-tagchip { margin-top: 2px; margin-bottom: 2px; }   /* 换成多排时上下不贴在一起 */
.dmg-desc { color: var(--text-2); }

/* 资料行统一规则（使用者 2026-09-29 定案）：放不下就换行，不做单行省略——
   类型／又名／导演／编剧／主演／标签都是 .dmg-row--wrap；只有「简介」维持单行省略（下方剧情介绍有全文）。
   连结 inline-block＋nowrap：一个名字不从中间断开，换行只发生在名字之间
   （§17.62 的教训：只写 nowrap 会让相邻连结连成断不开的长字串、被推出画面）。 */
.dmg-row.dmg-row--wrap { white-space: normal; overflow: visible; text-overflow: clip; }
.dmg-row--wrap .dmg-val a,
.dmg-row--wrap .dmg-name { display: inline-block; white-space: nowrap; }
/* 编剧是纯文字（没有连结），每个名字包成 .dmg-name，间距与连结一致 */
.dmg-val .dmg-name + .dmg-name { margin-left: 8px; }
/* 主演例外：最多 2 行，超过以「…」收尾（二三十位主演全展开会把「立即播放」挤到很下面）。
   §17.33：标签「主演：」与内容同在裁切容器内，不会断成两行起头 */
.dmg-row.dmg-row--clamp2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* 按钮：.btn { padding: 8px 30px; 12px; 圆角 5 }；立即播放 .btn-warm，收藏 .btn-danger，其它 .btn-default */
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 36px;
    padding: 0 30px;
    border: 0;
    border-radius: var(--radius-btn);
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow 0.2s;
}
.detail-btn .mac-icon { font-size: 12px; }
.detail-btn:hover { box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1); }
.detail-btn--play { background: var(--accent-grad); color: #fff; }
.detail-btn--fav { background: var(--btn-danger); color: #fff; }
.detail-btn--play:hover,
.detail-btn--fav:hover { color: #fff; }
.detail-btn--sub { background: var(--btn-grad); color: var(--btn-text); }
.detail-btn--sub:hover { color: var(--btn-text); }

/* ---------- 剧情介绍／角色介绍／我要评分：做成参考站区块标题＋.nav-tabs ---------- */
.detail-tabs {
    display: flex;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border);
}
.dtab {
    padding: 10px 0;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: 16px;
    line-height: 30px;
    color: var(--text-1);
    cursor: pointer;
}
.dtab:first-child { font-size: 24px; }
.dtab:hover { color: var(--link-hover); }
.dtab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.dtab:first-child.is-active { color: var(--text-title); border-bottom-color: transparent; }
#tab-intro,
#tab-cast,
#tab-rate { margin-bottom: var(--section-gap); }

.detail-cast-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 20px; }
.cast-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; color: var(--text-1); }
.cast-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-card);
    color: var(--text-3);
    font-size: 36px;
}
.cast-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cast-name { max-width: 100%; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cast-role { font-size: 12px; color: var(--text-3); }
.cast-item:hover .cast-name { color: var(--link-hover); }

.rate-block { padding: 10px 0; }
.rate-label { margin-bottom: 10px; font-size: 14px; color: var(--text-2); }
.rate-stars { display: flex; gap: 5px; }
.rs { font-size: 24px; line-height: 1; color: var(--border-2); cursor: pointer; }
.rs.rs-on { color: var(--score-hi); }

/* ---------- 分集剧情 ---------- */
.plot-list { margin: 0; padding: 0; }
.plot-item {
    display: flex;              /* §17.17：截断文字与尾端连结拆成两个 flex 子项 */
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 14px;
}
.plot-item:last-child { border-bottom: 0; }
.plot-item-text { flex: 1; min-width: 0; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plot-ep { color: var(--text-1); }
.plot-link { flex-shrink: 0; font-size: 12px; color: var(--text-2); }
.plot-link:hover { color: var(--link-hover); }

/* ---------- 关联系列（收起只显 1 行 6 条） ---------- */
.detail-vod-grid.is-collapsed > li:nth-child(n+7) { display: none; }
.rel-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 15px auto 0;
    padding: 0 30px;
    height: 36px;
    border: 0;
    border-radius: var(--radius-btn);
    background: var(--btn-grad);
    color: var(--btn-text);
    font-size: 12px;
    cursor: pointer;
}
.rel-toggle[hidden] { display: none; }
.detail-section > .rel-toggle { display: flex; }
.detail-section > .rel-toggle[hidden] { display: none; }

/* ---------- 侧栏：同类热播（rank_col_home）＋专题 ---------- */
.detail-sidebar .rank-col-title { font-size: 24px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
    .detail-poster { flex-basis: 200px; width: 200px; }   /* .myui-content__thumb 200 */
}

@media (max-width: 1023px) {
    /* §17.35：侧栏隐藏后主栏只剩一个子项，容器改 block，不要留 flex-direction:column */
    .detail-bottom-layout { display: block; }
    .detail-sidebar { display: none; }
}

@media (max-width: 767px) {
    .detail-bottom-layout { padding-top: 10px; }
    /* 手机：剧照铺满，只从下往上淡（同 tp26 ≤1199 的 0deg 渐层） */
    .detail-hero-wrap { padding: 10px; }
    .page-content > .detail-hero-wrap { padding: 10px max(10px, var(--page-pad)) 15px; }
    .detail-hero-wrap .detail-hero-bg { object-position: center 15%; }
    .detail-hero-wrap .detail-hero-vignette {
        background: linear-gradient(0deg, var(--bg-base) 6%,
            color-mix(in srgb, var(--bg-base) 78%, transparent) 50%,
            color-mix(in srgb, var(--bg-base) 50%, transparent) 100%);   /* 手机字小、图铺满，压得比桌机重 */
    }
    .detail-flex-left { gap: 10px; }
    .detail-poster { flex-basis: 120px; width: 120px; }
    .detail-title { margin: 5px 0 8px; font-size: 18px; line-height: 24px; }
    .dmg-row { margin-bottom: 8px; font-size: 12px; line-height: 18px; }
    .dmg-row--full:has(.dmg-desc) { display: none; }   /* 简介在下方「剧情介绍」有完整版 */
    /* 参考站手机：按钮排满一行、等分 */
    .detail-actions { margin-top: 10px; gap: 8px; }
    .detail-btn { flex: 1; padding: 0 8px; }
    .detail-btn--play { flex-basis: 100%; }
    .dtab { font-size: 14px; }
    .dtab:first-child { font-size: 18px; }
    .detail-tabs { gap: 20px; }
}
.side-rank { margin: 0; padding: 0; list-style: none; }

/* 主栏里的「关联系列／猜你喜欢／相关推荐」沿用 .section 标记，但已在 .detail-bottom-layout 的边距内，不要再缩一次 */
.detail-bottom-main .section { max-width: none; padding: 0; }
.dmg-group { flex-shrink: 0; }