/* ============================================================
   news.css · 资讯列表页（news.html）与资讯详情页（show.html）
   含模板标签区块的排版样式
   ============================================================ */

/* ---------- 资讯列表页 ---------- */
.news-page .filter-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* 列表页主区块（模板数据源输出） */
.channel-list{display:flex;flex-direction:column;gap:16px}
.channel-item{
  display:grid;grid-template-columns:220px 1fr;gap:20px;padding:16px;border-radius:14px;
  background:rgba(255,255,255,.024);border:1px solid var(--line-2);transition:.35s var(--ease);
}
.channel-item:hover{border-color:var(--bronze);background:rgba(176,141,87,.05);transform:translateY(-3px)}
.channel-item .ph{border-radius:10px;overflow:hidden;aspect-ratio:16/10;position:relative}
.channel-item .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.channel-item:hover .ph img{transform:scale(1.06)}
.channel-item .ph .tag{position:absolute;left:10px;top:10px;z-index:2;font-size:11px;padding:3px 10px;border-radius:999px;background:rgba(138,47,47,.88);color:#f6e9d8;letter-spacing:.08em}
.channel-item .meta{display:flex;gap:16px;align-items:center;font-size:12px;color:var(--paper-3);margin-bottom:8px}
.channel-item .meta time{display:flex;align-items:center;gap:6px}
.channel-item .meta time svg{width:13px;height:13px;color:var(--bronze)}
.channel-item h3{font-size:18px;margin-bottom:8px}
.channel-item h3 a:hover{color:var(--bronze-l)}
.channel-item p{font-size:13px;color:var(--paper-2);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.channel-item .read{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12.5px;color:var(--bronze);font-weight:600}
.channel-item .read svg{width:13px;height:13px}

/* ---------- 资讯详情页 ---------- */
.article-card{
  border-radius:18px;overflow:hidden;background:linear-gradient(170deg,#211a12,#17120d);
  border:1px solid var(--line-2);
}
.article-head{padding:38px 40px 0;text-align:center}
.article-head .cats{display:flex;gap:10px;justify-content:center;margin-bottom:16px}
.article-head h1{font-size:clamp(22px,3vw,32px);max-width:820px;margin:0 auto 16px}
.article-meta{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--paper-3);padding-bottom:22px;border-bottom:1px solid var(--line-2)}
.article-meta span{display:inline-flex;gap:6px;align-items:center}
.article-meta svg{width:14px;height:14px;color:var(--bronze)}
.article-body{padding:34px 40px 30px}
.article-body .cover{border-radius:14px;overflow:hidden;margin-bottom:26px;border:1px solid var(--line-2)}
.article-body .cover img{width:100%;aspect-ratio:16/9;object-fit:cover}
.article-body .content p{color:var(--paper-2);font-size:15px;line-height:1.95;margin-bottom:16px}
.article-body .content img{border-radius:12px;margin:18px auto;max-width:100%;max-height:520px;object-fit:cover}
.article-body .content h3{font-size:18px;margin:26px 0 12px;color:#f2e8d4;padding-left:14px;border-left:4px solid var(--bronze)}
.article-body .content ul{padding:6px 0 12px}
.article-body .content ul li{position:relative;padding:5px 0 5px 22px;color:var(--paper-2);font-size:14.5px}
.article-body .content ul li::before{content:"";position:absolute;left:4px;top:13px;width:8px;height:8px;border-radius:50%;background:var(--bronze)}

/* 详情页页脚共享区块（五组模板列表，无小标题，按序堆叠） */
.show-lists{padding:0 40px 36px}
.show-lists .list-row{border-top:1px dashed rgba(176,141,87,.2);padding-top:20px;margin-top:20px}
.show-lists .list-row:first-child{border-top:none;padding-top:0;margin-top:0}
.list-row .mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mini-item{
  display:flex;gap:12px;padding:12px;border-radius:12px;background:rgba(255,255,255,.022);
  border:1px solid var(--line-2);transition:.3s;align-items:center;
}
.mini-item:hover{border-color:var(--bronze);transform:translateY(-3px)}
.mini-item img{width:92px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0}
.mini-item .mi-body{min-width:0}
.mini-item h5{font-size:13.5px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-item h5 a:hover{color:var(--bronze-l)}
.mini-item time{font-size:11px;color:var(--paper-3)}
.mini-item--text{display:block;padding:11px 14px}
.mini-item--text h5{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 详情页“分享/上一篇”工具条 */
.article-tool{padding:0 40px 30px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--paper-3)}
.article-tool a{color:var(--bronze)}
.article-tool a:hover{color:var(--bronze-l)}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .channel-item{grid-template-columns:1fr}
  .channel-item .ph{aspect-ratio:16/8}
  .list-row .mini-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .news-grid{grid-template-columns:1fr}
  .article-head{padding:28px 20px 0}
  .article-body{padding:24px 20px}
  .show-lists{padding:0 20px 28px}
  .article-tool{padding:0 20px 24px}
  .list-row .mini-grid{grid-template-columns:1fr}
}