/* ============================================================
   新闻模块样式 —— news.php（列表） + news-detail.php（详情）共用
   —— 于 style.css 之后加载，用于页面级设置
   配色沿用站内主色（#1A56DB 蓝 / #F9A826 橙）
   ============================================================ */

:root {
    --primary: #1A56DB;
    --primary-dark: #1040B0;
    --primary-light: #60A5FA;
    --secondary: #F9A826;
    --light: #F5F7FB;
    --dark: #1F2937;
    --gray: #6B7280;
    --line: #E5E9F2;
    --white: #FFFFFF;
    --radius: 14px;
    --shadow: 0 6px 20px rgba(26, 86, 219, .07);
    --shadow-hover: 0 14px 34px rgba(26, 86, 219, .16);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--dark);
    background: var(--white);
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: 56px 0 72px; }

/* ============================================================
   Banner
   ============================================================ */
.news-banner {
    position: relative;
    background: linear-gradient(135deg, #0B1F4B 0%, #14357E 55%, #1A56DB 100%);
    color: #fff;
    overflow: hidden;
}
.news-banner::after {
    content: '';
    position: absolute;
    right: -160px; top: -120px;
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(96, 165, 250, .28) 0%, rgba(96, 165, 250, 0) 70%);
    pointer-events: none;
}
.news-banner .container { position: relative; z-index: 1; padding-top: 118px; padding-bottom: 58px; }
.news-banner h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 900;
    line-height: 1.32;
    margin-bottom: 14px;
}
.news-banner p {
    font-size: 1.02rem;
    color: rgba(255, 255, 255, .8);
    max-width: 760px;
}
/* 详情页版式：正文 + 侧栏两栏，整体落在站点内容轴线（left 140 / 宽 1160）上，
   与列表页及其它页面左右对齐；正文列 616–796px，中文约 36–46 字/行。
   右侧预留：右下角固定客服面板（200px 宽、桌面端 >768px 常驻）会盖住内容，
   这里按视口宽度预留它的占位，避免正文/侧栏文字被压住。 */
.nd-layout { display: flex; align-items: flex-start; gap: 44px; }
.nd-main-col { flex: 1 1 auto; min-width: 0; }
.nd-side { flex: 0 0 320px; width: 320px; position: sticky; top: 88px; }

/* 宽屏：真正的两栏（再窄就不够放侧栏了） */
@media (min-width: 1240px) {
    .nd-layout { padding-right: clamp(0px, calc(800px - 50vw), 180px); }
}
/* 中窄屏（769–1239）：单栏，侧栏移到正文之后，正文右侧仍预留客服面板占位 */
@media (min-width: 769px) and (max-width: 1239px) {
    .nd-layout { display: block; }
    .nd-side { width: auto; position: static; margin-top: 38px; }
    .nd-main-col, .nd-side { padding-right: 220px; }
}
/* 手机：面板默认收起，无需预留 */
@media (max-width: 768px) {
    .nd-layout { display: block; }
    .nd-side { width: auto; position: static; margin-top: 32px; }
}

.news-banner-sm .container { padding-top: 106px; padding-bottom: 46px; }
.news-banner-sm h1 {
    font-size: clamp(1.42rem, 2.6vw, 1.98rem);
    line-height: 1.46;
    letter-spacing: -.01em;
    margin-bottom: 12px;
}
.news-banner-sm .news-sub {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .75);
    margin-bottom: 18px;
}

/* 面包屑 */
.news-crumb {
    font-size: .86rem;
    color: rgba(255, 255, 255, .62);
    margin-bottom: 16px;
}
.news-crumb a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.news-crumb a:hover { color: #fff; text-decoration: underline; }
.news-crumb .sep { margin: 0 8px; opacity: .5; }

/* 元信息 */
.news-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 4px; }
.news-meta .nm-item {
    font-size: .85rem;
    color: rgba(255, 255, 255, .78);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    padding: 4px 12px;
    border-radius: 100px;
}
.news-meta .nm-ico {
    display: inline-block;
    margin-right: 7px;
    padding-right: 8px;
    border-right: 1px solid rgba(255, 255, 255, .24);
    color: rgba(255, 255, 255, .52);
    font-weight: 600;
    letter-spacing: .04em;
}
/* 栏目名链到该栏目的列表页 */
.news-meta .nm-item a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .38);
    transition: color .2s, border-color .2s;
}
.news-meta .nm-item a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

/* ============================================================
   分类筛选
   ============================================================ */
.news-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.news-filter a {
    display: inline-block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--gray);
    background: #fff;
    border: 1px solid var(--line);
    padding: 8px 18px;
    border-radius: 100px;
    text-decoration: none;
    transition: all .25s;
    white-space: nowrap;
}
.news-filter a:hover {
    color: var(--primary);
    border-color: var(--primary-light);
    transform: translateY(-1px);
}
.news-filter a.on {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(26, 86, 219, .26);
}

/* 条数提示 */
.news-count { font-size: .88rem; color: var(--gray); margin-bottom: 18px; }
.news-count b { color: var(--primary); font-weight: 800; }

/* ============================================================
   列表网格 + 卡片
   ============================================================ */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.news-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .28s, box-shadow .28s, border-color .28s;
}
.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-light);
}

/* 封面：padding-top 撑比例，兼容性优于 aspect-ratio */
.nc-cover {
    position: relative;
    padding-top: 62.5%;
    background: #EEF3FC;
    overflow: hidden;
}
.nc-cover img {
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .45s;
}
.news-card:hover .nc-cover img { transform: scale(1.05); }

/* 通用封面底图（无图时即封面主体）：品牌蓝渐变 + 斜纹 + 光晕 + 圆环装饰
   标题直接写在底图上；有图时被 img 盖住，仅作兜底 */
.nc-ph {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0; /* 建立层叠上下文，避免内部 z-index 溢出盖住 img */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 84% 12%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 46%),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0, rgba(255, 255, 255, .07) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 13px),
        linear-gradient(140deg, #2E6BE6 0%, #1A56DB 48%, #0E3E9E 100%);
}
.nc-ph::after {
    content: '';
    position: absolute;
    right: -48px;
    bottom: -52px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .26);
    box-shadow: 0 0 0 22px rgba(255, 255, 255, .07);
    transition: transform .45s;
}
.news-card:hover .nc-ph::after { transform: scale(1.14); }

.nc-ph-brand {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .72);
}
.nc-ph-title {
    position: relative;
    z-index: 1;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.62;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 图片失效收起后，卡片下方不再重复标题 */
.news-card.img-failed .nc-body h3 { display: none; }
/* 无图卡片：摘要是卡片下方唯一正文，多留几行 */
.news-card--nocover .nc-desc { -webkit-line-clamp: 4; }

.nc-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 20px 18px;
}
.nc-body h3 {
    font-size: 1.06rem;
    font-weight: 800;
    line-height: 1.5;
    color: var(--dark);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card:hover .nc-body h3 { color: var(--primary); }
.nc-long {
    font-size: .84rem;
    color: var(--primary);
    line-height: 1.6;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nc-desc {
    font-size: .88rem;
    color: var(--gray);
    line-height: 1.75;
    flex: 1;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nc-foot { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); }
.nc-more { font-size: .84rem; font-weight: 700; color: var(--primary); }
.nc-more::after { content: ' ›'; }

/* ============================================================
   分页
   ============================================================ */
.news-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}
.news-pager a, .news-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--dark);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    text-decoration: none;
    transition: all .22s;
}
.news-pager a:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
}
.news-pager .np-num.on {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(26, 86, 219, .26);
}
.news-pager .np-disabled { color: #BFC7D5; background: #F7F9FC; cursor: not-allowed; }
.news-pager .np-gap { border: none; background: transparent; color: #BFC7D5; min-width: 20px; padding: 0; }

/* ============================================================
   空状态 / 按钮
   ============================================================ */
.news-empty {
    text-align: center;
    padding: 70px 20px;
    background: #FAFBFE;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}
.news-empty p { color: var(--gray); font-size: .96rem; margin-bottom: 14px; }
.news-empty p:last-child { margin-bottom: 0; }

.news-btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 100px;
    text-decoration: none;
    transition: all .25s;
    box-shadow: 0 8px 20px rgba(26, 86, 219, .24);
}
.news-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(26, 86, 219, .32); }
.news-btn-ghost {
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--primary-light);
    box-shadow: none;
}
.news-btn-ghost:hover { background: #F5F8FF; box-shadow: none; }

/* ============================================================
   详情页正文
   ============================================================ */
.nd-main { padding: 46px 0 64px; }

.news-article { max-width: none; margin: 0; }
.na-cover { margin: 0 0 32px; }
.na-cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

/* 正文是中文长文：列宽收窄到 ~38 字/行，行高 1.88，段距 1.5em */
.na-body {
    font-size: 1.06rem;
    line-height: 1.88;
    color: #374151;
    letter-spacing: .012em;
}
.na-body p { margin: 0 0 1.5em; }
.na-body p:last-child { margin-bottom: 0; }
/* 首段做引文式起手：略大略深（仅当正文第一段确实排在开头时才生效） */
.na-body > p:first-child {
    font-size: 1.12rem;
    line-height: 1.82;
    color: #1F2937;
}

/* 小标题：由"段首加粗短句 + <br>"自动提升而来，带左侧色条 */
.na-h,
.na-body h2,
.na-body h3,
.na-body h4 {
    color: var(--dark);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: -.005em;
}
.na-h, .na-body h2 { font-size: 1.3rem; }
.na-body h3 { font-size: 1.16rem; }
.na-body h4 { font-size: 1.04rem; }
.na-h, .na-body h2 {
    position: relative;
    margin: 46px 0 18px;
    padding-left: 16px;
}
.na-h::before, .na-body h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: .18em;
    width: 4px;
    height: .96em;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.na-body h3 { margin: 34px 0 14px; }
.na-body h4 { margin: 28px 0 12px; }
.na-h:first-child, .na-body h2:first-child, .na-body h3:first-child { margin-top: 0; }

/* 行内加粗降一档权重，避免和小标题抢视线（后台正文常大量加粗关键词） */
.na-body strong, .na-body b { color: #111827; font-weight: 600; }

.na-body img { display: block; max-width: 100%; height: auto; margin: 28px auto; border-radius: 12px; }
.na-fig { margin: 30px 0; text-align: center; }
.na-fig img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 12px; }
.na-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.na-body a:hover { color: var(--primary-dark); }
.na-body ul, .na-body ol { margin: 0 0 1.5em; padding-left: 1.4em; }
.na-body li { margin-bottom: .55em; }
.na-body blockquote {
    margin: 30px 0;
    padding: 18px 24px;
    background: #F7F9FE;
    border-left: 4px solid var(--primary);
    border-radius: 0 12px 12px 0;
    color: #4B5563;
}
.na-body blockquote p:last-child { margin-bottom: 0; }
.na-body table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 26px 0; font-size: .95rem; }
.na-body th, .na-body td { border: 1px solid var(--line); padding: 11px 14px; text-align: left; }
.na-body th { background: #F7F9FE; font-weight: 700; }
.na-body hr { border: none; border-top: 1px solid var(--line); margin: 36px 0; }

/* 正文末尾的 #话题 行 → 标签组 */
.na-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 0; }
.na-tag {
    display: inline-block;
    padding: 5px 14px;
    font-size: .84rem;
    color: var(--primary);
    background: rgba(26, 86, 219, .07);
    border: 1px solid rgba(26, 86, 219, .14);
    border-radius: 100px;
}

.news-article-foot {
    max-width: none;
    margin: 48px 0 0;
    padding-top: 30px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

/* 侧栏卡片 */
.nd-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 20px 18px;
}
.nd-card + .nd-card { margin-top: 18px; }
.nd-card-h {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -.005em;
    margin-bottom: 14px;
}
.nd-card-h::before {
    content: '';
    width: 4px;
    height: 15px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.nd-news { list-style: none; margin: 0; padding: 0; }
.nd-news li + li { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.nd-news a {
    display: block;
    font-size: .92rem;
    line-height: 1.6;
    color: #374151;
    text-decoration: none;
    transition: color .2s;
}
.nd-news a:hover { color: var(--primary); }
.nd-all {
    display: inline-block;
    margin-top: 16px;
    font-size: .86rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}
.nd-all:hover { color: var(--primary-dark); }

.nd-cates { display: flex; flex-wrap: wrap; gap: 8px; }
.nd-cates a {
    font-size: .83rem;
    padding: 5px 12px;
    border-radius: 100px;
    background: #F4F7FE;
    color: #4B5563;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all .2s;
}
.nd-cates a:hover { color: var(--primary); background: #fff; border-color: var(--primary-light); }

.nd-card-cta {
    background: linear-gradient(135deg, #0B1F4B 0%, #14357E 55%, #1A56DB 100%);
    border: 0;
    color: #fff;
    text-align: center;
    padding: 24px 20px;
}
.nd-cta-t { font-size: .95rem; color: rgba(255, 255, 255, .78); margin-bottom: 6px; }
.nd-cta-d { font-size: 1.3rem; font-weight: 800; letter-spacing: .01em; color: #fff; margin-bottom: 16px; }
.nd-card-cta .news-btn {
    display: block;
    padding: 11px 18px;
    font-size: .92rem;
    background: #fff;
    color: var(--primary);
    box-shadow: none;
}
.nd-card-cta .news-btn:hover { background: #F5F8FF; transform: none; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1024px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (max-width: 768px) {
    /* 避开 fixed header（约 60px） */
    .news-banner .container { padding-top: 82px; padding-bottom: 36px; }
    .news-banner-sm .container { padding-top: 78px; padding-bottom: 34px; }
    .news-banner::after { display: none; }
    .news-banner h1 { font-size: 1.5rem; }
    .news-banner p { font-size: .92rem; }
    .news-banner-sm h1 { font-size: 1.28rem; line-height: 1.44; }
    .news-banner-sm .news-sub { font-size: .92rem; line-height: 1.65; }
    .news-meta .nm-item { font-size: .8rem; padding: 3px 10px; }

    .section { padding: 34px 0 48px; }

    /* 分类条改为横向滚动，避免换行占高 */
    .news-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 14px;
        margin-bottom: 20px;
        scrollbar-width: none;
    }
    .news-filter::-webkit-scrollbar { display: none; }
    .news-filter a { padding: 7px 14px; font-size: .84rem; }

    .news-grid { grid-template-columns: 1fr; gap: 16px; }
    .nc-cover { padding-top: 56%; }
    .nc-ph { padding: 20px 18px; }
    .nc-ph-brand { font-size: .66rem; margin-bottom: 8px; }
    .nc-ph-title { font-size: 1.05rem; }
    .nc-ph::after { right: -56px; bottom: -60px; }
    .nc-body { padding: 16px 16px 14px; }
    .nc-body h3 { font-size: 1rem; }
    .nc-desc { -webkit-line-clamp: 2; }
    .news-card--nocover .nc-desc { -webkit-line-clamp: 3; }

    .news-pager { gap: 6px; margin-top: 28px; }
    .news-pager a, .news-pager span { min-width: 36px; height: 36px; padding: 0 9px; font-size: .84rem; border-radius: 9px; }

    .news-empty { padding: 48px 16px; }
    .news-btn { padding: 11px 22px; font-size: .9rem; }

    .nd-main { padding: 30px 0 44px; }
    .na-body { font-size: 1rem; line-height: 1.86; letter-spacing: .008em; }
    .na-body > p:first-child { font-size: 1.04rem; line-height: 1.8; }
    .na-h, .na-body h2 { font-size: 1.14rem; margin: 34px 0 14px; padding-left: 13px; }
    .na-body h3 { font-size: 1.04rem; }
    .na-cover { margin-bottom: 22px; }
    .na-cover img, .na-body img, .na-fig img { border-radius: 10px; }
    .news-article-foot { margin-top: 34px; padding-top: 24px; }
    .news-article-foot .news-btn { flex: 1 1 100%; text-align: center; }

    .nd-card { padding: 18px 16px 16px; }
    .nd-card + .nd-card { margin-top: 14px; }
}