/* ==========================================================================
   影视详情页（vod/detail）＋ widget/detail_hero（下载页共用）
   视觉（参考站详情页）：版心内一块 #333 面板——左海报（圆角 5、左上金色豆瓣分角标）、
   中间片名 18 ＋「标签：值」资料列（标签 #666、值金色、14/26）＋简介 3 行 ＋ 金底黑字「立即播放」与 #444 方钮；
   右侧评分（参考站这里是 APP 二维码，不做，改放评分＋打分）。
   下方左 75% 主栏（剧情／播放列表／分集／关联／猜你喜欢／推荐／评论，各一块面板）＋右 25% 侧栏（同类热播＋专题）。
   共用块（播放列表／评论／分享／侧栏专题／面包屑）在 main.css，这里不再写一份（强制11.9）。
   ========================================================================== */

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

/* 主栏、侧栏里的每一块都是面板（.section／.detail-section 在 main.css 已是面板；这里补剧情 tab、播放列表、侧栏榜单） */
.detail-panel,
.detail-bottom-main > .playlist-section,
.detail-sidebar .rank-col {
    margin: 0 0 var(--section-gap);
    padding: var(--panel-pad);
    border-radius: var(--radius);
    background: var(--bg-panel);
}
/* 主栏里的「关联系列／猜你喜欢／相关推荐」沿用 .section 标记（已是面板），宽度跟主栏走 */
.detail-bottom-main .section { width: 100%; max-width: none; }

/* ---------- Hero（基础资讯模块） ---------- */
.detail-hero-wrap {
    position: relative;
    margin-bottom: var(--section-gap);
    padding: var(--panel-pad);
    border-radius: var(--radius);
    background: var(--bg-panel);
}
/* 详情页与下载页：hero 直接放在 <main> 下，横跨整个视窗宽、贴着顶栏（2026-11-09 使用者要求，原本是版心宽的 #333 面板）。
   宽度用父层 100%（不用 100vw）；左右 padding＝--hero-gutter（main.css :root），资料内容仍对齐版心与底下面板的文字。
   底色：.detail-hero-bg 是同一张海报 cover＋模糊压暗（isolation 让它 z -1 只垫在本区块里），::after 再压一层、底部渐层回页底色接到下方面板 */
.page-content > .detail-hero-wrap {
    width: 100%;
    max-width: none;
    margin: 0 0 var(--section-gap);
    padding: var(--section-gap) var(--hero-gutter);
    border-radius: 0;
    background: var(--bg-base);
    isolation: isolate;
    overflow: hidden;
}
.detail-hero-bg {
    position: absolute;
    inset: -60px;
    z-index: -1;
    background-color: var(--bg-elevated);
    background-repeat: no-repeat;
    background-position: center 30%;
    background-size: cover;
    filter: blur(24px) brightness(0.55) saturate(1.25);   /* .4 太暗两侧像没拉满、.62 太亮灰字看不清（2026-11-09 使用者两次回报），取中间 */
    pointer-events: none;
}
.page-content > .detail-hero-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.38) 75%, var(--bg-base) 100%);
}
/* 底色换成海报之后，原本给 #333 面板用的灰（#666 标签、#555 空星、#888 面包屑）会跟亮的海报色混在一起看不清（2026-11-09 使用者回报）：
   这一区一律改成半透明白（main.css :root 的 --on-img-*），跟着底色深浅走；资料文字加一层淡阴影。 */
.page-content > .detail-hero-wrap .dmg-label,
.page-content > .detail-hero-wrap .detail-title-en,
.page-content > .detail-hero-wrap .rate-tip,
.page-content > .detail-hero-wrap .detail-rate-num--none { color: var(--on-img-dim); }
.page-content > .detail-hero-wrap .art-breadcrumb,
.page-content > .detail-hero-wrap .art-breadcrumb a,
.page-content > .detail-hero-wrap .bc-sep { color: var(--on-img-soft); }
.page-content > .detail-hero-wrap .art-breadcrumb a:hover { color: var(--active); }
.page-content > .detail-hero-wrap .detail-stars,
.page-content > .detail-hero-wrap .rs { color: var(--on-img-faint); }
.page-content > .detail-hero-wrap .rs.rs-on { color: var(--accent); }
.page-content > .detail-hero-wrap .detail-rate,
.page-content > .detail-hero-wrap .detail-rate-vote { border-color: var(--on-img-line); }
.page-content > .detail-hero-wrap .detail-title,
.page-content > .detail-hero-wrap .dmg-list,
.page-content > .detail-hero-wrap .detail-intro-text,
.page-content > .detail-hero-wrap .detail-rate { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }

.detail-bc-wrap { margin-bottom: 15px; }

.detail-top { width: 100%; }
/* 海报 | 资料 | 评分 */
.detail-flex-left { display: flex; align-items: flex-start; gap: 20px; }

/* 海报：参考站 140×210（2:3）、圆角 5；资料比参考站多，放大到 180 宽才跟资料列等高 */
.detail-poster {
    position: relative;
    flex: 0 0 180px;
    width: 180px;
    aspect-ratio: 2 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-elevated) 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: 18px 8px 5px;
    font-size: 12px;
    line-height: 16px;
    color: #fff;
    text-align: center;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* 片名：参考站 16、金色；h1 放大到 18 */
.detail-title-row { margin-bottom: 8px; }
.detail-title {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;   /* 不含空格的长英文片名不换行会把手机版撑宽（2026-10-14 极端资料稽核） */
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: var(--text-title);
}
.detail-title a { color: inherit; }
.detail-title-en { margin: -6px 0 8px; font-size: 12px; color: var(--text-dim); }

/* 资料列：参考站「主演：值」——标签 #666、值金色、14/26；短栏位一行三个、长栏位整行 */
.dmg-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; margin: 0; padding: 0; list-style: none; }
.dmg-row {
    min-width: 0;
    font-size: 14px;
    line-height: 26px;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dmg-row--full { grid-column: 1 / -1; }
.dmg-label { margin-right: 2px; font-weight: 400; color: var(--text-dim); }
.dmg-label::after { content: "："; }
.dmg-val a { color: var(--text-1); }
.dmg-val a + a { margin-left: 8px; }
.dmg-val a:hover { color: var(--active); }
.dm-tagchip { color: var(--text-1); }
.dmg-val .dm-tagchip + .dm-tagchip { margin-left: 8px; }
/* 状态：连载橙、完结金 */
.dmg-state.dmg-state--end { color: var(--text-1); }
.dmg-state.dmg-state--ongoing { color: var(--active); }

/* 长栏位放不下就换行，不做单行省略（tp29 定案沿用） */
.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-val .dmg-name + .dmg-name { margin-left: 8px; }
/* 主演：最多 2 行，超过以「…」收尾（§17.33：标签与内容同在裁切容器内） */
.dmg-row.dmg-row--clamp2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 简介：参考站「简介：」接正文、14/22、3 行 */
.detail-intro-text {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--text-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 按钮：参考站金底黑字「立即播放」100×36、圆角 3；其余 #444 方钮（图示＋金字） */
.detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.detail-btn,
.detail-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--radius-btn);
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.detail-btn .mac-icon,
.detail-link .mac-icon { font-size: 16px; }
.detail-btn--play { background: var(--btn-play); color: var(--on-accent); }
.detail-btn--play:hover { background: var(--accent-hover); color: var(--on-accent); }
.detail-link { background: var(--bg-card); color: var(--text-1); }
.detail-link:hover { color: var(--active); }

/* 右侧评分（放在参考站二维码的位置）：左缘一条 #444 分隔线；豆瓣分大字金、小星星；下段五颗星打分 */
.detail-rate {
    flex: 0 0 220px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 0 20px;
    border-left: 1px solid var(--border);
}
.detail-rate-top { display: flex; align-items: center; gap: 12px; }
.detail-rate-num { font-size: 32px; font-weight: 400; line-height: 32px; color: var(--accent); }
.detail-rate-num--none { font-size: 20px; color: var(--text-dim); }
.detail-rate-meta { display: flex; flex-direction: column; gap: 2px; }
.detail-rate-label { font-size: 14px; font-weight: 400; color: var(--text-1); }
/* 小星星：底层灰 5 颗、上层金色按比例裁切（§17.20：前景只设 top/left＋width） */
.detail-stars { position: relative; display: inline-block; font-size: 12px; line-height: 1; letter-spacing: 1px; color: #555; white-space: nowrap; }
.detail-stars-fg { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--accent); }
.detail-rate-vote { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); text-align: center; }
.rate-stars { display: flex; justify-content: center; gap: 6px; }
/* 打分星星是 <button>（甲方强制 2.6：纯动作用 button，可用键盘 Tab／Enter 打分，2026-11-11），先把按钮外观归零 */
.rs { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: 28px; line-height: 1; color: #555; cursor: pointer; transition: color 0.15s; }
.rs:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.rs.rs-on { color: var(--accent); }
.rate-tip { margin: 8px 0 0; font-size: 12px; color: var(--text-dim); }

/* ---------- 剧情介绍／角色介绍：参考站「播放列表 / 剧情简介」文字 tab 16，选中橙字（没有底线） ---------- */
.detail-tabs {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 15px;
}
.dtab {
    padding: 0;
    border: 0;
    background: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--text-1);
    cursor: pointer;
    transition: color 0.2s;
}
.dtab:hover,
.dtab.is-active { color: var(--active); }

.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(--active); }


/* ---------- 分集剧情 ---------- */
.plot-list { margin: 0; padding: 0; }
.plot-item {
    display: flex;              /* §17.17：截断文字与尾端连结拆成两个 flex 子项 */
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-row);
    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(--active); }

/* ---------- 关联系列（收起只显 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: 42px;
    border: 0;
    border-radius: var(--radius-btn);
    background: var(--btn-grad);
    color: var(--btn-text);
    font-size: 14px;
    cursor: pointer;
}
.rel-toggle:hover { color: var(--active); }
.rel-toggle[hidden] { display: none; }
.detail-section > .rel-toggle { display: flex; }
.detail-section > .rel-toggle[hidden] { display: none; }

/* ---------- 侧栏：同类热播（rank_col_home）＋专题 ---------- */
.side-rank { margin: 0; padding: 0; list-style: none; }
.dmg-group { flex-shrink: 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 1199px) {
    .detail-poster { flex-basis: 160px; width: 160px; }
    .detail-rate { flex-basis: 180px; }
    .dmg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
    /* §17.35：侧栏隐藏后主栏只剩一个子项，容器改 block，不要留 flex-direction:column */
    .detail-bottom-layout { display: block; }
    .detail-sidebar { display: none; }
    /* 评分换到下一行、收成一条横条：左分数、右打分 */
    .detail-flex-left { flex-wrap: wrap; }
    .detail-rate { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--border); }
    .detail-rate-vote { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; }
    /* 星星改成 <button> 后要过手机点击范围 32：间距 8、每颗用透明 ::after 往外撑 4 → 32×32，相邻两颗刚好不重叠（2026-11-11） */
    .rate-stars { gap: 8px; }
    .rs { font-size: 24px; position: relative; }
    .rs::after { content: ""; position: absolute; inset: -4px; }
    .rate-tip { margin: 0; }
}

/* 手机：海报铺满版（使用者 2026-11-06 要求做成 tp49 那种；详情页与下载页同一份 widget 一起变）。
   海报铺满面板宽、3:4，下半部渐层回到面板色 #333，片名／英文名／「年份 · 地区 · 类型」压在渐层上；备注改成左上小标签。
   资料一项不少，只换位置：面包屑 → 海报（片名压在上面）→ 按钮 → 资料列 → 简介 → 评分横条。
   做法同 tp49：.detail-top／.detail-flex-left／.detail-info／.detail-title-row 用 display:contents 摊平，整块交给 .detail-hero-wrap 的 grid 排；
   海报跨第 2–6 行，片名第 3 行、英文名第 4 行、年份行第 5 行，第 6 行留 14px 当到海报底的距离 */
.detail-meta-m { display: none; }
@media (max-width: 767px) {
    .page-content > .detail-hero-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto auto auto 14px auto auto auto auto;
        padding: 12px var(--hero-gutter) var(--section-gap);
    }
    .detail-hero-wrap .detail-top,
    .detail-hero-wrap .detail-flex-left,
    .detail-hero-wrap .detail-info,
    .detail-hero-wrap .detail-title-row { display: contents; }
    /* 全部明讲第 1 栏：片名要跟海报叠在同一格，不讲的话自动排版会避开海报、另开一栏 */
    .detail-hero-wrap .detail-bc-wrap, .detail-hero-wrap .detail-poster, .detail-hero-wrap .detail-title,
    .detail-hero-wrap .detail-title-en, .detail-hero-wrap .detail-meta-m, .detail-hero-wrap .detail-actions,
    .detail-hero-wrap .dmg-list, .detail-hero-wrap .detail-intro-text, .detail-hero-wrap .detail-rate { grid-column: 1; }
    .detail-hero-wrap .detail-bc-wrap { grid-row: 1; margin-bottom: 10px; }
    .detail-hero-wrap .detail-poster {
        grid-row: 2 / 7;
        z-index: 0;
        width: auto;
        flex: none;
        /* 不用 aspect-ratio：grid 里有 aspect-ratio 的项目会反过来从行高推宽度，铺不满（tp49 实测）。
           直接给高度＝铺满后的宽（视窗宽 − 两侧版心留白）× 4/3 */
        aspect-ratio: auto;
        height: min(calc(100vw * 4 / 3), 540px);   /* 手机没有捲轴，100vw＝区块宽 */
        margin: 0 calc(-1 * var(--hero-gutter));
        border-radius: 0;
        /* 底边淡出到后面的模糊海报底色（同一张图），不要一条硬边 */
        -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
    }
    .detail-hero-wrap .detail-poster::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 35%, rgba(0, 0, 0, 0.6) 98%);   /* 撑住压在下缘的片名 */
    }
    .detail-hero-wrap .poster-tag {
        z-index: 1;
        top: 10px;
        right: auto;
        bottom: auto;
        left: var(--hero-gutter);
        max-width: calc(100% - 20px);
        padding: 0 8px;
        border-radius: var(--radius-sm);
        background: var(--accent);
        color: var(--on-accent);
        font-size: 12px;
        line-height: 22px;
    }
    /* 压在海报左下角：片名 → 英文名 → 年份 · 地区 · 类型 */
    .detail-hero-wrap .detail-title { grid-row: 3; font-size: 22px; line-height: 1.3; }
    .detail-hero-wrap .detail-title-en { grid-row: 4; margin: 4px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.7); }
    .detail-hero-wrap .detail-meta-m { grid-row: 5; display: block; margin: 6px 0 0; font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, 0.85); }
    .detail-hero-wrap .detail-title,
    .detail-hero-wrap .detail-title-en,
    .detail-hero-wrap .detail-meta-m { position: relative; z-index: 2; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75); }
    /* 按钮：「立即播放」撑满＋只剩图示的方钮（字视觉隐藏、仍给读屏），点击范围 40 */
    .detail-hero-wrap .detail-actions { grid-row: 7; flex-wrap: nowrap; gap: 8px; margin-top: 12px; }
    .detail-hero-wrap .detail-btn { flex: 1; min-width: 0; height: 40px; padding: 0 16px; font-size: 14px; }
    .detail-hero-wrap .detail-link { flex-shrink: 0; width: 40px; height: 40px; padding: 0; }
    .detail-hero-wrap .detail-link .mac-icon { font-size: 18px; }
    .detail-hero-wrap .detail-link-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .detail-hero-wrap .dmg-list { grid-row: 8; margin-top: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
    .dmg-row { font-size: 13px; line-height: 22px; }
    /* 上映「2026-07-28(中国大陆)」半宽放不下：手机独占一整行（半宽会从「中国大陆」中间折开），仍可折行不吃省略号（§17.62） */
    .dmg-row { white-space: normal; overflow: visible; }
    .detail-hero-wrap .dmg-row--date { grid-column: 1 / -1; }
    .detail-hero-wrap .detail-intro-text { grid-row: 9; margin-top: 10px; font-size: 13px; line-height: 20px; -webkit-line-clamp: 2; }
    .detail-hero-wrap .detail-rate { grid-row: 10; margin-top: 12px; padding-top: 12px; }
    .detail-rate-num { font-size: 26px; line-height: 28px; }
    .detail-rate-top { gap: 10px; }
    .rate-tip { display: none; }
    .dtab { font-size: 15px; line-height: 32px; }   /* 点击范围至少 32 高（稽核门槛） */
    .detail-tabs { margin-bottom: 8px; }
}