/* ============================================================
   news.css · 资讯中心专属样式
   ============================================================ */

/* ---------- 题头：浅蓝面板 ---------- */
.page-hero{
  padding:calc(var(--header-h) + 40px) 0 60px;
  background:linear-gradient(180deg,var(--blue-50) 0%,var(--white) 100%);
}
.hero-panel{
  background:var(--white);border:1px solid var(--blue-100);
  border-radius:var(--radius-l);box-shadow:var(--shadow-s);
  padding:44px 48px;margin-top:22px;
}
.hero-panel h1{margin:6px 0 14px}
.hero-lead{color:var(--gray-600);font-size:14.5px;max-width:720px;margin-bottom:18px}
.panel-notes{margin-bottom:24px;display:flex;flex-direction:column;gap:10px}
.panel-notes p{font-size:13.5px;color:var(--gray-600);line-height:1.9}
.hero-tags a{font-size:13px}

/* ---------- 阅读指引 ---------- */
.read-guide{padding:26px 0 6px;background:var(--white)}
.guide-lead{
  font-size:14px;color:var(--gray-700);line-height:1.9;
  max-width:820px;margin-bottom:20px;
}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.g-card{
  background:var(--gray-50);border-radius:var(--radius-m);
  padding:20px 22px;border-left:3px solid var(--blue-400);
}
.g-card strong{font-size:14.5px;color:var(--gray-900);display:block;margin-bottom:8px}
.g-card p{font-size:13px;color:var(--gray-600);line-height:1.85}

/* ---------- 列表 + 侧栏布局 ---------- */
.listzone{padding:20px 0 90px;background:var(--white)}
.layout{display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:start}

/* 列表导语 */
.list-intro{
  font-size:13.5px;color:var(--gray-500);line-height:1.9;
  margin-bottom:20px;padding:16px 20px;
  background:var(--blue-50);border-radius:var(--radius-m);
}
.list-endnote{
  margin-top:20px;font-size:13px;color:var(--gray-500);
  line-height:1.9;text-align:center;
}

/* 文章横条列表：图文左右排布 */
.art-row{
  display:grid;grid-template-columns:220px 1fr;gap:22px;
  padding:20px;border:1px solid var(--gray-100);border-radius:var(--radius-m);
  margin-bottom:16px;background:var(--white);
  transition:border-color var(--trans),box-shadow var(--trans),transform var(--trans);
}
.art-row:hover{border-color:var(--blue-200);box-shadow:var(--shadow-m);transform:translateX(4px)}.art-img {display:block;border-radius:var(--radius-s);overflow:hidden;height:auto;aspect-ratio:3/2;background:var(--gray-100)}
.art-img img{width:100%;height:100%;object-fit:cover}
.art-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.art-title{font-size:16.5px;font-weight:700;color:var(--gray-900);line-height:1.5}
.art-row:hover .art-title{color:var(--blue-700)}
.art-desc{
  font-size:13.5px;color:var(--gray-500);line-height:1.8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.art-time{font-size:12px;color:var(--gray-400);margin-top:auto}

/* ---------- 侧栏 ---------- */
.side{display:flex;flex-direction:column;gap:20px;position:sticky;top:calc(var(--header-h) + 20px)}
.side-card{
  background:var(--gray-50);border:1px solid var(--gray-100);
  border-radius:var(--radius-m);padding:22px 24px;
}
.side-card h3{
  font-size:15px;margin-bottom:14px;padding-bottom:10px;
  border-bottom:2px solid var(--blue-200);display:inline-block;
}
.side-tip{font-size:12.5px;color:var(--gray-500);line-height:1.8;margin-bottom:10px}
.side-hot .side-tip{color:rgba(255,255,255,.7)}
.side-links li{border-bottom:1px dashed var(--gray-200)}
.side-links li:last-child{border-bottom:none}
.side-links a{
  display:block;padding:9px 2px;font-size:13.5px;color:var(--gray-600);
}
.side-links a::before{content:"›";color:var(--blue-400);margin-right:8px}
.side-links a:hover{color:var(--blue-700);padding-left:6px}
.side-hot{background:var(--blue-700);border-color:var(--blue-700)}
.side-hot h3{color:#fff;border-bottom-color:var(--blue-400)}
.side-hot .side-links li{border-bottom-color:rgba(255,255,255,.14)}
.side-hot .side-links a{color:var(--blue-100)}
.side-hot .side-links a:hover{color:#fff}

/* ---------- 底部行动带 ---------- */
.news-cta{background:var(--gray-900);padding:56px 0}
.cta-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.cta-inner h2{color:#fff;font-size:23px;margin-bottom:8px}
.cta-inner p{color:var(--gray-300);font-size:14px;max-width:560px}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}
.cta-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.cta-ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}

/* ---------- 报考节点提醒时间条 ---------- */
.node-strip{padding:30px 0 10px;background:var(--white)}
.node-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.node{
  background:var(--blue-50);border-radius:var(--radius-m);
  padding:20px 18px;
}
.node em{font-style:normal;font-size:12px;font-weight:700;color:var(--blue-700);letter-spacing:2px}
.node h3{font-size:15px;margin:6px 0 8px}
.node p{font-size:12.5px;color:var(--gray-600);line-height:1.8}

/* ---------- 按岗位读资讯 ---------- */
.gangwei-zone{padding:40px 0;background:var(--white)}
.gw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 14px}
.gw{
  display:block;text-align:center;padding:14px 8px;
  background:var(--gray-50);border-radius:var(--radius-s);
  font-size:14px;font-weight:600;color:var(--gray-800);
  transition:background var(--trans),color var(--trans);
}
.gw:hover{background:var(--blue-600);color:#fff}
.gw-note{font-size:13px;color:var(--gray-500);line-height:1.9;max-width:760px}

/* ---------- 备考工具入口 ---------- */
.tool-zone{padding:20px 0 40px;background:var(--white)}
.tool-box{
  background:var(--gray-900);border-radius:var(--radius-m);
  padding:36px;color:#fff;
}
.tool-box h2{font-size:19px;margin-bottom:10px}
.tool-box p{color:var(--gray-300);font-size:13.5px;line-height:1.9;max-width:680px}
.tool-links{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 12px}
.tool-note{font-size:12.5px;color:var(--gray-400);line-height:1.9}

/* ---------- 栏目更新说明 ---------- */
.update-note{padding:10px 0 50px;background:var(--white)}
.update-note p{font-size:13px;color:var(--gray-500);line-height:2;max-width:880px}

/* ---------- 响应式 ---------- */
@media (max-width:920px){
  .layout{grid-template-columns:1fr}
  .side{position:static}
  .hero-panel{padding:30px 24px}
  .guide-grid{grid-template-columns:1fr}
  .node-grid{grid-template-columns:1fr 1fr}
  .gw-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .art-row{grid-template-columns:1fr;gap:14px}.art-img {height:auto;aspect-ratio:16/9}
}