/* =====================================================================
   /template/qxsports/css/news.css   【新闻列表 + 文章排版】
   ===================================================================== */

/* ---------- 列表 ---------- */
.qx-newslist{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.qx-newsitem{display:flex;gap:16px;background:var(--qx-card);border:1px solid var(--qx-line);
  border-radius:var(--qx-radius);overflow:hidden;transition:all .3s var(--qx-ease);min-width:0}
.qx-newsitem:hover{transform:translateY(-4px);border-color:var(--qx-line-2);box-shadow:var(--qx-shadow);background:var(--qx-card-hover)}
.qx-ni-ph{position:relative;flex:0 0 168px;width:168px;aspect-ratio:16/10;overflow:hidden;background:var(--qx-bg-2)}
.qx-ni-ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--qx-ease)}
.qx-newsitem:hover .qx-ni-ph img{transform:scale(1.07)}
.qx-ni-ph .qx-badge{position:absolute;left:9px;top:9px}
.qx-ni-bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding:15px 16px 15px 0}
.qx-ni-bd h3{font-size:15.5px;font-weight:700;line-height:1.5;transition:color .2s}
.qx-newsitem:hover h3{color:var(--qx-primary)}
.qx-ni-bd p{font-size:12.5px;line-height:1.7;color:var(--qx-text-3)}
.qx-ni-meta{margin-top:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--qx-font-mono);font-size:10.5px;color:var(--qx-text-3)}
.qx-ni-meta s{text-decoration:none}
.qx-ni-meta em{font-style:normal;color:var(--qx-primary);border:1px solid rgba(0,229,160,.3);
  padding:1px 8px;border-radius:10px;font-size:10px}

/* 第一条大卡（横跨整行） */
.qx-newslist>.qx-newsitem:first-child{grid-column:1/-1}
.qx-newslist>.qx-newsitem:first-child .qx-ni-ph{flex:0 0 46%;width:46%;aspect-ratio:16/9}
.qx-newslist>.qx-newsitem:first-child .qx-ni-bd{padding:26px 28px 26px 0;gap:12px}
.qx-newslist>.qx-newsitem:first-child h3{font-size:22px;-webkit-line-clamp:2}
.qx-newslist>.qx-newsitem:first-child p{font-size:13.5px;-webkit-line-clamp:3}

/* ---------- 分页（通杀帝国 [!--show.page--] 输出） ---------- */
.qx-pagebar{display:flex;justify-content:center;margin:34px 0 6px}
.qx-pagebar>div,.qx-pagebar .pagelist,.qx-pagebar .page{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.qx-pagebar a,.qx-pagebar b,.qx-pagebar span,.qx-pagebar strong,.qx-pagebar font{
  min-width:36px;height:36px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--qx-line-2);background:var(--qx-card);color:var(--qx-text-2);
  font-size:12.5px;font-family:var(--qx-font-mono);border-radius:9px;transition:all .22s;text-decoration:none}
.qx-pagebar a:hover{border-color:var(--qx-primary);color:var(--qx-primary);transform:translateY(-2px)}
.qx-pagebar b,.qx-pagebar strong,.qx-pagebar .cur{background:var(--qx-primary);border-color:var(--qx-primary);color:#04120C;font-weight:800}

/* ---------- 文章 ---------- */
.qx-article{background:var(--qx-card);border:1px solid var(--qx-line);border-radius:20px;
  padding:34px 38px;margin-bottom:22px}
.qx-art-lg{display:inline-block;font-size:11.5px;font-weight:700;color:var(--qx-primary);
  background:var(--qx-primary-dim);border:1px solid rgba(0,229,160,.25);
  padding:4px 13px;border-radius:14px;margin-bottom:16px}
.qx-art-lg:hover{background:rgba(0,229,160,.2)}
.qx-art-title{font-size:clamp(22px,3.4vw,32px);font-weight:800;line-height:1.4;margin-bottom:16px}
.qx-art-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:20px;
  border-bottom:1px solid var(--qx-line);font-family:var(--qx-font-mono);font-size:11.5px;color:var(--qx-text-3)}
.qx-art-lead{margin-top:18px;font-size:14.5px;line-height:1.95;color:var(--qx-text-2);
  border-left:3px solid var(--qx-primary);padding:4px 0 4px 16px;background:linear-gradient(90deg,var(--qx-primary-dim),transparent 80%);border-radius:0 8px 8px 0}

/* 正文排版 */
.qx-art-body{padding-top:24px;font-size:15.5px;line-height:2.05;color:#C6CEDD}
.qx-art-body p{margin-bottom:18px}
.qx-art-body h2,.qx-art-body h3{color:var(--qx-text);font-weight:800;margin:30px 0 14px;line-height:1.5}
.qx-art-body h2{font-size:21px;padding-left:12px;border-left:4px solid var(--qx-primary)}
.qx-art-body h3{font-size:17.5px}
.qx-art-body img{max-width:100%;height:auto;border-radius:12px;margin:16px auto;display:block}
.qx-art-body a{color:var(--qx-primary);border-bottom:1px solid rgba(0,229,160,.35)}
.qx-art-body a:hover{border-bottom-color:var(--qx-primary)}
.qx-art-body ul,.qx-art-body ol{margin:0 0 18px 22px}
.qx-art-body ul{list-style:disc}
.qx-art-body ol{list-style:decimal}
.qx-art-body li{margin-bottom:8px}
.qx-art-body blockquote{border-left:3px solid var(--qx-blue);background:rgba(59,130,246,.07);
  padding:14px 18px;margin:18px 0;border-radius:0 10px 10px 0;color:var(--qx-text-2);font-size:14.5px}
.qx-art-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:13.5px}
.qx-art-body th,.qx-art-body td{border:1px solid var(--qx-line-2);padding:9px 12px;text-align:left}
.qx-art-body th{background:var(--qx-bg-2);font-weight:700;color:var(--qx-text)}
.qx-art-body strong,.qx-art-body b{color:var(--qx-text)}
.qx-art-body video,.qx-art-body iframe{max-width:100%;border-radius:12px;margin:16px 0}

.qx-art-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:28px;padding-top:22px;border-top:1px dashed var(--qx-line)}

/* 相关阅读 */
.qx-relsec{margin:34px 0 8px}
.qx-pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 8px}
.qx-pn a{display:flex;flex-direction:column;gap:5px;padding:18px 20px;
  background:var(--qx-card);border:1px solid var(--qx-line);border-radius:var(--qx-radius);
  transition:all .28s var(--qx-ease);min-width:0}
.qx-pn a:hover{border-color:var(--qx-primary);transform:translateY(-3px);box-shadow:var(--qx-shadow)}
.qx-pn a.r{text-align:right;align-items:flex-end}
.qx-pn a.dim{opacity:.5}
.qx-pn a.dim:hover{transform:none;border-color:var(--qx-line)}
.qx-pn span{font-family:var(--qx-font-mono);font-size:10.5px;letter-spacing:1.2px;color:var(--qx-text-3)}
.qx-pn h4{font-size:15px;font-weight:700;line-height:1.4;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qx-pn a:hover h4{color:var(--qx-primary)}
.qx-pn em{font-style:normal;font-size:11px;color:var(--qx-text-3)}
@media(max-width:768px){
  .qx-pn{grid-template-columns:1fr}
  .qx-pn a.r{text-align:left;align-items:flex-start}
  .qx-pn a{padding:15px 16px}
  .qx-pn h4{font-size:14px}
}