/* ==========================================================================
   内页设计系统（列表页 / 栏目页 / 内容页统一）  theme/qinxue/css/inner.css
   ─────────────────────────────────────────────────────────────────────────
   2026-10-09 新增。PC 与移动端共用一份，由 pc/frame 与 m/frame 同时加载。

   为什么要有这一层：
     建站过程中各页面是分批做的，内页的口径散落在 5 个文件里，彼此不一致 ——
       1) 容器宽度三套并存：nav.css/tech.css 用 1550px，
          asset/theme/qinxue-inner.css 用 1750px，
          pc/frame 的 --container-width 也是 1750px。
       2) 分类标签栏四套写法：
          · pc/share/list_cat_bar.blade.php  —— .cat-bar（/news /mtzx 媒体中心 /a/*）
          · pc/share/inner_head_multi.blade.php —— .n_title .n_nav（/job /teacher /contact）
          · pc/cms/list/default|cases|product —— .category-tabs（**完全没有 CSS 定义**，
            浏览器按裸 <a> 渲染，既无选中态也无悬停态）
          · m/cms/list/default —— .m-cat-tabs
       3) 字号：列表标题 16px / 18px / 22px / 26px / 36px 五种，分类字号 13px / 14px / 1.125rem 三种。
       4) 旧蓝 #0366c2 残留在 asset/theme/qinxue-inner.css（面包屑、文章卡片、新闻分类标签）。

   本文件把这些收成一套「设计令牌 + 组件」，只做加法与纠偏：
     · 令牌层  —— 全站字号阶梯、容器宽度、间距、品牌色变量
     · 组件层  —— 统一分类标签栏（.cat-bar 与 .category-tabs 与 .m-cat-tabs 同源）
     · 增强层  —— 卡片悬停、列表项左侧色条、分页、滚动入场动效（科技感）

   加载顺序：必须在 nav.css 与 tech.css 之后（权重与覆盖需要）。
   回滚：删掉 pc/frame.blade.php 与 m/frame.blade.php 里对本文件的 <link> 两行即可，
        本文件不修改任何其它样式表，纯加法，删除即完全还原。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 设计令牌 —— 全站唯一的口径来源

   ⚠️ 全部用 px，不用 rem。原因：实测本站 <html> 的 font-size 是 **14px**
      （不是浏览器默认的 16px），所以老代码里的 1.125rem 实际渲染成 15.75px、
      5rem 渲染成 70px —— 同一个 rem 值在不同页面算出来的像素并不直观，
      很容易出现「以为统一了、实测差 2px」。内页尺度必须精确可控，直接用 px。
   -------------------------------------------------------------------------- */
:root {
    /* 容器：与 nav.css 的 .ub-container、内页条幅 .pb-in 严格对齐 1550px */
    --inner-container: 1550px;
    --inner-gutter: 40px;

    /* 字号阶梯（PC，px）。刻意只保留这几档，模板里不再出现 17px / 19px / 26px 这类孤值 */
    --fs-eyebrow: 13px;       /* 分类眉标 / 元信息 */
    --fs-body: 15px;          /* 摘要 / 列表说明 */
    --fs-item-title: 18px;    /* 列表项标题 & 分类标签 —— 全站统一用这一档 */
    --fs-section: 24px;       /* 区块小标题 */
    --fs-page: 28px;          /* 内容页大标题 */
    --fs-display: 44px;       /* 主视觉标题（tech.css 已用） */

    /* 间距阶梯 */
    --sp-1: 8px;
    --sp-2: 16px;
    --sp-3: 24px;
    --sp-4: 40px;

    /* 品牌色（与 logo 一致） */
    --vi-blue: #0062c0;
    --vi-blue-dark: #004e96;
    --vi-blue-light: #3fbaff;
    --vi-yellow: #f9d100;
    --vi-yellow-deep: #f0a500;

    /* 中性色 —— 统一各页原先各自为政的灰 */
    --vi-ink: #1d2530;        /* 标题 */
    --vi-ink-2: #3d4757;      /* 正文 */
    --vi-ink-3: #6b7686;      /* 摘要 / 元信息 */
    --vi-line: #e3e9f0;       /* 分隔线 */
    --vi-bg: #f5f8fc;         /* 页面底色 */
    --vi-card: #ffffff;

    /* 阴影阶梯 —— 让「科技感」有统一的落点 */
    --sh-1: 0 1px 3px rgba(13, 35, 61, .06), 0 1px 2px rgba(13, 35, 61, .04);
    --sh-2: 0 6px 18px rgba(13, 35, 61, .08), 0 2px 6px rgba(13, 35, 61, .04);
    --sh-3: 0 14px 38px rgba(13, 35, 61, .12), 0 4px 12px rgba(13, 35, 61, .05);
    --sh-blue: 0 8px 24px rgba(0, 98, 192, .22);
}

/* 移动端令牌单独覆盖 —— 移动端基准字号应小于 PC */
@media (max-width: 900px) {
    :root {
        --inner-gutter: 20px;
        --fs-item-title: 17px;
        --fs-section: 21px;
        --fs-page: 22px;
    }
}

/* --------------------------------------------------------------------------
   1. 容器口径统一
   原状：qinxue-inner.css 的 .ub-container 是 1750px + padding 0 20px，
        nav.css / tech.css / 各内页是 1550px + padding 0 40px（1400/1200/1040 有阶梯）。
        结果同一个网站里导航 1550、正文 1750，视觉上正文比导航「宽出一圈」。
   这里把 ub-container 也拉到 1550/40，并补齐与 nav.css 同款的四级断点阶梯。
   -------------------------------------------------------------------------- */
.ub-container {
    max-width: var(--inner-container);
    margin: 0 auto;
    padding: 0 var(--inner-gutter);
    box-sizing: border-box;
}

@media (max-width: 1400px) {
    .ub-container { padding-left: 28px; padding-right: 28px; }
}
@media (max-width: 1200px) {
    .ub-container { padding-left: 22px; padding-right: 22px; max-width: 100%; }
}
@media (max-width: 1040px) {
    .ub-container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 767px) {
    .ub-container { padding-left: 20px; padding-right: 20px; }
}

/* --------------------------------------------------------------------------
   2. 统一分类标签栏
   三套历史写法（.cat-bar / .n_title .n_nav / .category-tabs）与移动端 .m-cat-tabs
   在这里收敛到同一套视觉：胶囊底 + 品牌蓝渐变填充 + 分隔线 + 选中态。

   2.1 PC —— 补齐 .category-tabs（此前**完全没有 CSS 定义**，浏览器按裸 <a> 渲染：
      既无选中态也无悬停态，与 /news /teacher 等页的分类栏完全不是一个样子）。
      这里补齐，并做到与 .n_nav 同高（70px）、同字号（18px），全站分类栏彻底统一。
   -------------------------------------------------------------------------- */
.category-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    margin: 0 0 var(--sp-3);
    padding: 0 0 2px;
    border-bottom: 1px solid var(--vi-line);
}

.category-tabs .tab {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 24px;
    border: 1px solid var(--vi-line);
    border-radius: 8px;
    background: #fff;
    color: var(--vi-ink-2);
    font-size: var(--fs-item-title);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: color .28s ease, background .28s ease, border-color .28s ease,
                box-shadow .28s ease, transform .28s ease;
}

.category-tabs .tab:hover {
    color: var(--vi-blue);
    border-color: rgba(0, 98, 192, .45);
    box-shadow: 0 4px 14px rgba(0, 98, 192, .14);
    transform: translateY(-1px);
}

.category-tabs .tab.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--vi-blue-light), var(--vi-blue));
    box-shadow: var(--sh-blue);
}

@media (max-width: 900px) {
    .category-tabs { min-height: 60px; gap: 9px; }
    .category-tabs .tab { height: 38px; padding: 0 16px; font-size: 15px; }
}

/* --------------------------------------------------------------------------
   2.2 PC —— .n_nav（无论它挂在 .cat-bar 还是 .n_title 下）与 .category-tabs 统一

   ⚠️ 选择器说明：实测三页的祖先链是
        /about  : div.n_nav < div.m < section.n_title.web
        /teacher: div.n_nav < div.m < section.n_title.web      （Teacher 模块自带一套样式）
        /mtzx   : div.n_nav < div.m < section.n_title.web.cat-bar
      三者结构同源，但 Teacher / CampusLife / Teacher-detail 三个模块各自带内联
      <style>，权重高于本文件。所以这里一律用 `.n_nav li` 全局选择器 + !important，
      不加祖先限定，确保一次覆盖到所有页面。

   ⚠️ 必须显式锁死 line-height 与 font-size。实测原先高度是
      68px（Teacher 自定义 4.25rem×14）/ 70px（默认 5rem×14）/ 81px（媒体中心）三值并存，
      字号是 14.875 / 15.75 / 18px 三档 —— 分类栏高度与字号肉眼不齐。

   ⚠️ 选中态与悬停态最终定为「品牌蓝渐变药丸 + 白字 + 蓝色柔光」（与 .category-tabs 一致）。
      中途试过「蓝字 + 底部指示器」，但和 .category-tabs 的蓝底白字并排时明显两套语言，
      遂统一为蓝底白字 —— 更醒目，也更符合「科技感」。
      ⚠️ 2026-10-16 修正：悬停态此前仍是「浅蓝底 + 蓝字」(color: var(--vi-blue) !important)，
         与选中态两套语言，且 !important 权重压过了 share/list_cat_bar.blade.php 的
         `.cat-bar li:hover{color:#fff}`，造成列表页悬停文字不变白。现已与 .on 统一为蓝底白字。
   -------------------------------------------------------------------------- */
.n_nav li {
    line-height: 70px !important;
    font-size: var(--fs-item-title) !important;
    font-weight: 700 !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    color: var(--vi-ink-2) !important;
    background: transparent;
    border-radius: 8px;
    transition: color .28s ease, background .28s ease, box-shadow .28s ease,
                transform .28s ease;
}

/* 悬停：品牌蓝渐变药丸 + 白字（与 .on 同一套语言）
   ⚠️ 历史包袱：本条曾是「浅蓝底 + 蓝字 + 上浮」，color 用 var(--vi-blue) !important，
      权重压过了 share/list_cat_bar.blade.php 里的 `.cat-bar li:hover{color:#fff}`，
      导致列表页悬停时文字始终是蓝色（回归表现为「悬停不变白」）。
      现统一为蓝底白字；a 必须显式 inherit，否则内层 <a> 仍各自带色。 */
.n_nav li:hover {
    color: #fff !important;
    background: linear-gradient(135deg, var(--vi-blue-light), var(--vi-blue)) !important;
    box-shadow: var(--sh-blue);
    transform: translateY(-1px);
}
.n_nav li:hover a { color: #fff !important; }

/* 选中：品牌蓝渐变 + 白字 + 柔光 */
.n_nav li.on {
    color: #fff !important;
    background: linear-gradient(135deg, var(--vi-blue-light), var(--vi-blue)) !important;
    box-shadow: var(--sh-blue);
}
.n_nav li.on:hover { color: #fff !important; }
.n_nav li.on a { color: #fff !important; }

/* 选中/悬停时隐藏分隔竖线 */
.n_nav li.on:after,
.n_nav li:hover:after { opacity: 0 !important; }

/* 覆盖老 CSS 的「整块蓝底 ::before 铺开」—— 已被上面的药丸方案取代，
   显式归零，避免两层背景叠加 */
.n_nav li:before { opacity: 0 !important; width: 0 !important; }

/* 教师页首项自带 padding-left:0（贴边），与其他页不一致，统一回来 */
.n_nav li:first-child { padding-left: 32px !important; }

/* 窄屏收敛，避免大字号把标签挤换行 */
@media (max-width: 900px) {
    .n_nav li {
        line-height: 56px !important;
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
    .n_nav li:first-child { padding-left: 22px !important; }
}

/* 分隔竖线：统一成浅灰，选中/悬停时淡出 */
.cat-bar .n_nav li+li:after,
.n_title .n_nav li+li:after {
    background: var(--vi-line);
}

/* 2.3 移动端 —— .m-cat-tabs 与 PC 同源（品牌蓝药丸 + 选中态）
   原状是 #f2f4f7 灰底 + #0062c0 选中，虽不算错，但与 PC 的
   「描边 + 悬停上浮 + 蓝色柔光」不是一套语言。
   高度固定 36px —— 移动端触控目标不小于 36px，且各分类栏高度必须完全一致。 */
.m-cat-tabs {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 12px 14px;
    background: #fff;
    border-bottom: 1px solid var(--vi-line);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.m-cat-tabs::-webkit-scrollbar { display: none; }

.m-cat-tabs a {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--vi-line);
    border-radius: 999px;
    background: #fff;
    color: var(--vi-ink-2);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: color .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.m-cat-tabs a:active {
    border-color: rgba(0, 98, 192, .45);
    box-shadow: 0 3px 10px rgba(0, 98, 192, .14);
}

.m-cat-tabs a.on {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--vi-blue-light), var(--vi-blue));
    box-shadow: 0 5px 14px rgba(0, 98, 192, .26);
}

/* --------------------------------------------------------------------------
   2.4 分类栏容器的精确高度锁死
   实测：li 统一 70px 后，带 border-bottom:1px 的 <section> 渲染成 71px，
        不带的是 70px —— 1px 误差并排时肉眼可见（上下边线不齐）。
        原因：section 只写了 border-bottom，没写 height，高度由内容 + 边框撑开。
        这里给 section 本身也锁 70px 并用 border-box 把边框算进去。
   -------------------------------------------------------------------------- */
.n_title.web,
.cat-bar {
    box-sizing: border-box;
    height: 70px;
}
.n_title.web > .m,
.cat-bar > .m {
    height: 70px;
}
@media (max-width: 900px) {
    .n_title.web,
    .cat-bar,
    .n_title.web > .m,
    .cat-bar > .m { height: 56px; }
}

/* --------------------------------------------------------------------------
   2.5 移动端分类栏高度锁死 61px → 60px（12px*2 padding + 36px 药丸）
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .m-cat-tabs {
        box-sizing: border-box;
        height: 61px;
        padding-top: 12px;
        padding-bottom: 12px;
        align-items: center;
    }
}

/* --------------------------------------------------------------------------
   3. 面包屑 —— 统一色值（qinxue-inner.css 里是旧蓝 #0366c2）
   -------------------------------------------------------------------------- */
.breadcrumb a,
.breadcrumb a:hover {
    color: var(--vi-blue);
    text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: #c4ccd6; margin: 0 8px; }
.breadcrumb .current { color: var(--vi-ink); }

/* --------------------------------------------------------------------------
   4. 列表项统一
   原状：标题 16px(style.css) / 22px(news.blade.php) / 19px(media.blade.php) 三种，
        摘要 13px / 15px 两种，缩略图 180×120 / 240×160 两种。
   这里统一到令牌值，并给列表项加「左侧品牌色条 + 悬停位移」——科技感的主要来源。
   -------------------------------------------------------------------------- */
.article-item,
.nn_list .item,
.m-aitem {
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}

/* PC 列表项：白卡 + 细边框 + 悬停上浮 */
.article-item {
    display: flex;
    align-items: stretch;
    gap: 20px;
    padding: 20px;
    margin: 0 0 14px;
    background: var(--vi-card);
    border: 1px solid var(--vi-line);
    border-radius: 12px;
    box-shadow: var(--sh-1);
    text-decoration: none;
    overflow: hidden;
}

/* 左侧品牌色条：默认收起，悬停时展开 */
.article-item::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: linear-gradient(180deg, var(--vi-blue-light), var(--vi-blue));
    transition: width .3s ease;
}

.article-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-3);
    border-color: rgba(0, 98, 192, .28);
}
.article-item:hover::before { width: 4px; }

.article-item .thumb {
    width: 200px;
    height: 134px;
    flex-shrink: 0;
    margin-right: 0;
    border-radius: 9px;
    overflow: hidden;
    background: var(--vi-bg);
}
.article-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.article-item:hover .thumb img { transform: scale(1.06); }

.article-item .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.article-item .info .title {
    font-size: var(--fs-item-title);
    font-weight: 700;
    line-height: 1.5;
    color: var(--vi-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .25s ease;
}
.article-item:hover .info .title { color: var(--vi-blue); }

.article-item .info .summary {
    margin-top: 8px;
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--vi-ink-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-item .info .meta {
    margin-top: auto;
    padding-top: 10px;
    font-size: var(--fs-eyebrow);
    color: #9aa4b2;
}

/* 列表容器：统一留白 */
.article-list { padding: 0; }

/* 移动端列表项 */
.m-aitem {
    display: flex;
    gap: 12px;
    padding: 14px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid var(--vi-line);
    border-radius: 10px;
    box-shadow: var(--sh-1);
    text-decoration: none;
}
.m-aitem .th {
    width: 108px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 7px;
    overflow: hidden;
    background: var(--vi-bg);
}
.m-aitem .th img { width: 100%; height: 100%; object-fit: cover; }
.m-aitem .if { flex: 1; min-width: 0; }
.m-aitem .if h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--vi-ink);
}
.m-aitem .if .sm {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--vi-ink-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.m-aitem .if .mt {
    margin-top: 6px;
    font-size: 11px;
    color: #9aa4b2;
}
.m-aitem.no-th .if h5 { font-size: 15px; }

/* 资讯列表（.nn_list）—— 与 .article-item 同一套卡片语言：
   白卡 + 细边框 + 悬停上浮 + 左侧品牌色条 + 封面轻微放大 */
.nn_list li {
    margin-bottom: 14px;
}

.nn_list li a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 20px;
    background: var(--vi-card);
    border: 1px solid var(--vi-line);
    border-radius: 12px;
    box-shadow: var(--sh-1);
    overflow: hidden;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.nn_list li a::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: linear-gradient(180deg, var(--vi-blue-light), var(--vi-blue));
    transition: width .3s ease;
}

.nn_list li a:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-3);
    border-color: rgba(0, 98, 192, .28);
}
.nn_list li a:hover::before { width: 4px; }

.nn_list li .img {
    width: 190px;
    height: 126px;
    flex-shrink: 0;
    border-radius: 9px;
    overflow: hidden;
    background: var(--vi-bg);
}
.nn_list li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.nn_list li a:hover .img img { transform: scale(1.06); }

.nn_list li .text { flex: 1; min-width: 0; }
.nn_list li .text h3 {
    margin: 0 0 8px;
    font-size: var(--fs-item-title);
    font-weight: 700;
    line-height: 1.5;
    color: var(--vi-ink);
    transition: color .25s ease;
}
.nn_list li a:hover .text h3 { color: var(--vi-blue); }

.nn_list li .text p {
    margin: 0;
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--vi-ink-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nn_list li .date {
    width: 110px;
    flex-shrink: 0;
    padding-left: 16px;
    border-left: 1px solid var(--vi-line);
    text-align: center;
}
.nn_list li .date span {
    display: block;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--vi-blue);
    letter-spacing: .02em;
}
.nn_list li .date label {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-eyebrow);
    color: var(--vi-ink-3);
}

/* 移动端资讯列表：单列、封面缩小 */
@media (max-width: 900px) {
    .nn_list li a { padding: 14px; gap: 12px; border-radius: 10px; }
    .nn_list li .img { width: 110px; height: 74px; border-radius: 7px; }
    .nn_list li .text h3 { font-size: 15px; }
    .nn_list li .text p { font-size: 12px; }
    .nn_list li .date { display: none; }
}

/* --------------------------------------------------------------------------
   5. 文章卡片（旧 .article-card 系列，qinxue-inner.css）
   补齐左侧色条与图片缩放，并统一旧蓝 #0366c2 → 品牌蓝
   -------------------------------------------------------------------------- */
.article-card-body .meta .cat-tag {
    background: rgba(0, 98, 192, .08);
    color: var(--vi-blue);
}
.article-card-body .title { color: var(--vi-ink); }
.article-card:hover .article-card-body .title { color: var(--vi-blue); }

/* 无图占位的紫色渐变（#667eea/#764ba2）与品牌 VI 不搭，改为品牌蓝深浅 */
.article-card-noimg {
    background: linear-gradient(135deg, var(--vi-blue-light), var(--vi-blue-dark));
}

/* --------------------------------------------------------------------------
   6. 分页 —— 统一为品牌蓝选中态 + 悬停反馈
   -------------------------------------------------------------------------- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--sp-3);
}
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--vi-line);
    border-radius: 8px;
    background: #fff;
    color: var(--vi-ink-2);
    font-size: var(--fs-body);
    text-decoration: none;
    transition: color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.pagination a:hover {
    color: var(--vi-blue);
    border-color: rgba(0, 98, 192, .45);
    box-shadow: 0 4px 12px rgba(0, 98, 192, .14);
}
.pagination .current,
.pagination span.current {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--vi-blue-light), var(--vi-blue));
    box-shadow: var(--sh-blue);
}

/* --------------------------------------------------------------------------
   7. 内容页（详情/栏目单页）
   原状：.article-detail h1 26px、.article-detail .detail-body 16px/line-height 2；
        而各 cms/detail 模板的 nd_title 是 26px / 20px 两档。统一到令牌。
   -------------------------------------------------------------------------- */
.article-detail {
    background: var(--vi-card);
    border: 1px solid var(--vi-line);
    border-radius: 14px;
    box-shadow: var(--sh-2);
    padding: 38px 44px;
}

.article-detail h1,
.nd_title,
#n_news_xq .nd_title {
    font-size: var(--fs-page) !important;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: .01em;
    color: var(--vi-ink);
    margin: 0 0 14px;
    text-align: center;
}

.article-detail .detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: var(--fs-eyebrow);
    color: #9aa4b2;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--vi-line);
}

.article-detail .detail-body {
    font-size: 1rem;
    line-height: 2.05;
    color: var(--vi-ink-2);
}
.article-detail .detail-body p { margin-bottom: 16px; }
.article-detail .detail-body img { max-width: 100%; border-radius: 8px; }

/* 内容页顶部品牌渐变短线 —— 与首页主视觉同一个锚点 */
.article-detail h1 + .detail-meta::before { content: none; }

@media (max-width: 900px) {
    .article-detail { padding: 22px 18px; border-radius: 12px; }
    .article-detail .detail-body { font-size: 15px; line-height: 1.95; }
}

/* --------------------------------------------------------------------------
   8. 区块小标题（.s_tt 系列）—— 补一层科技感锚点
   tech.css 已给了 ::after 短线，这里补字号与字重的统一口径。
   -------------------------------------------------------------------------- */
.s_tt {
    font-size: var(--fs-section);
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--vi-ink);
}

/* --------------------------------------------------------------------------
   9. 滚动入场动效（科技感的「活」感）
   ⚠️ 关键安全约束：隐藏态（opacity:0）**只在** <html> 已被 reveal.js 加上
      .js-reveal-on 之后才生效。否则 JS 加载失败 / 被拦截 / 浏览器不支持
      IntersectionObserver 时，内容会永久隐形 —— 这是绝不能接受的事故。
      换言之：无 JS 时内容 100% 正常显示，动效只是锦上添花。
   -------------------------------------------------------------------------- */
.js-reveal-on .js-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
                transform .6s cubic-bezier(.22, .61, .36, 1);
}
.js-reveal-on .js-reveal.in-view {
    opacity: 1;
    transform: none;
}

/* 同批元素依次进场 */
.js-reveal.d1 { transition-delay: .06s; }
.js-reveal.d2 { transition-delay: .12s; }
.js-reveal.d3 { transition-delay: .18s; }
.js-reveal.d4 { transition-delay: .24s; }

/* 无障碍：用户偏好减少动效时全部直出 */
@media (prefers-reduced-motion: reduce) {
    .js-reveal-on .js-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .article-item:hover,
    .category-tabs .tab:hover,
    .article-item:hover .thumb img { transform: none !important; }
}

/* 打印 / 强制截图场景：全部直出，绝不出现「打印出来少一半内容」 */
@media print {
    .js-reveal-on .js-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   10. 背景与栅格 —— 让内页不至于「一片白」
   仅给内页主区加极淡的网格底纹（科技感的常用手法），
   透明度极低，不影响文字可读性。
   -------------------------------------------------------------------------- */
#n_main,
.inner-body {
    background-image:
        linear-gradient(rgba(0, 98, 192, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 98, 192, .028) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: center top;
}

/* 内容卡片与列表所在处不透明，盖住底纹，保证阅读舒适 */
.article-item,
.article-card,
.article-detail,
.m-aitem,
.content-panel {
    background-color: var(--vi-card);
}

/* --------------------------------------------------------------------------
   11.5 移动端横向溢出兜底
   背景：实测 /a/2050 内容页在 390px 视口下溢出 351px，根因是
        `.m-pn a`（上下篇导航）是 flex 子项但没有 min-width:0 ——
        flex 子项默认 min-width:auto 会拒绝收缩到内容宽度以下，
        标题一长（该页标题 427px）就把整页撑出横向滚动条。

   这里加两层防护：
     A. 结构层：给 flex 容器与 flex 子项补 min-width:0（根治已知的 .m-pn）
     B. 兜底层：正文里的超长无空格串（URL、连续英文数字）允许断行；
        图片/视频/iframe 一律不超宽。
        —— 这样以后新增内容即便写出超长串，也不会把整页撑破。

   注意：正文里的 <table> 已在 mobile.css:156 用 `display:block;overflow-x:auto`
   处理成横向滚动（这是表格的正确做法），这里不覆盖它。
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* A. 结构层 —— flex 容器与其子项允许收缩 */
    .m-pn,
    .m-aitem,
    .m-cat-tabs,
    .m-page {
        min-width: 0;
    }
    .m-pn a,
    .m-aitem .if,
    .m-aitem .th {
        min-width: 0;
    }

    /* B. 兜底层 —— 内容永不撑破视口 */
    .m-detail .bd,
    .nn_list li .text,
    .article-detail .detail-body {
        /* 超长无空格串（URL / 连续英文数字）在行尾断行 */
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .m-detail .bd img,
    .m-detail .bd video,
    .m-detail .bd iframe,
    .m-detail .bd embed,
    .m-detail .bd object,
    .nn_list li .img img,
    .m-aitem .th img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* iframe 给个默认宽高，避免没有属性时按 300×150 撑出边距 */
    .m-detail .bd iframe {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   12. 空状态 —— 统一，避免各页各写一套
   -------------------------------------------------------------------------- */
.ub-empty,
.m-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 56px 20px;
    color: var(--vi-ink-3);
    font-size: var(--fs-body);
}
.ub-empty .icon,
.m-empty .icon { font-size: 40px; opacity: .35; }