/* ============================================================
   新闻通知页（/news/index）
   风格：清爽学术风 —— 与 theme.css 共用变量，无渐变 / 投影 / 位移动画
   作用域：所有规则限定在 .news-index 内，不污染全站
   ============================================================ */

.news-index {
    padding-bottom: 4px;
}

/* 面包屑：theme.css 里分隔符用的是 --line(#E4E7E4)，在本页浅底上几乎看不见，压深一档 */
.news-index .breadcrumb > li + li::before {
    color: var(--muted, #8A9490);
}

/* ---------------------------------------------------------------- 页头 */
.news-index .nx-head {
    padding: 2px 0 14px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--line, #E4E7E4);
}

.news-index .nx-title {
    position: relative;
    margin: 0;
    padding-left: 14px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .3px;
    color: var(--ink, #16202A);
}

/* 一级标题前的品牌色竖条（比区块标题粗一档），整页从左到右形成一条视觉轴 */
.news-index .nx-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 20px;
    margin-top: -10px;
    background: var(--brand, #0F5C6B);
    border-radius: 2px;
}

.news-index .nx-sub {
    margin: 5px 0 0;
    font-size: 12px;
    color: var(--muted, #8A9490);
}

.news-index .nx-sub b {
    font-weight: 600;
    color: var(--ink-2, #3D4A52);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- 操作结果提示（删除主贴） */
/* 删除新闻主贴后由 DiscussController 带 ?del=ok 回到本页，这里是它的落地样式。
   与详情页 .nv-flash 同一套视觉（左 3px 竖条 + 浅底 + 无投影），
   类名独立成 .nx-flash：本页只加载 news.css，取不到 news-view.css 里的规则。
   色值全部走 theme.css 的变量，主题改动时这里不用跟着改。 */
.news-index .nx-flash {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: -10px 0 20px;
    padding: 7px 10px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-2, #3D4A52);
    background: #F4F6F5;
    border-left: 3px solid var(--brand, #0F5C6B);
    border-radius: 3px;
}

.news-index .nx-flash-ico {
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    margin-top: 2px;
    color: currentColor;
}

.news-index .nx-flash.is-warn {
    color: #6B4700;
    background: #FBF5E9;
    border-left-color: var(--warn, #A85B00);
}

/* ---------------------------------------------------------------- 区块 */
.news-index .nx-sec {
    margin-bottom: 36px;
}

.news-index .nx-sec-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 2px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line, #E4E7E4);
}

.news-index .nx-sec-title {
    position: relative;
    margin: 0;
    padding-left: 11px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #16202A);
}

/* 标题前的品牌色竖条：给区块一个视觉锚点，页面不至于平到没有层次 */
.news-index .nx-sec-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 13px;
    margin-top: -6.5px;
    background: var(--brand, #0F5C6B);
    border-radius: 2px;
}

.news-index .nx-sec-num {
    font-size: 11px;
    color: var(--muted, #8A9490);
    font-variant-numeric: tabular-nums;
}

/* 通知区块改用琥珀色竖条，与列表行的琥珀色点配套 —— 两个区块靠颜色就能分开 */
.news-index .nx-sec-notice .nx-sec-title::before {
    background: #B5822F;
}

.news-index .nx-sec-note {
    margin-left: auto;
    padding: 1px 8px;
    font-size: 11px;
    line-height: 18px;
    color: var(--muted, #8A9490);
    background: #F4F6F5;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- 头条 */
/* 由「通栏一行」改成一张卡片：细边框 + 小圆角 + 内padding，
   让头条与下面的列表拉开层级，但不加投影（保持平面的学术风） */
.news-index .nx-hero {
    display: flex;
    gap: 20px;
    margin: 14px 0 0;
    padding: 16px;
    background: var(--paper, #FFF);
    border: 1px solid var(--line, #E4E7E4);
    border-radius: 4px;
    transition: border-color .16s ease, background-color .16s ease;
}

.news-index .nx-hero:hover {
    border-color: #C6D8D4;
    background: #FCFDFC;
}

.news-index .nx-hero-thumb {
    flex: 0 0 300px;
    height: 176px;
    display: block;
    overflow: hidden;
    background: var(--line-soft, #F0F2F0);
    border: 1px solid var(--line, #E4E7E4);
}

.news-index .nx-hero-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-index .nx-hero-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.news-index .nx-hero-tag {
    align-self: flex-start;
    margin-bottom: 9px;
    padding: 1px 7px;
    font-size: 11px;
    line-height: 1.7;
    color: var(--brand, #0F5C6B);
    background: var(--brand-soft, #EAF1F0);
    border-radius: 2px;
}

.news-index .nx-hero-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
}

.news-index .nx-hero-title a {
    color: var(--ink, #16202A);
    text-decoration: none;
}

.news-index .nx-hero-title a:hover {
    color: var(--brand, #0F5C6B);
}

.news-index .nx-hero-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    max-width: 660px;
    margin: 0 0 auto;
    padding-bottom: 12px;
    font-size: 13px;
    line-height: 1.85;
    color: var(--ink-3, #5C6A66);
}

/* meta 与「查看详情」按钮同一行：信息在左，动作用力在右 */
.news-index .nx-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 11.5px;
    color: var(--muted, #8A9490);
    font-variant-numeric: tabular-nums;
}

.news-index .nx-meta-info {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.news-index .nx-meta .sep {
    margin: 0 7px;
    color: var(--line, #E4E7E4);
}

/* 头条「查看详情 →」：浅品牌底 + 细边，悬停反白。
   这是整张头条唯一的行动点，之前只有一个标题链接，点哪儿不明显 */
.news-index .nx-hero-more {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--brand, #0F5C6B);
    text-decoration: none;
    background: var(--brand-soft, #EAF1F0);
    border: 1px solid transparent;
    border-radius: 3px;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.news-index .nx-hero-more:hover,
.news-index .nx-hero-more:focus {
    color: #FFF;
    background: var(--brand, #0F5C6B);
    border-color: var(--brand, #0F5C6B);
    text-decoration: none;
}

.news-index .nx-arrow {
    font-size: 12px;
    line-height: 1;
    transition: transform .16s ease;
}

.news-index .nx-hero-more:hover .nx-arrow {
    transform: translateX(2px);
}

/* ---------------------------------------------------------------- 列表 */
.news-index .nx-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.news-index .nx-hero + .nx-list {
    margin-top: 6px;
}

.news-index .nx-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft, #F0F2F0);
    transition: background-color .16s ease;
}

/* 整行只是轻微提亮，标题与图标同时变品牌色，反馈够了；不额外加竖线，避免破坏左边缘对齐 */
.news-index .nx-item:hover {
    background: #F7F9F8;
}

.news-index .nx-item:last-child {
    border-bottom: 0;
}

/* 日期改成浅底小胶囊：和标题、浏览量在视觉上分成三块，扫读更顺 */
.news-index .nx-date {
    flex: 0 0 84px;
    padding: 1px 0;
    font-size: 11.5px;
    line-height: 20px;
    text-align: center;
    color: var(--ink-3, #5C6A66);
    background: #F4F6F5;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: background-color .16s ease;
}

.news-index .nx-item:hover .nx-date {
    background: #EDF2F0;
}

/* 分类色点：新闻 = 品牌青，通知 = 琥珀。
   与区块标题竖条同色，形成一套色彩编码——扫读时不用看标题文字就知道自己在哪个区块。
   用 flex 子项而不是 ::before，避免被 .nx-link 的 ellipsis 一起裁掉。
   负 margin 抵掉一半 gap，让点贴着标题，标题不至于被推得太远 */
.news-index .nx-dot {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    margin-right: -8px;
    border-radius: 50%;
    background: currentColor;
    transition: box-shadow .16s ease;
}

.news-index .nx-dot-news {
    color: var(--brand, #0F5C6B);
}

.news-index .nx-dot-notice {
    color: #B5822F;
}

/* 悬停时点周围浮出一圈淡光（box-shadow 环，不占位、不位移） */
.news-index .nx-item:hover .nx-dot-news {
    box-shadow: 0 0 0 3.5px rgba(15, 92, 107, .18);
}

.news-index .nx-item:hover .nx-dot-notice {
    box-shadow: 0 0 0 3.5px rgba(181, 130, 47, .22);
}

/* 头条「最新发布」标签里的同款色点（仅当头条在 7 天内才渲染）。
   标签改成 flex 排布，点在这里不吃列表用的负 margin */
.news-index .nx-hero-tag.is-fresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.news-index .nx-hero-tag .nx-dot {
    flex: 0 0 4px;
    width: 4px;
    height: 4px;
    margin-right: 0;
}

/* 标签内的点更小，环再收一档，否则会顶到标签的上下边、看着像双圈靶心 */
.news-index .nx-hero-tag .nx-dot.is-fresh::after {
    animation-name: nx-dot-breathe-tag;
}

@keyframes nx-dot-breathe-tag {
    0%,
    100% {
        transform: scale(1.35);
        opacity: .2;
    }

    50% {
        transform: scale(1.8);
        opacity: .45;
    }
}

/* 7 天内发布的新条目：色点外一圈缓慢涨缩的呼吸环。新闻区与通知区共用同一套规则，
   头条的「最新发布」标签也用同一个点（见下）。这里是全页唯一的动效。用「往复呼吸」而不是「扩散消失」——
   扩散式（scale 1→2.2 淡出）大半时间环是隐形的，读起来是闪一下，不是呼吸；
   往复式环始终可见（opacity .18~.42），只是缓慢涨缩，2.8s 一轮，不抢注意力。
   scale 上限 2.15 是量过的：环半径 8.6px < 点到标题的 9px，不会压到第一个字。
   类名用 is-fresh 而不是 nx-dot-new，避免与 nx-dot-news 成子串、grep 时误伤 */
.news-index .nx-dot.is-fresh {
    position: relative;
}

.news-index .nx-dot.is-fresh::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid currentColor;
    border-radius: 50%;
    animation: nx-dot-breathe 2.8s ease-in-out infinite;
}

@keyframes nx-dot-breathe {
    0%,
    100% {
        transform: scale(1.5);
        opacity: .18;
    }

    50% {
        transform: scale(1.9);
        opacity: .42;
    }
}

/* 窄屏版：幅度再收一档，避免环压到标题第一个字 */
@keyframes nx-dot-breathe-sm {
    0%,
    100% {
        transform: scale(1.35);
        opacity: .18;
    }

    50% {
        transform: scale(1.65);
        opacity: .42;
    }
}

/* 系统开了「减少动态效果」时定格在中位：信息还在，只是不动 */
@media (prefers-reduced-motion: reduce) {
    .news-index .nx-dot.is-fresh::after {
        animation: none;
        transform: scale(1.85);
        opacity: .3;
    }
}

.news-index .nx-link {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    color: var(--ink, #16202A);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-index .nx-link:hover,
.news-index .nx-link:focus {
    color: var(--brand, #0F5C6B);
}

/* 浏览量：眼睛图标 + 数字 + 「次」
   原来只有一个裸数字，右侧孤零零一串 4 位数，看不出是什么 */
.news-index .nx-views {
    flex: 0 0 84px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    font-size: 11.5px;
    color: var(--ink-3, #5C6A66);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.news-index .nx-views-num {
    color: var(--ink-2, #3D4A52);
}

.news-index .nx-views-unit {
    font-size: 11px;
    color: var(--muted, #8A9490);
}

/* 内联 SVG 图标基准样式（浏览量、头条 meta 共用） */
.news-index .nx-ico {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    color: var(--ink-3, #5C6A66);
    transition: color .16s ease;
}

.news-index .nx-item:hover .nx-ico {
    color: var(--brand, #0F5C6B);
}

.news-index .nx-item:hover .nx-views-num {
    color: var(--brand, #0F5C6B);
}

.news-index .nx-meta-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---------------------------------------------------------------- Pjax */
/* 翻页走 Pjax（点页码不整页刷新）。请求期间整块半透明，
   给一个「点下去有反应」的即时反馈，避免页面卡在原地没动静 */
.news-index .nx-pjax {
    transition: opacity .18s ease;
}

.news-index .nx-pjax.is-loading {
    opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
    .news-index .nx-pjax {
        transition: none;
    }
}

/* ---------------------------------------------------------------- 分页 */
/* 分页整条水平居中：用 flex 布局，顺带消掉 li 之间的 inline 空白间隙
   （Bootstrap 的 .pagination > li > a 是 float:left，不解除的话 li 会塌宽） */
.news-index .nx-pager {
    margin: 18px 0 0;
    text-align: center;
}

.news-index .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding-left: 0;
}

.news-index .pagination > li {
    display: block;
}

.news-index .pagination > li > a,
.news-index .pagination > li > span {
    position: relative;
    display: block;
    float: none;
    padding: 5px 11px;
    margin-left: -1px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-2, #3D4A52);
    background-color: var(--paper, #FFF);
    border: 1px solid var(--line, #E4E7E4);
}

.news-index .pagination > li:first-child > a,
.news-index .pagination > li:first-child > span {
    margin-left: 0;
    border-radius: 3px 0 0 3px;
}

.news-index .pagination > li:last-child > a,
.news-index .pagination > li:last-child > span {
    border-radius: 0 3px 3px 0;
}

.news-index .pagination > li > a:hover,
.news-index .pagination > li > a:focus {
    color: var(--brand, #0F5C6B);
    background-color: var(--brand-soft, #EAF1F0);
    border-color: var(--line, #E4E7E4);
}

.news-index .pagination > .active > a,
.news-index .pagination > .active > span,
.news-index .pagination > .active > a:hover {
    z-index: 2;
    color: #FFF;
    background-color: var(--brand, #0F5C6B);
    border-color: var(--brand, #0F5C6B);
    cursor: default;
}

.news-index .pagination > .disabled > span,
.news-index .pagination > .disabled > span:hover {
    color: var(--muted, #8A9490);
    background-color: var(--page, #F6F7F5);
    border-color: var(--line, #E4E7E4);
    cursor: default;
}

/* ---------------------------------------------------------------- 空状态 */
.news-index .nx-empty {
    padding: 34px 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--muted, #8A9490);
    border-bottom: 1px solid var(--line-soft, #F0F2F0);
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1199px) {
    .news-index .nx-hero-thumb {
        flex-basis: 250px;
        height: 156px;
    }
}

@media (max-width: 991px) {
    .news-index .nx-hero {
        flex-direction: column;
        gap: 14px;
    }

    .news-index .nx-hero-thumb {
        flex: none;
        width: 100%;
        height: 200px;
    }

    .news-index .nx-hero-desc {
        padding-bottom: 10px;
    }
}

@media (max-width: 767px) {
    .news-index .nx-hero-thumb {
        height: 168px;
    }

    .news-index .nx-hero-title {
        font-size: 16px;
    }

    .news-index .nx-hero {
        padding: 12px;
    }

    .news-index .nx-item {
        gap: 10px;
        padding-left: 8px;
    }

    .news-index .nx-date {
        flex-basis: 78px;
        font-size: 11px;
    }

    /* 窄屏放不下「次」，只留图标 + 数字，语义靠图标承担 */
    .news-index .nx-views {
        flex-basis: 62px;
        font-size: 11px;
    }

    .news-index .nx-views-unit {
        display: none;
    }

    /* gap 从 14 收到 10，色点的负 margin 跟着变，否则标题会被推远 */
    .news-index .nx-dot {
        margin-right: -5px;
    }

    /* 窄屏点到标题只有 8px 余量，呼吸环上限收到 1.85 倍（半径 7.4px）免得压字 */
    .news-index .nx-dot.is-fresh::after {
        animation-name: nx-dot-breathe-sm;
    }

    /* 头条 meta 与按钮挤在一行会换行，让按钮退到下一行右对齐 */
    .news-index .nx-meta {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .news-index .nx-hero-more {
        padding: 2px 9px;
        font-size: 11.5px;
    }
}