/* news.css —— 新闻列表页（数据库驱动，替代原 dynamic 静态页）
 *
 * 重构自原 062741.css：
 *   - 去掉建站系统遗留的「绝对定位 + 固定 height」布局与 #layout_ 等 builder ID；
 *   - 去掉 PC / PAD / Mobile 三套重复结构（newName、newDetail 各写三遍再靠 .pc/.pad/.mobile 显隐切换）；
 *   - 改为「单套 HTML + 媒体查询」控制不同分辨率，逻辑与表现更清晰（参照 categories.css 的重构思路）。
 *
 * 布局对齐站点其他页面（以 categories 页为参照）：
 *   - Banner 全屏通栏（不受 1200px 限制），定高 460 / 340 / 140px；
 *   - 正文区（标题 + 列表）限定 max-width:1200px 居中，与其他页面内容区一致，不再全屏铺满；
 *   - 列表项：PC（>1200px）图片在左、标题/正文在右并排；PAD / Mobile（≤1200px）图片改到上方、
 *     内容在下方纵向堆叠（参照原 dynamic 页面在窄屏的上下效果，避免左右压缩导致观看效果差）。
 */

/* 吸顶（#comm_layout_header 固定 + 下推补偿）已统一收口到全站 css/site.css，本页不再重复。 */

.news-page {
    width: 100%;
}

/* ───────── 顶部 Banner（通栏定高，不受内容区 1200px 限制） ───────── */
.news-banner {
    width: 100%;
    height: 460px;
    overflow: hidden;
}
.news-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (min-width: 641px) and (max-width: 1200px) {
    .news-banner { height: 340px; }
}
@media (max-width: 640px) {
    .news-banner { height: 140px; }
}

/* ───────── 正文区：限定 1200px 居中，对齐站点其他页面内容区 ───────── */
.news-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
}

/* ───────── 标题区 ───────── */
.news-head {
    text-align: center;
    padding: 30px 0 18px;
}
.news-head .news-kicker {
    font-size: 28px;
    color: #333;
    margin: 0 0 8px;
}
.news-head .news-sub {
    font-size: 15px;
    color: #888;
    margin: 0 0 20px;
}
/* ───────── 新闻列表 ───────── */
.boxNewsListStyle_3 {
    width: 100%;
    clear: both;
}
.boxNewsListStyle_3 .sumary_list {
    display: flex;
    align-items: stretch;
    gap: 16px;
    list-style: none;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 16px 6px;
    box-sizing: border-box;
}

/* 图片块：PC 下固定宽度，与标题/正文并排（需求：不要上下堆叠） */
.boxNewsListStyle_3 .newPic {
    flex: 0 0 200px;
    width: 200px;
    overflow: hidden;
    background: #eee;
}
.boxNewsListStyle_3 .newPic a,
.boxNewsListStyle_3 .newPic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.boxNewsListStyle_3 .sumary_list:hover .newPic img {
    transform: scale(1.05);
}

/* 右侧内容块（标题 + 时间 + 摘要） */
.boxNewsListStyle_3 .newCont {
    flex: 1 1 auto;
    min-width: 0;
}
.boxNewsListStyle_3 .newName {
    margin: .2em 0;
}
.boxNewsListStyle_3 .newName a {
    text-decoration: none;
    font-size: 16px;
    line-height: 1.4;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.boxNewsListStyle_3 .newName a:hover {
    /*color: #0a01b5;*/
    font-weight: bold;
}
.boxNewsListStyle_3 .newB {
    line-height: 2;
}
.boxNewsListStyle_3 .newsTime {
    color: #aaa;
    font-size: 13px;
    white-space: nowrap;
}
.boxNewsListStyle_3 .newDetail {
    margin-top: .5em;
    color: #888;
    font-size: 13px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.boxNewsListStyle_3 .news-empty {
    color: #999;
    text-align: center;
    padding: 30px 0;
}

.clear { clear: both; }

/* ───────── PAD / Mobile（≤640px）：图片改到上方、内容在下方纵向堆叠 ─────────
   参照原 dynamic 页面在窄屏的上下效果——窄屏宽度不足，左右压缩观看效果差，故改为纵向。 */
@media (max-width: 640px) {
    .news-main { padding: 0 8px; }
    .boxNewsListStyle_3 .sumary_list {
        flex-direction: column;
        gap: 10px;
        padding: 12px 2px;
    }
    /* 上下堆叠时，图片宽度自适应屏幕宽度，且保持正方区域（宽=高）：
       避免原固定高度（160/200px）在小屏把大图压成一条窄带、看不清内容。
       object-fit:cover 填满正方区域且不变形；若想看到整张图不裁剪，可改为 contain。 */
    .boxNewsListStyle_3 .newPic {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 1 / 1;
    }
    .boxNewsListStyle_3 .newName a { 
        font-size: 14px; 
    }
    .boxNewsListStyle_3 .newDetail { 
        font-size: 12px; 
        margin-top: .3em; 
    }
}