/* ============================================================
   资讯列表页专属样式 - 杂志式自由聚散布局
   ============================================================ */

/* Banner */
.news-hero { position: relative; padding: 150px 0 60px; background: var(--cream-2); overflow: hidden; }
.news-hero::after {
    content: ""; position: absolute; left: -80px; top: 40%; width: 260px; height: 260px; border-radius: 50%;
    background: rgba(189,211,176,.22);
}
.news-hero-inner { position: relative; z-index: 2; }
.news-hero h1 { margin: 18px 0 16px; }
.news-hero p { max-width: 560px; }

/* 分类筛选栏 */
.news-filter {
    display: flex; flex-wrap: wrap; gap: 12px; padding: 28px 0; border-bottom: 1px dashed var(--line);
}
.news-filter a {
    padding: 8px 22px; border-radius: 30px; font-size: .9rem; color: var(--ink-soft);
    background: var(--cream); border: 1px solid var(--line); transition: all .3s;
}
.news-filter a:hover, .news-filter a.on { background: var(--lotus-deep); color: var(--white); border-color: var(--lotus-deep); }

/* 资讯网格：首个为大图特色卡 */
.news-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 40px 0;
}
.news-card {
    background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
    display: flex; flex-direction: column; transition: transform .4s, box-shadow .4s;
}
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.news-card .pic { height: 200px; overflow: hidden; position: relative; }
.news-card .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.news-card:hover .pic img { transform: scale(1.06); }
.news-card .pic .cat {
    position: absolute; top: 14px; left: 14px; background: var(--lotus-deep); color: var(--white);
    font-size: .72rem; padding: 4px 12px; border-radius: 20px; letter-spacing: 1px;
}
.news-card .body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.news-card .date { font-size: .8rem; color: var(--lotus-deep); margin-bottom: 10px; letter-spacing: 1px; }
.news-card h3 { font-size: 1.12rem; margin-bottom: 10px; line-height: 1.5; }
.news-card .zh { font-size: .9rem; color: var(--ink-soft); flex: 1; margin-bottom: 14px; }
.news-card .more { font-size: .86rem; color: var(--sage-deep); font-weight: 500; }

/* 特色卡：横跨两列 + 横向布局 */
.news-grid .news-card:first-child {
    grid-column: span 2; flex-direction: row; align-items: stretch;
}
.news-grid .news-card:first-child .pic { height: auto; width: 55%; flex-shrink: 0; }
.news-grid .news-card:first-child .body { width: 45%; justify-content: center; }
.news-grid .news-card:first-child h3 { font-size: 1.5rem; }

/* 侧边热门栏 */
.news-side {
    background: var(--cream-2); border-radius: var(--radius); padding: 30px; margin-top: 40px;
}
.news-side h4 { margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.news-side h4::before { content: ""; width: 18px; height: 3px; background: var(--lotus-deep); border-radius: 2px; }
.hot-list li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.hot-list li:last-child { border-bottom: none; }
.hot-list .n { font-family: var(--f-serif); font-size: 1.4rem; color: var(--lotus-deep); font-weight: 600; line-height: 1; flex-shrink: 0; }
.hot-list .t { font-size: .92rem; color: var(--ink); line-height: 1.5; }
.hot-list .t:hover { color: var(--lotus-deep); }

@media (max-width: 980px) {
    .news-grid { grid-template-columns: 1fr 1fr; }
    .news-grid .news-card:first-child { grid-column: span 2; }
}
@media (max-width: 640px) {
    .news-grid { grid-template-columns: 1fr; }
    .news-grid .news-card:first-child { grid-column: span 1; flex-direction: column; }
    .news-grid .news-card:first-child .pic { width: 100%; height: 200px; }
    .news-grid .news-card:first-child .body { width: 100%; }
    .news-grid .news-card:first-child h3 { font-size: 1.12rem; }
}