/* ═══════════════════════════════════════════════════════════════════
   nav-detail.css — LbtvNav 导航详情页专属样式(R114)
   ───────────────────────────────────────────────────────────────────
   · 独立小文件,由 LbtvNav_Detail 以 themeAsset() 带 mtime 版本号引入,
     浏览器强缓存 —— 200 张详情页只传输一次,不打进 theme.min.css
     (全站无需为详情页背这几 KB),也不参与 build.sh。
   · 明暗双模式:变量两套定义,html.dark 生效(与主题同一套 dark cookie,
     默认深色;详情页 head 内三行脚本按 cookie 即时切换,无主题闪)。
   · 品牌变量与主题 _variables.css 对齐:--brand 亮 #EE7700 / 暗 #FF8A1A;
     --text-2 供主题内联 SVG logo(inc/logo-inline.php)取用,logo 免改自适配。
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --brand:   #EE7700;
    --text-2:  #737378;
    --nd-bg:   #f7f7f8;
    --nd-card: #ffffff;
    --nd-text: #222222;
    --nd-line: #e5e5e8;
    --nd-notice-fg: #b58100;
    --nd-notice-bg: #fff8ec;
    --nd-notice-bd: #ffe6b3;
}
html.dark {
    --brand:   #FF8A1A;
    --text-2:  #9a9aa2;
    --nd-bg:   #141416;
    --nd-card: #1e1e21;
    --nd-text: #e8e8ea;
    --nd-line: #2a2a2e;
    --nd-notice-fg: #e0aa45;
    --nd-notice-bg: #241d0e;
    --nd-notice-bd: #4a3a17;
}

* { box-sizing: border-box; }
/* R116.1 横向溢出防线:任何不可断行的长内容(长 URL、连续横线/字符串)
   都不得把页面横向撑开 —— 生产实测简介内长串连字符曾撑爆移动端视口。 */
html, body { overflow-x: hidden; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--nd-text);
    background: var(--nd-bg);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}
.nd-wrap { max-width: 820px; margin: 0 auto; padding: 0 16px 60px; }

/* ── 顶部条(不吸顶:详情页正文一两屏,吸顶零收益反引 iOS 边角)────────── */
.nd-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 0;
    border-bottom: 1px solid var(--nd-line);
    margin-bottom: 12px;
}
.nd-topbar-logo { display: inline-flex; align-items: center; text-decoration: none; }
.nd-topbar-logo .lbtv-logo-svg { height: 30px; width: auto; display: block; }
.nd-topbar-logo-text { color: var(--brand); font-weight: 800; font-size: 18px; }
.nd-topbar-links a {
    color: var(--nd-text); text-decoration: none;
    margin-left: 16px; font-size: 14px; font-weight: 600;
}
.nd-topbar-links a:hover { color: var(--brand); }
.nd-vh { /* 视觉隐藏(读屏/SEO 可见的站名) */
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── 面包屑 ── */
.nd-crumb { font-size: 13px; color: var(--text-2); margin: 8px 0 20px; }
.nd-crumb a { color: var(--text-2); text-decoration: none; }
.nd-crumb a:hover { color: var(--brand); }

/* ── 头部 ── */
.nd-head { text-align: center; margin-bottom: 20px; }
.nd-ico { border-radius: 14px; object-fit: cover; margin-bottom: 10px; }
.nd-title { font-size: 24px; margin: 6px 0; overflow-wrap: anywhere; }
.nd-excerpt { color: var(--text-2); margin: 4px 0; overflow-wrap: anywhere; }

/* ── 跳转按钮 ── */
.nd-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 18px 0; }
.nd-btn {
    display: inline-block; padding: 11px 26px; border-radius: 24px;
    background: var(--nd-card); border: 1px solid var(--nd-line);
    color: var(--nd-text); text-decoration: none; font-weight: 600;
    transition: .15s;
}
.nd-btn:hover { border-color: var(--brand); color: var(--brand); }
.nd-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.nd-btn-primary:hover { filter: brightness(.92); color: #fff; }

.nd-notice {
    text-align: center; font-size: 12px;
    color: var(--nd-notice-fg); background: var(--nd-notice-bg);
    border: 1px solid var(--nd-notice-bd);
    padding: 8px 12px; border-radius: 8px; margin: 12px auto; max-width: 420px;
}

/* ── 独特简介 ── */
.nd-intro {
    background: var(--nd-card); border: 1px solid var(--nd-line);
    border-radius: 12px; padding: 20px 22px; margin: 20px 0;
    overflow-wrap: anywhere;   /* R116.1:长 URL / 连续符号强制可断行 */
}
.nd-intro img { max-width: 100%; height: auto; }   /* R116.1:未来简介含图也不破版 */
.nd-intro h2 { font-size: 18px; margin: 16px 0 8px; }
.nd-intro h3 { font-size: 16px; }
.nd-intro p  { margin: 10px 0; }
.nd-intro ul { padding-left: 22px; }
.nd-intro a  { color: var(--brand); }

/* ── 区块头(相关内容 / 同类推荐)── */
.nd-agg, .nd-reco { margin: 26px 0; }
.nd-sec-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 12px;
    flex-wrap: wrap;           /* R116.1:窄屏时「查看全部」自动换行,不与标题互挤溢出 */
}
.nd-sec-head h2 { min-width: 0; }
.nd-sec-head h2 {
    font-size: 18px; border-left: 4px solid var(--brand);
    padding-left: 10px; margin: 0;
}
.nd-agg-more { font-size: 13px; color: var(--brand); text-decoration: none; white-space: nowrap; }
.nd-agg-more:hover { text-decoration: underline; }

/* ── 聚合文章列表 ── */
.nd-agg-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
/* R116.2 真因修复:grid/flex 子项默认 min-width:auto,不允许收缩到内容宽度以下 ——
   nowrap 的长文章标题会把整条轨道撑得比视口宽,ellipsis 永远不触发(移动端右侧溢出
   的元凶)。min-width:0 解除收缩禁令后,下面的 overflow+ellipsis 才真正生效。
   导航页 R113 的 .lbtvnav-card-body 早已同款防御,此处为详情页补齐同一纪律。 */
.nd-agg-list li { min-width: 0; }
.nd-agg-list li a {
    display: block; max-width: 100%; padding: 9px 12px;
    background: var(--nd-card); border: 1px solid var(--nd-line); border-radius: 8px;
    color: var(--nd-text); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nd-agg-list li a:hover { color: var(--brand); border-color: var(--brand); }

/* ── 同板块推荐 ── */
.nd-reco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.nd-reco-card {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    background: var(--nd-card); border: 1px solid var(--nd-line); border-radius: 10px;
    color: var(--nd-text); text-decoration: none;
    min-width: 0;              /* R116.2:作为 grid 子项允许收缩 */
}
.nd-reco-card:hover { border-color: var(--brand); }
.nd-reco-card img { border-radius: 8px; object-fit: cover; }
.nd-reco-card span { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }   /* R116.2:flex 子项同款 */

/* ── 返回 ── */
.nd-back { margin-top: 30px; text-align: center; }
.nd-back a { color: var(--text-2); text-decoration: none; }
.nd-back a:hover { color: var(--brand); }

@media (max-width: 520px) {
    .nd-title { font-size: 20px; }
    .nd-wrap  { padding: 0 12px 40px; }
    .nd-topbar-links a { margin-left: 12px; }
}