/* ============================================
   insights/article.css
   文章页面共享布局样式
   供 insights/ 目录下所有文章 HTML 引用
   依赖：../css/style.css（提供 CSS 变量和基础排版）
   配色与 index 首页深色主题一致：深墨绿底 #17201D + 米白文字 #F4F1EA
   ============================================ */

/* ====================
   深色主题变量覆盖 - 与 index.css / css/insight.css 取值对齐
   ==================== */
:root {
    --bg-color: #17201D;                        /* 页面背景：深墨绿（index --dark） */
    --bg-light: rgba(244, 241, 234, 0.10);      /* 三块背景容器共用此档（并列不嵌套，无叠加变深问题） */
    --card-pad-x: calc(clamp(1.25rem, 3vw, 3rem) + 8px);  /* 容器横向内边距：三块统一，与 css/insight.css 同值 */
    --text-color: rgba(244, 241, 234, 0.82);    /* 正文主文字：柔和米白，降低长文对比度 */
    --text-strong: rgba(244, 241, 234, 0.95);   /* 标题/强调：接近 index 正文标题的95%亮度 */
    --text-light: rgba(244, 241, 234, 0.62);    /* 次要文字：作者栏/引用说明同档亮度 */
    --text-hover: #FFFFFF;                      /* 悬停/选中文字 */
    --border-color: rgba(244, 241, 234, 0.16);  /* 分隔线（index --line-on-dark） */
    --line-strong: rgba(244, 241, 234, 0.28);   /* 导航栏下方贯通分隔线：提高一档确保可见 */
    /* 目录项状态背景：基于米白色的半透明分档，
       桌面侧栏与降级态横向目录共用同一套取值 */
    --toc-hover-bg: rgba(244, 241, 234, 0.06);         /* 悬停 */
    --toc-active-bg: rgba(244, 241, 234, 0.10);        /* 当前文章 */
    --toc-active-hover-bg: rgba(244, 241, 234, 0.16);  /* 当前文章上的悬停 */
}

/* ====================
   Topbar 深色背景适配
   topbar 默认即为深色背景白色系配色（logo 白色滤镜、导航文字 --text-on-image 系列）；
   这里将容器底色设为与页面背景一致的不透明色，底缘绘制贯通横向分隔线，
   并禁用 topbar.js 的滚动消隐：导航栏与分隔线始终固定在视口最上层，
   滚动时文章内容滑入容器下方被遮蔽（非叠加显示）
   ==================== */
.topbar-container {
    background: var(--bg-color);
    /* topbar.css 默认为 pointer-events:none 悬浮穿透，改为不透明遮蔽层后恢复自身点击 */
    pointer-events: auto;
}

.topbar-container--hidden {
    opacity: 1;
    visibility: visible;
}

.topbar-container::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 1px;
    background: var(--line-strong);
    pointer-events: none;
}

/* ====================
   文章目录侧边栏（article-toc.js 注入）
   桌面端：固定在左侧，位于 topbar 下方
   ==================== */
.article-toc {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 280px;
    z-index: 9000;
    overflow-y: auto;
    padding: 1.5rem 1rem 2rem;
    background: var(--bg-color);
}

.article-toc__header {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-light);
    letter-spacing: 2px;
    padding: 0 0.75rem 0.8rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
}

.article-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-toc__link {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    color: var(--text-color);
    font-size: 0.875rem;
    line-height: 1.5;
    text-decoration: none;
    transition: var(--transition);
}

.article-toc__link:hover {
    color: var(--text-hover);
    background: var(--toc-hover-bg);
}

.article-toc__num {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-light);
}

.article-toc__item--active .article-toc__link {
    color: var(--text-hover);
    background: var(--toc-active-bg);
    font-weight: var(--font-weight-medium);
}

/* 当前文章项再悬停时加深一档，避免悬停反馈被上一条规则同色吞掉 */
.article-toc__item--active .article-toc__link:hover {
    background: var(--toc-active-hover-bg);
}

.article-toc__item--active .article-toc__num {
    color: var(--text-hover);
}

/* 有目录侧边栏时：文章容器 = 视口宽度 - 目录固定宽度 - 两侧预留间隔，不与目录重叠 */
body.has-article-toc .article-content {
    max-width: calc(100vw - 280px - 8rem);
    margin: 2.5rem 4rem 3rem calc(280px + 4rem);
}

/* ====================
   文章容器（外层仅做宽度与位置约束，不再整体填充背景）
   内部由 js/article-blocks.js 拆为三块上下并列、同色独立背景容器：
   .article-head（标题+作者+文内目录）/ .article-main（正文各章节）/ .article-references（引用说明）
   ==================== */
.article-content {
    max-width: calc(100vw - 8rem);
    margin: 2.5rem auto 3rem;
    padding: 0;
    /* 为固定定位的 topbar 与横向分隔线留出顶部空间 */
    padding-top: calc(2.5rem + 61px);
}

.article-head,
.article-main,
.article-references {
    background: var(--bg-light);
    border-radius: 16px;
    padding: clamp(2rem, 4vw, 3rem) var(--card-pad-x);
}

/* 正文与引用说明各自成块，块间拉开固定间隔 */
.article-main,
.article-references {
    margin-top: 1.5rem;
}

/* 引用说明内容较短，纵向留白比正文卡片收一档 */
.article-references {
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* 卡片内首行元素重置顶部外边距，避免与容器内边距叠加 */
.article-content .article-head > :first-child,
.article-content .article-main > :first-child > h2:first-child,
.article-content .article-references > h2 {
    margin-top: 0;
}

/* ====================
   文章排版 - 基础
   ==================== */
.article-content h1 {
    font-size: 2.0rem;
    margin-bottom: 0.5rem;
    color: var(--text-strong);
}

.article-content h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.3rem;
    color: var(--text-strong);
}

.article-content p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.article-content ul,
.article-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.article-content li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

.article-content a {
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-content a:hover {
    color: var(--text-hover);
}

/* ====================
   文章元信息
   ==================== */
.article-content .meta {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

/* ====================
   文内章节目录（.article-toc-inline，各文章 HTML 内置于 header 之后、正文引言之前）
   与标题、作者同属 .article-head 一块背景，自身不再做内嵌面板填充，
   仅用一条分隔线与上方作者信息区分；
   锚点跳转靠下方 [id] 的 scroll-margin-top 避开固定 topbar；
   样式与 css/insight.css 的同名规则保持对齐（阅读页注入同一份文章结构）
   ==================== */
.article-content .article-toc-inline {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.article-content .article-toc-inline h2 {
    font-size: 0.95rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 2px;
    margin-top: 0;
    margin-bottom: 0.8rem;
    border-bottom: none;
    padding-bottom: 0;
    color: var(--text-light);
}

.article-content .article-toc-inline ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.article-content .article-toc-inline li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
}

.article-content .article-toc-inline li:last-child {
    margin-bottom: 0;
}

.article-content .article-toc-inline a {
    color: var(--text-color);
    text-decoration: none;
}

.article-content .article-toc-inline a:hover {
    color: var(--text-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 锚点定位避开固定 topbar（60px）与其底缘分隔线 */
.article-content [id] {
    scroll-margin-top: 76px;
}

/* ====================
   参考文献列表（已归入 .article-references 容器，自身不再二次填充）
   ==================== */
.article-content .reference-list {
    background: none;
    padding: 0;
    list-style-position: outside;
}

.article-content .reference-list li {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.6;
}

.article-content cite {
    font-style: italic;
}

/* ====================
   响应式 - 平板端 (768px-1023px)
   覆盖 style.css 的激进缩小，保持文章可读
   目录降级为顶部横向滚动条，加大目录/正文间隔使布局更松散
   ==================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .article-toc {
        position: static;
        width: auto;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 1.5rem var(--page-padding-mobile);
        margin-top: 60px;
    }

    .article-toc__header {
        display: none;
    }

    .article-toc__list {
        display: flex;
        overflow-x: auto;
        gap: 0.5rem;
        -webkit-overflow-scrolling: touch;
        /* 隐藏横向滑动条（下方那条细线提示），靠手势左右滑动切换 */
        scrollbar-width: none;        /* Firefox */
        -ms-overflow-style: none;     /* 旧版 Edge / IE */
    }

    .article-toc__list::-webkit-scrollbar {
        display: none;               /* Chrome / Safari */
        width: 0;
        height: 0;
    }

    .article-toc__item {
        position: relative;
        flex-shrink: 0;
    }

    /* 标题之间用竖向分割线分隔，取代原来的每个标题独立边框 */
    .article-toc__item + .article-toc__item::before {
        content: '';
        position: absolute;
        left: -0.25rem;   /* 居中于列表 0.5rem 的 gap 中 */
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 1.1em;
        background: var(--border-color);
    }

    .article-toc__link {
        white-space: nowrap;
        padding: 0.4rem 0.75rem;
        border: none;
        border-radius: 6px;
    }

    .article-toc__num {
        display: none;
    }

    /* 静态横向目录已占据顶部空间，重置固定避让留白；卡片内边距由三块容器自身提供 */
    body.has-article-toc .article-content {
        max-width: 900px;
        margin: 2.5rem var(--page-padding-mobile) 3rem;
        padding: 0;
    }

    .article-content {
        max-width: 900px;
        margin: 2.5rem var(--page-padding-mobile) 3rem;
        padding: 0;
        padding-top: calc(2rem + 60px);
    }

    .article-head,
    .article-main,
    .article-references {
        padding: 2rem 1.75rem;
    }

    .article-content h1 {
        font-size: 1.6rem;
    }

    .article-content h2 {
        font-size: 1.3rem;
    }

    .article-content p {
        font-size: 1rem;
    }
}

/* ====================
   响应式 - 移动端 (≤767px)
   覆盖 style.css：body/h1/h2 缩到 0.75rem 的问题
   保证文章文字清晰可读，目录/正文间隔拉开
   ==================== */
@media (max-width: 767px) {
    /* 平板/移动端 topbar 高度降为 50px，锚点避让同步下调 */
    .article-content [id] {
        scroll-margin-top: 66px;
    }

    .article-toc {
        position: static;
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 1.25rem var(--page-padding-mobile);
        margin-top: 50px;
    }

    .article-toc__header {
        display: none;
    }

    .article-toc__list {
        display: flex;
        overflow-x: auto;
        gap: 0.5rem;
        -webkit-overflow-scrolling: touch;
        /* 隐藏横向滑动条（下方那条细线提示），靠手势左右滑动切换 */
        scrollbar-width: none;        /* Firefox */
        -ms-overflow-style: none;     /* 旧版 Edge / IE */
    }

    .article-toc__list::-webkit-scrollbar {
        display: none;               /* Chrome / Safari */
        width: 0;
        height: 0;
    }

    .article-toc__item {
        position: relative;
        flex-shrink: 0;
    }

    /* 标题之间用竖向分割线分隔，取代原来的每个标题独立边框 */
    .article-toc__item + .article-toc__item::before {
        content: '';
        position: absolute;
        left: -0.25rem;   /* 居中于列表 0.5rem 的 gap 中 */
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 1.1em;
        background: var(--border-color);
    }

    .article-toc__link {
        white-space: nowrap;
        padding: 0.4rem 0.75rem;
        border: none;
        border-radius: 6px;
        font-size: 0.85rem;
    }

    .article-toc__num {
        display: none;
    }

    /* 静态横向目录已占据顶部空间，重置固定避让留白；圆角与内边距下沉到三块卡片 */
    body.has-article-toc .article-content {
        max-width: none;
        margin: 2rem var(--page-padding-mobile) 2.5rem;
        padding: 0;
    }

    .article-content {
        max-width: none;
        margin: 2rem var(--page-padding-mobile) 2.5rem;
        padding: 0;
        padding-top: calc(1.75rem + 61px);
    }

    .article-head,
    .article-main,
    .article-references {
        padding: 1.75rem 1.25rem;
        border-radius: 12px;
    }

    .article-content h1 {
        font-size: 1.4rem;
    }

    .article-content h2 {
        font-size: 1.2rem;
        margin-top: 2rem;
    }

    .article-content p {
        font-size: 1rem;
        line-height: 1.75;
    }

    .article-content .meta {
        font-size: 0.9rem;
        margin-bottom: 1.25rem;
    }

    /* 移动端收紧目录与作者信息的间隔（相邻外边距会折叠，需同步收 .meta 的底部外边距） */
    .article-content .article-toc-inline {
        padding-top: 1.25rem;
    }

    .article-content .reference-list li {
        font-size: 0.85rem;
    }
}

/* ====================
   响应式 - 小屏幕 (≤480px)
   ==================== */
@media (max-width: 480px) {
    .article-content {
        margin: 1.5rem var(--page-padding-small) 2rem;
        padding: 0;
        padding-top: calc(1.5rem + 61px);
    }

    body.has-article-toc .article-content {
        margin: 1.5rem var(--page-padding-small) 2rem;
        padding: 0;
    }

    .article-head,
    .article-main,
    .article-references {
        padding: 1.5rem 1rem;
    }

    .article-content h1 {
        font-size: 1.25rem;
    }

    .article-content h2 {
        font-size: 1.1rem;
    }

    .article-content p {
        font-size: 0.95rem;
    }
}