/* ============================================================
   姚见未来 · 文章详情页正文排版修复
   适用：/geoyouhua/、/zhishiku/ 等文章详情页
   用法：把本文件内容【追加】到 /static/default/css/index.css 末尾即可，
   或新建 css 文件在详情页模板 head 中引入（放 index.css 之后）。
   原理：CMS 输出的正文没有 .article-section 包裹，h2/h3/table 直接落在
   .article-main 下，原 .article-section 系规则全部落空，导致 h2 巨大、
   表格无边框。以下规则全部锚定 .article-main，无需改模板。
   ============================================================ */

/* ---------- 1. 标题体系 ---------- */
.article-main h2 {
    font-size: 1.45rem;            /* 原 32px 过大 → 23.2px */
    font-weight: 800;
    color: var(--text, #232a4d);
    margin: 46px 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--bg-3, #f0f1f7);
    line-height: 1.5;
    letter-spacing: -.01em;
}
.article-main > h2:first-child { margin-top: 0; }
.article-main h3 {
    font-size: 1.15rem;            /* 原 28px 过大 → 18.4px */
    font-weight: 700;
    color: var(--text, #232a4d);
    margin: 30px 0 12px;
    line-height: 1.55;
}
.article-main h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text, #232a4d);
    margin: 22px 0 10px;
}

/* ---------- 2. 段落与列表 ---------- */
.article-main p {
    color: var(--text-2, #4a5278);
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.9;
}
.article-main ul, .article-main ol {
    padding-left: 26px;
    margin: 0 0 20px;
}
.article-main li {
    color: var(--text-2, #4a5278);
    margin-bottom: 10px;
    font-size: 17px;
    line-height: 1.8;
}
.article-main li strong, .article-main p strong { color: var(--text, #232a4d); }
.article-main strong { color: var(--text, #232a4d); }

/* ---------- 3. 表格（CMS 裸 table，无 class） ---------- */
.article-main table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0 28px;
    font-size: 15px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(20, 30, 80, .06);
}
.article-main table th {
    background: linear-gradient(135deg, #eef0ff, #f7f7ff);
    padding: 13px 16px;
    text-align: left;
    font-weight: 700;
    color: var(--text, #232a4d);
    border: 1px solid var(--border, #e4e6f0);
    font-size: 15px;
    white-space: nowrap;
}
.article-main table td {
    padding: 12px 16px;
    border: 1px solid var(--border, #e4e6f0);
    color: var(--text-2, #4a5278);
    line-height: 1.75;
    vertical-align: top;
}
.article-main table tr:nth-child(even) td { background: #fafbfc; }
.article-main table tr:hover td { background: #f4f5ff; }
/* 编辑器输出的行内 border-width 强制统一 */
.article-main table td[style*="border-width"],
.article-main table th[style*="border-width"] {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--border, #e4e6f0) !important;
}

/* ---------- 4. 引用 ---------- */
（正文图片不加任何装饰/交互特效。仅保留 .article-main img { max-width:100%; height:auto } 防溢出，
  这是纯布局保护——后台大图不加会撑破页面，实测 1920px 图把正文撑到 2400px+；不是特效样式）
.article-main blockquote {
    margin: 22px 0;
    padding: 16px 20px;
    border-left: 4px solid var(--primary, #5b63f6);
    background: var(--bg-3, #f0f1f7);
    border-radius: 0 12px 12px 0;
    color: var(--text-2, #4a5278);
    font-size: 16px;
    line-height: 1.8;
}
.article-main hr { border: none; border-top: 1px solid var(--border, #e4e6f0); margin: 30px 0; }

/* ---------- 5. 底部相关推荐图片兜底（模板缩略图 404 时占位） ---------- */
.related-thumb {
    width: 96px;
    height: 72px !important;    /* !important：防止 flex 容器 stretch 把图拉高（实测曾拉到 199px） */
    object-fit: cover;
    border-radius: 8px;
    flex: none;
    align-self: flex-start;
    background: linear-gradient(135deg, #eef0ff, #f7f7ff);
}
.related-thumb[src=""], .related-thumb:not([src]) { display: none; }

/* ---------- 6. 移动端表格横向滚动 ---------- */
@media (max-width: 768px) {
    /* 关键：防止 nowrap 表格把 grid 列撑破（否则目录侧栏会被一起撑宽溢出） */
    .article-layout, .article-layout > *,
    .article-main, .article-main > *, .toc-sidebar, .toc-card { min-width: 0; }
    .article-main table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        box-shadow: none;
        border: 1px solid var(--border, #e4e6f0);
        border-radius: 10px;
    }
    .article-main h2 { font-size: 1.3rem; margin: 36px 0 16px; }
}

/* ---------- 7. 正文图片防溢出（必需，纯布局保护，无任何特效） ---------- */
.article-main img { max-width: 100%; height: auto; }

/* ---------- 8. 正文图片点击放大（灯箱）---------- */
.kb-lightbox { position: fixed; inset: 0; z-index: 10000;
            background: rgba(10, 14, 30, .88);
            display: flex; align-items: center; justify-content: center;
            padding: 24px; cursor: zoom-out; }
.kb-lightbox-wrap { max-width: 94vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; }
.kb-lightbox img { max-width: 94vw; max-height: 88vh; object-fit: contain;
            border-radius: 8px; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.kb-lightbox-close { position: absolute; top: 18px; right: 24px; width: 42px; height: 42px;
            border-radius: 50%; border: none; cursor: pointer;
            background: rgba(255,255,255,.14); color: #fff; font-size: 28px; line-height: 1;
            display: flex; align-items: center; justify-content: center;
            transition: background .2s; }
.kb-lightbox-close:hover { background: rgba(255,255,255,.3); }
@media (max-width: 768px) {
    .kb-lightbox img { max-width: 96vw; max-height: 84vh; }
}

/* ---------- 9. 上一篇/下一篇 空状态样式 ---------- */
.post-nav-item.is-empty { opacity: .55; cursor: default; }
.post-nav-item.is-empty:hover { background: var(--bg-3, #f0f1f7); transform: none; box-shadow: none; }

/* ---------- 10. CMS 服务端目录（toc-cms）---------- */
/* 正文标题本身带"一、二、…"序号时，去掉 li::before 的自动序号避免重复 */
.toc-list.toc-cms li::before { content: none; }
.toc-cms li { display: block; }
.toc-cms li a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--text-2, #4a5278);
            font-size: .92rem; line-height: 1.6; border-left: 3px solid transparent;
            transition: all .15s; }
.toc-cms li a:hover { color: var(--primary, #5b63f6); background: var(--bg-3, #f0f1f7); }
.toc-cms li a.active { color: var(--primary, #5b63f6); font-weight: 700; border-left-color: var(--primary, #5b63f6); }
.toc-empty { font-size: .9rem; color: var(--text-3, #8b92b0); padding: 8px 0; }
/* 锚点跳转时避开吸顶导航 */
.article-main h2[id], .article-main h3[id] { scroll-margin-top: 90px; }

/* ---------- 11. 返回顶部按钮 ---------- */
.back-top { position: fixed; right: 28px; bottom: 40px; z-index: 9999;
            width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
            background: linear-gradient(135deg, #5b63f6, #a78bfa); color: #fff; font-size: 1.2rem;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; visibility: hidden; transform: translateY(12px);
            transition: all .25s; box-shadow: 0 8px 24px rgba(91,99,246,.35); }
.back-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-top:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(91,99,246,.5); }
@media (max-width: 768px) {
    .back-top { right: 16px; bottom: 24px; width: 42px; height: 42px; font-size: 1.05rem; }
}

/* ---------- 12. 目录吸顶避开吸顶标题条 ---------- */
/* 吸顶标题条占 top 77~137px，目录原 top:90px 会被盖住"文章目录"标题 */
.toc-sidebar { top: 150px; }
/* 锚点跳转位置同步下移，避免跳过去被吸顶条挡住 */
.article-main h2[id], .article-main h3[id] { scroll-margin-top: 160px; }

/* ---------- 13. 目录过长：限高 + 目录区独立滚动 ---------- */
/* 目录条目多时不再撑满整页：列表在"视口高 - 导航/吸顶条/标题/留白"内自行滚动 */
.toc-sidebar .toc-list {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    padding-right: 6px;
}
/* 细滚动条美化 */
.toc-sidebar .toc-list::-webkit-scrollbar { width: 4px; }
.toc-sidebar .toc-list::-webkit-scrollbar-thumb { background: #c9cdf0; border-radius: 4px; }
.toc-sidebar .toc-list::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 991px) {
    .toc-sidebar .toc-list { max-height: 320px; }
}

/* ---------- 14. 目录阅读进度 ---------- */
.toc-card { position: relative; }
/* 目录卡顶部 3px 阅读进度条 */
.toc-progress {
    position: absolute; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, #5b63f6, #a78bfa);
    border-radius: 3px 0 0 3px; z-index: 2; pointer-events: none;
    transition: width .08s linear;
}