/* 页面级样式 — 提取自 网站前端模板/news.html */

/* ================= 新闻页专属布局（杂志式） ================= */
:root{--news-art-op:.15}          /* 深色模式下 Hero 背景图透明度 10% */
html[data-theme="light"]{--news-art-op:.15}

.news-hero{position:relative;overflow:hidden;padding:140px 0 0;
  background-image:
    radial-gradient(ellipse 50% 70% at 80% 0%,rgba(245,158,11,.08),transparent 60%),
    radial-gradient(ellipse 55% 80% at 10% 20%,rgba(34,211,238,.11),transparent 60%);
  background-repeat:no-repeat;background-color:var(--bg)}
/* 背景图独立成层，便于控制透明度 */
.news-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("/assets/images/banner6.jpg") center/cover no-repeat;opacity:var(--news-art-op)}
.news-hero>*{position:relative;z-index:1}
.news-hero .masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:40px}
.news-hero h1{font-size:clamp(38px,6vw,64px);font-weight:900;letter-spacing:.02em}
/* 手机端：hero 渐变标题是 fit-content 收缩块，统一 margin auto 水平居中（column flex 下同样生效） */
@media(max-width:600px){
  .news-hero h1{margin-left:auto;margin-right:auto}
}
.news-hero .masthead .meta{font-family:var(--mono);font-size:12px;color:var(--txt3);letter-spacing:.2em;text-align:right;line-height:2}
.news-hero .divider{height:1px;background:linear-gradient(90deg,var(--cyan),var(--violet),transparent);margin:0 0 0}

/* --- 头条巨幅封面 --- */
.headline{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;padding:50px 0}
.hl-card{position:relative;border-radius:24px;overflow:hidden;min-height:430px;
  border:1px solid var(--line2);
  background:linear-gradient(140deg,#14304f,#12233d 55%,#0b1120)}
.hl-card:hover .nf-slide.active{transform:scale(1.08)}
.hl-card .nf-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,18,.18) 0%,transparent 35%,rgba(7,11,20,.82) 55%,rgba(7,11,20,.98) 100%)}
.hl-card .nf-body{position:relative;z-index:2;padding:26px 34px 30px;width:100%}
.hl-card .nf-body .nf-tag{font-size:11px;padding:5px 12px;margin-bottom:10px;background:rgba(34,211,238,.18);border:1px solid rgba(34,211,238,.35);color:var(--cyan)}
.hl-card .nf-body h3{font-size:clamp(20px,2.4vw,26px);font-weight:800;line-height:1.35;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.5);margin-bottom:8px}
.hl-card .nf-body p{color:rgba(232,237,246,.9);font-size:13.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.hl-card .nf-body .nf-meta{margin-top:10px;font-family:var(--mono);font-size:11.5px;color:rgba(232,237,246,.72)}

/* 右侧副头条 */
.sub-heads{display:flex;flex-direction:column;gap:18px}
.sub-head{flex:1;display:flex;gap:16px;align-items:center;padding:20px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(160deg,var(--panel),var(--panel2));transition:.35s;cursor:pointer}
.sub-head:hover{transform:translateY(-4px);border-color:var(--cyan)}
.sub-head .sh-icon{width:64px;height:64px;border-radius:14px;display:grid;place-items:center;font-size:30px;flex:none;background:linear-gradient(150deg,rgba(34,211,238,.14),rgba(139,92,246,.14));border:1px solid var(--line2)}
.sub-head h4{font-size:14.5px;font-weight:700;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sub-head .sh-meta{margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--txt3)}
.sub-head .hot{color:var(--rose);font-family:var(--mono);font-size:10px}
@media(max-width:960px){.headline{grid-template-columns:1fr}}
/* 浅色模式适配：头条卡换浅色渐变封面 */
html[data-theme="light"] .hl-card{background:linear-gradient(140deg,#dbeafe,#ede9fe 55%,#fae8ff)}
html[data-theme="light"] .hl-card .nf-slide::after{background:linear-gradient(180deg,rgba(248,250,255,.3) 0%,transparent 40%,rgba(248,250,255,.82) 60%,rgba(248,250,255,.98) 100%)}
html[data-theme="light"] .hl-card .nf-body h3{color:var(--txt);text-shadow:none}
html[data-theme="light"] .hl-card .nf-body p{color:var(--txt2);text-shadow:none}
html[data-theme="light"] .hl-card .nf-body .nf-meta{color:var(--txt3)}

/* --- 主体：左列表 + 右热点榜 --- */
.news-body{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;padding:30px 0 110px}
.news-tabs{display:flex;gap:10px;margin-bottom:24px}
.news-tabs button{padding:11px 24px;border-radius:999px;border:1px solid var(--line2);background:none;color:var(--txt2);font-size:14px;cursor:pointer;transition:.3s;font-family:var(--sans)}
.news-tabs button.on{background:var(--grad);color:var(--btn-txt);font-weight:700;border-color:transparent}
.news-tabs button:hover:not(.on){border-color:var(--cyan);color:var(--cyan)}

/* 杂志式条目（比首页更丰富） */
.mag-item{display:grid;grid-template-columns:86px 1fr;gap:20px;padding:24px 14px;border-bottom:1px dashed var(--line);border-radius:14px;transition:.3s;cursor:pointer}
.mag-item:hover{background:var(--veil2)}
.mag-item .m-date{border-right:1px solid var(--line);padding-right:16px;text-align:center}
.mag-item .m-date b{display:block;font-family:var(--mono);font-size:30px;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1}
.mag-item .m-date span{font-family:var(--mono);font-size:10.5px;color:var(--txt3);letter-spacing:.1em}
.mag-item h4{font-size:16.5px;font-weight:700;line-height:1.55;transition:.3s}
.mag-item:hover h4{color:var(--cyan)}
.mag-item .m-desc{margin-top:8px;font-size:13.5px;color:var(--txt2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mag-item .m-meta{margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--txt3);display:flex;gap:16px}
.mag-item .m-meta .views{color:var(--cyan)}
.mag-item .m-thumb{flex:none;width:104px;height:74px;border-radius:12px;border:1px solid var(--line);background-size:cover;background-position:center}
.mag-item .tagline{display:inline-block;padding:3px 10px;border-radius:6px;font-size:10.5px;font-family:var(--mono);background:rgba(34,211,238,.12);color:var(--cyan);margin-left:10px;vertical-align:2px}

/* 热点榜 */
.rank-head{padding:18px 24px;border-radius:14px;background:linear-gradient(120deg,rgba(251,113,133,.1),rgba(245,158,11,.08));border:1px solid var(--line);display:flex;align-items:center;gap:14px;margin-bottom:18px}
.rank-head .ic{font-size:24px}
.rank-head h3{font-size:17px;font-weight:700}
.rank-head small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--txt3);letter-spacing:.18em;font-weight:400}
.rank-row{display:flex;align-items:center;gap:18px;padding:16px 12px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:10px;transition:.3s}
.rank-row:hover{background:var(--veil2);padding-left:20px}
.rank-row .no{font-family:var(--mono);font-size:15px;font-weight:700;min-width:30px;color:var(--txt3)}
.rank-row:nth-child(1) .no{color:var(--rose)}
.rank-row:nth-child(2) .no{color:var(--amber)}
.rank-row:nth-child(3) .no{color:var(--cyan)}
.rank-row .t{flex:1;font-size:14px;color:var(--txt2);transition:.3s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}
.rank-row:hover .t{color:var(--txt)}
.rank-row .views{font-family:var(--mono);font-size:11px;color:var(--txt3);flex:none}
@media(max-width:960px){.news-body{grid-template-columns:1fr}}
@media(max-width:600px){
  .rank-row{flex-wrap:wrap;row-gap:8px;column-gap:18px}
  .rank-row .views{flex-basis:100%;margin-left:48px}
}