/*!
 * 文章详情页视觉统一  2026-08-23
 *
 * 媒体资讯与草粉圈的正文承载页，也是后台编辑器（含新增的视频与一键排版）
 * 产出内容的落地页。改造前的问题：
 *
 *   · 页面主标题是 <h2>，正文里反而有内容自带的 <h1>（一页三个 h1）
 *   · 标题上方没有栏目标识，进来不知道自己在哪个栏目
 *   · 页尾的版权声明是内联的正红色 rgb(255,0,0)，每篇文章都带一条，
 *     在以绿色为主的页面里非常刺眼
 *   · 上一篇/下一篇是两行裸文本，没有可点区域的视觉暗示
 *   · 正文区没有阅读宽度约束与排版规范
 *
 * 版式不动，只做层级、排版与配色。
 */

/* ============================================================
   1  标题区
   ============================================================ */

.news-show-left .news-title {
    border-bottom: 1px solid var(--kxc-line, #e4e1d5);
    margin-bottom: 34px;
    padding-bottom: 26px;
    text-align: center;
}

/* 栏目标识（模板里新增的一行小标签） */
.news-show-left .news-eyebrow {
    color: var(--kxc-gold, #c18747);
    display: inline-block;
    font-size: 12px;
    letter-spacing: .2em;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.news-show-left .news-title h1 {
    color: var(--kxc-ink, #17251d);
    font-family: var(--kxc-serif, "Noto Serif SC", "Songti SC", serif);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.45;
    margin: 0 auto 16px;
    max-width: 22em;
    text-wrap: balance;
}

.news-show-left .news-title p {
    color: var(--kxc-ink-faint, #8b968e);
    font-size: 13.5px;
    margin: 0;
}

/* ============================================================
   2  正文排版
   ------------------------------------------------------------
   内容来自后台编辑器，结构不完全可控，所以这里只定规范，
   不假设具体标签结构。
   ============================================================ */

.news-show-left .news-views {
    color: #3a4740;
    font-size: 16.5px;
    letter-spacing: .01em;
    line-height: 1.95;
    margin: 0 auto 10px;
    /* 阅读舒适宽度。原来是撑满整个左栏（约 860px），
       一行装 50 多个汉字，眼睛回扫很累。 */
    max-width: 42em;
}

.news-show-left .news-views p {
    margin: 0 0 18px;
}

/* 正文里内容自带的标题：降一级显示，避免和页面主标题抢层级。
 *
 * 这里原本带 !important —— 老文章的正文标题带着从编辑器粘进来的内联样式
 * （font-size:32px; font-family:sans-serif），内联优先级压过样式表。
 * 2026-08-23 已经把全部 174 篇正文里的内联样式清掉了（相当于逐篇跑了一次
 * 「一键排版」），所以这层强制不再需要，去掉。
 *
 * 万一以后又粘进带内联样式的内容，正确做法是在后台点「一键排版」，
 * 而不是把 !important 加回来 —— 那只是把问题盖住。 */
.news-show-left .news-views h1,
.news-show-left .news-views h2 {
    font-family: var(--kxc-serif, "Noto Serif SC", serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    margin: 34px 0 14px;
}
.news-show-left .news-views h3,
.news-show-left .news-views h4 {
    font-family: var(--kxc-serif, "Noto Serif SC", serif);
    font-size: 18px;
    font-weight: 600;
    margin: 28px 0 12px;
}

.news-show-left .news-views img {
    border-radius: var(--kxc-radius, 12px);
    display: block;
    height: auto;
    margin: 22px auto;
    max-width: 100% !important;
}

.news-show-left .news-views blockquote {
    background: var(--kxc-green-soft, #eaf1ec);
    border-left: 3px solid var(--kxc-green, #1f6b45);
    border-radius: 0 var(--kxc-radius-sm, 6px) var(--kxc-radius-sm, 6px) 0;
    color: var(--kxc-ink-soft, #5d6a62);
    margin: 24px 0;
    padding: 16px 22px;
}

.news-show-left .news-views a {
    color: var(--kxc-green, #1f6b45);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.news-show-left .news-views hr {
    background: var(--kxc-line, #e4e1d5);
    border: 0;
    height: 1px;
    margin: 34px auto;
    width: 60%;
}

/* ============================================================
   3  版权声明
   ------------------------------------------------------------
   原来是模板里写死的一段内联正红。红色在这个页面唯一的作用
   是把一句免责声明变成整页最醒目的东西 —— 主次是反的。
   改成低对比的脚注。模板里已把内联 style 换成 class。
   ============================================================ */

.news-copyright {
    border-top: 1px dashed var(--kxc-line, #e4e1d5);
    color: var(--kxc-ink-faint, #8b968e);
    font-size: 12.5px;
    line-height: 1.9;
    margin: 40px auto 0;
    max-width: 42em;
    padding-top: 16px;
    text-align: center;
}
.news-copyright a {
    color: var(--kxc-ink-soft, #5d6a62);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.news-copyright a:hover {
    color: var(--kxc-green, #1f6b45);
}

/* ============================================================
   4  上一篇 / 下一篇 / 返回列表
   ============================================================ */

.gr-page-other {
    border-top: 1px solid var(--kxc-line, #e4e1d5);
    display: grid;
    gap: 10px 24px;
    grid-template-columns: 1fr auto;
    margin-top: 40px;
    padding: 26px 0 0 !important;
}

.gr-page-other p {
    color: var(--kxc-ink-faint, #8b968e);
    font-size: 14px;
    grid-column: 1;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gr-page-other p a {
    color: var(--kxc-ink, #17251d);
    transition: color var(--kxc-t-fast, .18s) var(--kxc-ease, ease);
}
.gr-page-other p a:hover {
    color: var(--kxc-green, #1f6b45);
}
/* 没有上/下一篇时输出的是状态文字，不是链接 —— 弱化它 */
.gr-page-other .kxc-adjacent {
    color: var(--kxc-ink-faint, #8b968e);
}

.gr-page-other .gr-back-btn {
    align-items: center;
    border: 1px solid var(--kxc-green-line, #cfe0d5);
    border-radius: var(--kxc-radius-pill, 999px);
    color: var(--kxc-green-deep, #174829);
    display: inline-flex;
    float: none !important;
    font-size: 14px;
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-content: center;
    padding: 0 24px;
    height: 42px;
    align-self: center;
    transition: background var(--kxc-t-fast, .18s) var(--kxc-ease, ease),
                border-color var(--kxc-t-fast, .18s) var(--kxc-ease, ease);
}
.gr-page-other .gr-back-btn:hover {
    background: var(--kxc-green-soft, #eaf1ec);
    border-color: var(--kxc-green, #1f6b45);
}

/* ============================================================
   5  右栏
   ============================================================ */

.news-show-right .tab dt,
.news-show-right dl.tab dt {
    font-family: var(--kxc-serif, "Noto Serif SC", serif);
    font-weight: 600;
}
.news-show-right li a:hover {
    color: var(--kxc-green, #1f6b45);
}

/* ============================================================
   6  窄屏
   ============================================================ */

@media (max-width: 1024px) {
    .news-show-left .news-title h1 { font-size: 24px; }
    .news-show-left .news-views { font-size: 16px; max-width: none; }
    .gr-page-other {
        grid-template-columns: 1fr;
    }
    .gr-page-other .gr-back-btn {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        margin-top: 8px;
    }
}