/* ==========================================================================
   关投强 - 媒体资讯页
   ========================================================================== */

.news-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; }

.news-cat-tabs {
    display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap;
    padding: 16px; background: #fff; border-radius: var(--radius-md); border: 1px solid var(--c-line);
}
.news-cat-tabs a, .news-cat-tabs button {
    padding: 8px 16px; border-radius: 18px; font-size: 14px;
    color: var(--c-text-sub); transition: all .2s;
    background: none; border: 0; cursor: pointer; line-height: 1.2;
    font-family: inherit; white-space: nowrap;
}
.news-cat-tabs a:hover, .news-cat-tabs button:hover,
.news-cat-tabs a.active, .news-cat-tabs button.active { background: var(--c-primary-light); color: var(--c-primary); font-weight: 500; }
/* 焦点圈：分类 chip 是 button，末尾的「常见问题（FAQ）」是 <a>（跳转入口）⇒ 两者都要有 */
.news-cat-tabs a:focus-visible,
.news-cat-tabs button:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* 筛选后的空状态 */
.news-empty {
    padding: 72px 24px; text-align: center;
    background: #fff; border: 1px dashed var(--c-line); border-radius: var(--radius-lg);
}
.news-empty .news-empty-icon { font-size: 40px; display: block; margin-bottom: 12px; opacity: .65; }
.news-empty p { font-size: 14px; color: var(--c-text-mute); }

/* 分页按钮样式见 assets/css/common.css 的 .pagination（全站唯一真源） */

.news-list { display: flex; flex-direction: column; gap: 24px; }
.news-item {
    display: grid; grid-template-columns: 240px 1fr; gap: 24px;
    background: #fff; border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--c-line); transition: all .3s; color: inherit;
}
.news-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: transparent; }
/* 分类筛选：非当前分类的条目隐藏（specificity 高于 .news-item，能覆盖 display:grid） */
.news-item[hidden] { display: none; }
/* 筛选后重新出现的条目淡入（只动 opacity，避免覆盖 hover 的 transform） */
.news-item:not([hidden]) { animation: newsIn .25s ease both; }
@keyframes newsIn { from { opacity: 0; } to { opacity: 1; } }
.news-cover {
    height: 100%; min-height: 180px; color: #fff;
    background: linear-gradient(135deg, #0052D9, #266FE8);
    position: relative; overflow: hidden;
}
/* 资讯封面改为按内容生成的 banner 图（2026-09-21），不再用纯色块+emoji */
.news-cover img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.news-cover::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(160deg, rgba(16,42,100,.60) 0%, rgba(0,82,217,.22) 55%, rgba(0,31,79,.38) 100%);
}
.news-item:nth-child(2) .news-cover { background: linear-gradient(135deg, #F19500, #FFC24D); }
.news-item:nth-child(3) .news-cover { background: linear-gradient(135deg, #00A870, #43C69B); }
.news-item:nth-child(4) .news-cover { background: linear-gradient(135deg, #5A4FCF, #9E97F5); }
.news-item:nth-child(5) .news-cover { background: linear-gradient(135deg, #0C7CE2, #6BB6F5); }
.news-item:nth-child(6) .news-cover { background: linear-gradient(135deg, #E0548F, #FFA3C8); }
.news-item:nth-child(7) .news-cover { background: linear-gradient(135deg, #101F4F, #2B4A8F); }
.news-item:nth-child(8) .news-cover { background: linear-gradient(135deg, #F19500, #43C69B); }
.news-cover .cat-tag {
    position: absolute; left: 16px; top: 16px; z-index: 2;
    background: rgba(255,255,255,.2); color: #fff;
    font-size: 12px; padding: 4px 12px; border-radius: 10px; backdrop-filter: blur(8px);
}
.news-body { padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.news-body .meta {
    display: flex; gap: 16px; font-size: 13px; color: var(--c-text-mute); margin-bottom: 12px;
}
.news-body h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; line-height: 1.5; }
.news-body p { font-size: 14px; color: var(--c-text-sub); line-height: 1.7; margin-bottom: 16px; }
.news-foot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.news-foot .read { color: var(--c-primary); font-weight: 500; }

/* 侧栏 */
.widget {
    background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
    padding: 24px; margin-bottom: 24px;
}
.widget h4 {
    font-size: 16px; font-weight: 700; margin-bottom: 20px;
    padding-bottom: 12px; border-bottom: 2px solid var(--c-primary);
    display: inline-block;
}

/* 侧栏 · 媒体发稿平台 banner（引导注册发稿后台） */
.side-promo {
    position: relative; overflow: hidden; text-align: center;
    background: linear-gradient(135deg, #0052D9, #266FE8);
    color: #fff; border: 0;
}
.side-promo::before, .side-promo::after {
    content: ""; position: absolute; border-radius: 50%;
    background: rgba(255,255,255,.12); pointer-events: none;
}
.side-promo::before { width: 140px; height: 140px; right: -48px; top: -48px; }
.side-promo::after { width: 90px; height: 90px; left: -30px; bottom: -34px; }
.side-promo-icon {
    width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px;
    background: rgba(255,255,255,.16);
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 1;
}
.side-promo-icon svg { width: 28px; height: 28px; }
.side-promo h4 {
    color: #fff; border-bottom: 0; padding-bottom: 0;
    font-size: 18px; margin-bottom: 8px;
    position: relative; z-index: 1;
}
.side-promo-desc {
    color: rgba(255,255,255,.88); font-size: 13px; margin-bottom: 18px;
    position: relative; z-index: 1;
}
.side-promo-btn {
    background: #fff; color: var(--c-primary); font-weight: 700;
    border-radius: 999px; padding: 10px 34px;
    position: relative; z-index: 1;
}
.side-promo-btn:hover { background: #F2F6FF; color: var(--c-primary); }

/* 底部 CTA 留资表单（您的称呼 + 联系电话 + 请联系我） */
.cta-form { display: flex; justify-content: center; gap: 12px; max-width: 620px; margin: 0 auto; }
.cta-form input {
    flex: 1; min-width: 0; height: 52px; padding: 0 20px;
    border-radius: 26px; border: 0; font-size: 15px;
}
.cta-form input:focus { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }
.cta-form-tip { margin-top: 16px; color: rgba(255,255,255,.92); font-size: 14px; }
.cta-form .btn[disabled] { opacity: .75; cursor: default; }
@media (max-width: 640px) {
    .cta-form { flex-direction: column; align-items: stretch; }
}
.ranking { counter-reset: r; }
.ranking li {
    display: flex; gap: 12px; padding: 14px 0;
    border-bottom: 1px dashed var(--c-line);
    counter-increment: r;
}
.ranking li:last-child { border: 0; }
.ranking li::before {
    content: counter(r); width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
    background: var(--c-bg-soft); color: var(--c-text-sub); font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.ranking li:nth-child(1)::before, .ranking li:nth-child(2)::before, .ranking li:nth-child(3)::before {
    background: var(--c-accent); color: #fff;
}
.ranking li a { font-size: 14px; line-height: 1.5; }
.ranking li a:hover { color: var(--c-primary); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-cloud a, .tag-cloud span {
    padding: 6px 14px; border-radius: 14px; background: var(--c-bg-soft);
    font-size: 13px; color: var(--c-text-sub); transition: all .2s;
}
.tag-cloud a.hot, .tag-cloud span.hot { background: var(--c-accent-light); color: var(--c-accent); }
.tag-cloud a:hover, .tag-cloud span:hover { background: var(--c-primary); color: #fff; }

/* 响应式 */
@media (max-width: 1024px) {
    .news-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .news-item { grid-template-columns: 1fr; }
    .news-cover { min-height: 160px; }
}

@media (max-width: 480px) {
    .news-cover { min-height: 140px; }
    .news-cat-tabs { flex-wrap: wrap; gap: 6px; }
    .news-cat-tabs a, .news-cat-tabs button { padding: 6px 12px; font-size: 12px; }
    .news-item { padding: 14px; }
}

/* ============================================
   资讯详情页 .article
   原为 docs 静态稿 news-detail.html 里的页内 <style>，搬到这里统一维护；
   窄屏适配沿用 fagaodashi；末尾一段是老站迁来正文（UEditor 产出）的兼容样式
   ============================================ */
.article { max-width: 820px; margin: 0 auto; padding: 64px 0; }
.article h1 { font-size: 36px; line-height: 1.4; margin-bottom: 16px; letter-spacing: -.5px; }
.article .meta { color: var(--c-text-mute); font-size: 14px; padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--c-line); }
.article .meta span { margin-right: 16px; }
.article .cover {
    height: 320px; border-radius: var(--radius-lg); margin-bottom: 32px;
    background: var(--c-bg-soft); position: relative; overflow: hidden;
}
.article .cover img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.article p, .article li { font-size: 16px; color: var(--c-text); line-height: 1.9; margin-bottom: 16px; }
.article h2 { font-size: 24px; margin: 32px 0 16px; padding-left: 16px; border-left: 4px solid var(--c-primary); }
.article h3 { font-size: 20px; margin: 24px 0 12px; }
.article blockquote {
    margin: 24px 0; padding: 24px 32px;
    background: var(--c-primary-light); border-left: 4px solid var(--c-primary); border-radius: var(--radius-md);
    color: var(--c-text-sub); font-style: italic;
}
.article ul, .article ol { padding-left: 28px; margin-bottom: 16px; }
.article ul li { list-style: disc; }
.article ol li { list-style: decimal; }
.article table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.article table th, .article table td { padding: 12px 16px; border: 1px solid var(--c-line); text-align: left; }
.article table thead { background: var(--c-bg-soft); }
.article .tag-row { margin: 16px 0; }
.article .tag-row span { display: inline-block; padding: 4px 12px; border-radius: 12px; background: var(--c-bg-soft); font-size: 13px; margin-right: 8px; }
.article .related { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--c-line); }
.article .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; }
.article .table-scroll table { margin: 0; min-width: 520px; }

/* 老站迁来的正文：图片随段落对齐居中、列表项里的 <p> 不再叠加段距、<pre> 自动换行 */
.article p img, .article li img { display: inline-block; max-width: 100%; height: auto; border-radius: var(--radius-md); }
.article li p { margin-bottom: 4px; }
.article li p:last-child { margin-bottom: 0; }
.article pre {
    white-space: pre-wrap; word-break: break-word; margin: 16px 0 24px; padding: 16px 20px;
    background: var(--c-bg-soft); border-radius: var(--radius-md); font-family: inherit; font-size: 15px; line-height: 1.8;
}

@media (max-width: 768px) {
    .article { padding: 36px 16px; }
    .article h1 { font-size: 26px; }
    .article h2 { font-size: 20px; margin: 28px 0 12px; padding-left: 12px; }
    .article h3 { font-size: 17px; }
    .article p, .article li { font-size: 15px; }
    .article .meta { font-size: 13px; padding-bottom: 16px; margin-bottom: 24px; }
    .article .meta span { margin-right: 12px; display: inline-block; }
    .article .cover { height: 200px; margin-bottom: 24px; }
    .article blockquote { padding: 16px 18px; margin: 20px 0; }
    .article ul, .article ol { padding-left: 22px; }
    .article .related { margin-top: 40px; padding-top: 24px; }
}