/* ============================================================
   新闻详情页排版美化层 news-beauty.css
   用法：在 news_city.css 之后引入，或直接粘贴到 news_city.css 末尾
   只优化排版/间距/可读性，不改变站点整体风格、头部与底部
   ============================================================ */

/* 主题色变量：改成你站点的主色即可全局生效 */
:root {
    --nb-accent: #1a5fb4;          /* 链接/强调色（站点主色） */
    --nb-text: #33373d;            /* 正文颜色（柔和黑，长时间阅读不刺眼） */
    --nb-text-sub: #8a94a6;        /* 次要文字（时间/作者等） */
    --nb-border: #e8ebf0;          /* 分隔线/卡片描边 */
    --nb-bg-soft: #f6f7f9;         /* 浅灰底（标签/引用块） */
    --nb-radius: 10px;
}

/* ---------- 面包屑：与 banner 之间拉开呼吸感 ---------- */
.breadcrumb {
    padding: 14px 0;
    font-size: 13px;
    color: var(--nb-text-sub);
}
.breadcrumb a { color: var(--nb-text-sub); text-decoration: none; }
.breadcrumb a:hover { color: var(--nb-accent); }

/* ---------- 文章区整体间距 ---------- */
.sub-news-section { padding: 8px 0 56px; }

/* 防止表格等宽内容在 grid/flex 布局下撑破页面（移动端关键） */
.sub-main, .sub-news-main, .sub-news-content { min-width: 0; }

/* ---------- 文章标题与信息行 ---------- */
.sub-news-header {
    padding-bottom: 20px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--nb-border);
}
.sub-news-header h1 {
    font-size: 26px;
    line-height: 1.45;
    font-weight: 700;
    color: #1d2129;
    margin: 0 0 14px;
    letter-spacing: 0.01em;
}
.sub-news-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    font-size: 13px;
    color: var(--nb-text-sub);
}
.sub-news-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.6;
}
.sub-news-meta svg {
    width: 15px;
    height: 15px;
    flex: none;
    opacity: 0.75;
}

/* ============================================================
   正文排版（核心：字号 / 行高 / 段落节奏 / 阅读宽度）
   ============================================================ */
.sub-news-content {
    max-width: 760px;              /* 限定行长，每行约 30~38 个汉字，最舒适 */
    font-size: 17px;
    line-height: 1.9;              /* 中文长文黄金行高 */
    color: var(--nb-text);
    letter-spacing: 0.015em;
    word-break: break-word;
    overflow-wrap: break-word;
}
.sub-news-content p { margin: 0 0 1.5em; }
.sub-news-content > *:last-child { margin-bottom: 0; }

/* 正文内各级标题：层级清晰、间距上松下紧 */
.sub-news-content h2,
.sub-news-content h3,
.sub-news-content h4 {
    color: #1d2129;
    font-weight: 600;
    line-height: 1.5;
}
.sub-news-content h2 {
    font-size: 21px;
    margin: 2em 0 0.9em;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--nb-border);
}
.sub-news-content h3 { font-size: 18px; margin: 1.8em 0 0.8em; }
.sub-news-content h4 { font-size: 16px; margin: 1.6em 0 0.7em; }

/* 列表 */
.sub-news-content ul,
.sub-news-content ol {
    margin: 0 0 1.5em;
    padding-left: 1.5em;
}
.sub-news-content li { margin-bottom: 0.5em; }
.sub-news-content li::marker { color: var(--nb-accent); }

/* 图片：自适应 + 圆角 + 居中 */
.sub-news-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.6em auto;
    border-radius: 8px;
}

/* 链接 */
.sub-news-content a {
    color: var(--nb-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}
.sub-news-content a:hover { border-bottom-color: var(--nb-accent); }

/* 加粗不糊成一团 */
.sub-news-content strong, .sub-news-content b { color: #1d2129; font-weight: 600; }

/* 引用块 */
.sub-news-content blockquote {
    margin: 0 0 1.5em;
    padding: 14px 18px;
    background: var(--nb-bg-soft);
    border-radius: 8px;
    color: #4e5563;
    font-size: 0.95em;
}
.sub-news-content blockquote p:last-child { margin-bottom: 0; }

/* 表格：带斑马纹，窄屏可横向滑动 */
.sub-news-content table {
    width: 100%;
    margin: 0 0 1.5em;
    border-collapse: collapse;
    font-size: 15px;
    display: block;
    overflow-x: auto;
}
.sub-news-content th, .sub-news-content td {
    padding: 10px 14px;
    border: 1px solid var(--nb-border);
    text-align: left;
    white-space: nowrap;
}
.sub-news-content th { background: var(--nb-bg-soft); font-weight: 600; }
.sub-news-content tr:nth-child(even) td { background: #fafbfc; }

.sub-news-content hr {
    border: none;
    border-top: 1px solid var(--nb-border);
    margin: 2em 0;
}

/* ---------- 文章标签：统一小胶囊 ---------- */
.sub-news-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--nb-border);
}
.sub-news-tags-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--nb-text-sub);
}
.sub-news-tag-item {
    display: inline-block;
    padding: 5px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #4e5563;
    background: var(--nb-bg-soft);
    border-radius: 999px;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.sub-news-tag-item:hover { background: var(--nb-accent); color: #fff; }

/* ---------- 上一篇 / 下一篇：双栏卡片 ---------- */
.sub-prenext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 20px;
}
.sub-prenext-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    background: var(--nb-bg-soft);
    border-radius: var(--nb-radius);
    transition: background .2s;
    min-width: 0;
}
.sub-prenext-item:hover { background: #eef1f6; }
.sub-prenext-next { text-align: right; }
.sub-prenext-label {
    font-size: 12px;
    color: var(--nb-text-sub);
    letter-spacing: 0.05em;
}
.sub-prenext-title,
.sub-prenext-title a {
    font-size: 14px;
    line-height: 1.6;
    color: #1d2129;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.sub-prenext-item:hover .sub-prenext-title,
.sub-prenext-item:hover .sub-prenext-title a { color: var(--nb-accent); }

/* ---------- 城市推荐：紧凑胶囊流 ---------- */
.sub-city-recommend { margin-top: 40px; }
.sub-city-recommend-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 17px;
    font-weight: 600;
    color: #1d2129;
    margin: 0 0 16px;
}
.sub-city-recommend-title svg { color: var(--nb-accent); }
.sub-city-recommend-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.sub-city-recommend-item {
    padding: 6px 14px;
    font-size: 13px;
    color: #4e5563;
    background: #fff;
    border: 1px solid var(--nb-border);
    border-radius: 999px;
    text-decoration: none;
    transition: all .2s;
}
.sub-city-recommend-item:hover {
    color: var(--nb-accent);
    border-color: var(--nb-accent);
}

/* ---------- 相关新闻 ---------- */
.sub-related { margin-top: 44px; }
.sub-related-title {
    font-size: 17px;
    font-weight: 600;
    color: #1d2129;
    margin: 0 0 18px;
}
.sub-related .news-card {
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius);
    overflow: hidden;
    background: #fff;
    transition: box-shadow .25s;
}
.sub-related .news-card:hover { box-shadow: 0 6px 20px rgba(29, 33, 41, .08); }
.sub-related .news-card-img { overflow: hidden; }
.sub-related .news-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sub-related .news-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
    color: #1d2129;
    text-decoration: none;
    font-weight: 500;
}
.sub-related .news-card-title:hover { color: var(--nb-accent); }

/* ============================================================
   右侧侧栏
   ============================================================ */
.sub-sidebar .sub-widget {
    background: #fff;
    border: 1px solid var(--nb-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 22px;
}
.sub-sidebar .sub-widget-title {
    font-size: 16px;
    font-weight: 600;
    color: #1d2129;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--nb-border);
}
.sub-sidebar .sub-widget > *:last-child { margin-bottom: 0; }

/* 产品推荐：两列图文 */
.sub-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.sub-product-link { text-decoration: none; display: block; }
.sub-product-img {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--nb-bg-soft);
    margin-bottom: 8px;
}
.sub-product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sub-product-name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
    color: #33373d;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sub-product-link:hover .sub-product-name { color: var(--nb-accent); }

/* 标签云 */
.sub-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.sub-tag-cloud-item {
    padding: 4px 12px;
    font-size: 12.5px;
    color: #4e5563;
    background: var(--nb-bg-soft);
    border-radius: 6px;
    text-decoration: none;
    transition: all .2s;
}
.sub-tag-cloud-item:hover { background: var(--nb-accent); color: #fff; }
.sub-tag-cloud-item.hot { color: var(--nb-accent); font-weight: 500; }
.sub-tag-cloud-item.hot:hover { color: #fff; }

/* 在线咨询表单 */
.sub-form .sub-form-group { margin-bottom: 12px; }
.sub-form input[type="text"],
.sub-form input[type="tel"],
.sub-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--nb-text);
    background: #fff;
    border: 1px solid #dde1e8;
    border-radius: 8px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    font-family: inherit;
}
.sub-form textarea { resize: vertical; min-height: 96px; }
.sub-form input:focus, .sub-form textarea:focus {
    border-color: var(--nb-accent);
    box-shadow: 0 0 0 3px rgba(26, 95, 180, .12);
}
.sub-form-captcha { display: flex; gap: 10px; align-items: center; }
.sub-captcha-input { flex: 1; min-width: 0; }
.sub-captcha-img {
    height: 42px;
    border-radius: 8px;
    border: 1px solid #dde1e8;
    cursor: pointer;
    flex: none;
}
.sub-form-submit {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #fff;
    background: var(--nb-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity .2s;
}
.sub-form-submit:hover { opacity: .9; }

/* 最新更新列表 */
.sub-latest-list { list-style: none; margin: 0; padding: 0; }
.sub-latest-item { border-bottom: 1px dashed var(--nb-border); }
.sub-latest-item:last-child { border-bottom: none; }
.sub-latest-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    text-decoration: none;
}
.sub-latest-text {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #33373d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sub-latest-link:hover .sub-latest-text { color: var(--nb-accent); }
.sub-latest-date {
    flex: none;
    font-size: 12px;
    color: var(--nb-text-sub);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   移动端适配（百度体验考核重点）
   ============================================================ */
@media (max-width: 768px) {
    .sub-news-section { padding: 4px 0 40px; }
    .sub-news-header h1 { font-size: 21px; }
    .sub-news-header { padding-bottom: 16px; margin-bottom: 22px; }
    .sub-news-meta { gap: 6px 16px; font-size: 12.5px; }

    .sub-news-content { font-size: 16px; line-height: 1.85; max-width: 100%; }
    .sub-news-content h2 { font-size: 19px; }
    .sub-news-content h3 { font-size: 17px; }

    body .sub-prenext, body .sub-prenext.sub-prenext-beauty { grid-template-columns: 1fr !important; }
    body .sub-prenext-next, body .sub-prenext-beauty .sub-prenext-next { text-align: left !important; align-items: flex-start !important; }

    .sub-related .news-list-grid { grid-template-columns: 1fr 1fr !important; }
    .sub-related .news-card-img { height: 120px !important; }

    .sub-sidebar .sub-widget { padding: 16px; margin-bottom: 16px; }
}

@media (max-width: 480px) {
    .sub-related .news-list-grid { grid-template-columns: 1fr !important; }
    .sub-related .news-card-img { height: 160px !important; }
}

/* ============================================================
   补丁：上一篇/下一篇 强制复位
   旧模板 sub-prenext-beauty 里有绝对定位/箭头伪元素等样式，
   与新卡片布局冲突导致标题跑出卡片，这里全部归位
   ============================================================ */
.sub-prenext,
.sub-prenext.sub-prenext-beauty {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin: 20px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    height: auto !important;
    overflow: visible !important;
}
.sub-prenext-item,
.sub-prenext-beauty .sub-prenext-item {
    position: static !important;
    float: none !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 16px 18px !important;
    margin: 0 !important;
    background: var(--nb-bg-soft) !important;
    border: none !important;
    border-radius: var(--nb-radius) !important;
    text-align: left !important;
    transition: background .2s;
}
.sub-prenext-item:hover { background: #eef1f6 !important; }
.sub-prenext-next,
.sub-prenext-beauty .sub-prenext-next { align-items: flex-end !important; text-align: right !important; }

.sub-prenext-label,
.sub-prenext-beauty .sub-prenext-label {
    position: static !important;
    float: none !important;
    transform: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--nb-text-sub) !important;
    letter-spacing: 0.05em;
}
.sub-prenext-title,
.sub-prenext-title a,
.sub-prenext-beauty .sub-prenext-title,
.sub-prenext-beauty .sub-prenext-title a {
    position: static !important;
    float: none !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #1d2129 !important;
    text-decoration: none !important;
    text-align: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.sub-prenext-item:hover .sub-prenext-title,
.sub-prenext-item:hover .sub-prenext-title a { color: var(--nb-accent) !important; }

/* 清掉旧样式挂在伪元素上的箭头/装饰 */
.sub-prenext-item::before, .sub-prenext-item::after,
.sub-prenext-label::before, .sub-prenext-label::after,
.sub-prenext-title::before, .sub-prenext-title::after,
.sub-prenext-title a::before, .sub-prenext-title a::after {
    content: none !important;
}

/* 某一侧没有文章时：隐藏空卡片，剩下的一侧占满整行
   （叠满类名提高优先级，确保压过上面 flex 卡片规则与旧模板样式） */
.sub-prenext .sub-prenext-item:not(:has(a)),
.sub-prenext.sub-prenext-beauty .sub-prenext-item:not(:has(a)) {
    display: none !important;
}
.sub-prenext:has(.sub-prenext-item:not(:has(a))),
.sub-prenext.sub-prenext-beauty:has(.sub-prenext-item:not(:has(a))) {
    grid-template-columns: 1fr !important;
}

/* ============================================================
   补丁2：上下篇冗余文字 & 标签区旧样式 二次修复
   ============================================================ */
/* 标签区：去掉旧样式的浅蓝底卡片和蓝色左边条，恢复简洁分隔行 */
.sub-news-tags,
.sub-main .sub-news-tags,
div.sub-news-tags {
    background: none !important;
    border: none !important;
    border-top: 1px solid var(--nb-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 24px 0 0 !important;
    margin: 32px 0 0 !important;
}

/* 上下篇：DedeCMS 的 prenext 标签会自动输出 "上篇：/下篇：" 文本节点，
   用 font-size:0 把这些裸文本藏掉，只保留链接本身 */
.sub-prenext .sub-prenext-title,
.sub-prenext.sub-prenext-beauty .sub-prenext-title,
.sub-prenext .sub-prenext-item .sub-prenext-title {
    font-size: 0 !important;
    line-height: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}
/* 链接恢复正常字号并占满卡片，标题不再被旧样式压窄 */
.sub-prenext .sub-prenext-title a,
.sub-prenext.sub-prenext-beauty .sub-prenext-title a,
.sub-prenext .sub-prenext-item .sub-prenext-title a {
    font-size: 14px !important;
    line-height: 1.6 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #1d2129 !important;
    text-decoration: none !important;
}
.sub-prenext .sub-prenext-item:hover .sub-prenext-title a { color: var(--nb-accent) !important; }

/* 卡片内容垂直居中、间距收紧，避免标签和标题之间空洞 */
.sub-prenext .sub-prenext-item,
.sub-prenext.sub-prenext-beauty .sub-prenext-item {
    justify-content: center !important;
    gap: 4px !important;
}

/* ============================================================
   补丁3：上下篇 PC 宽度修正 + 整页移动端适配
   ============================================================ */
/* PC：旧样式可能给 .sub-prenext 容器或卡片限定了宽度（60%/固定px），
   导致两张卡片挤在一起中间大片空白，这里强制撑满 */
.sub-prenext,
.sub-prenext.sub-prenext-beauty {
    width: 100% !important;
    max-width: none !important;
}
.sub-prenext .sub-prenext-item,
.sub-prenext.sub-prenext-beauty .sub-prenext-item {
    width: 100% !important;
    max-width: none !important;
}

/* 整页移动端适配：旧模板布局是固定宽度（container/主栏/侧栏写死像素），
   窄屏下强制改流式 + 主侧栏上下堆叠 */
@media (max-width: 992px) {
    html, body { max-width: 100% !important; overflow-x: hidden !important; }

    .container,
    .sub-news-section .container,
    .breadcrumb .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }

    /* 主栏/侧栏：不管旧样式用 float、flex 还是固定宽度，统一堆叠 */
    .sub-layout,
    .sub-news-section .sub-layout,
    .container .sub-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .sub-layout .sub-main,
    .sub-layout .sub-sidebar,
    .sub-news-section .sub-main,
    .sub-news-section .sub-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    .sub-sidebar { margin-top: 24px !important; }

    /* 文章白卡内边距收紧 */
    .sub-news-main { padding: 20px 16px !important; box-sizing: border-box !important; }

    /* Banner 文字别顶着边 */
    .sub-banner-content { padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box !important; }

    /* 侧栏产品推荐保持两列小图 */
    .sub-product-grid { grid-template-columns: 1fr 1fr !important; }
}

/* 超小屏：产品推荐也保持两列（图小字短，两列仍可读），相关新闻单列 */
@media (max-width: 480px) {
    .sub-news-main { padding: 16px 14px !important; }
}