/* =====================================================================
   资讯动态列表页 · news.css
   模块原创设计：分类图标卡入口 / 左图右文横向流 + 侧栏 / 延伸服务三卡
   ===================================================================== */

/* ---------- 页面横幅 ---------- */
.banner-news{background-image:url('../images/banner-news.jpg')}

/* ---------- 资讯分类入口 ---------- */
.cat-nav-sec{padding-bottom:30px;background:var(--c-white)}
.cat-nav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cat-card{
  display:flex;align-items:flex-start;gap:16px;background:var(--c-ice-2);
  border:1px solid var(--c-line);border-radius:var(--radius-lg);padding:26px 22px;
  transition:all var(--trans);
}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);background:#fff;border-color:transparent}
.cat-card i{
  width:52px;height:52px;border-radius:14px;background:var(--c-grad);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(37,99,235,.3);
}
.cat-card i svg{width:26px;height:26px;fill:#fff}
.cat-card h3{font-size:17px;margin-bottom:5px}
.cat-card p{font-size:13.5px;color:var(--c-muted);line-height:1.6;margin:0}

/* ---------- 列表主体：左流 + 右栏 ---------- */
.news-main-sec{background:var(--c-ice-2);padding-top:70px}
.news-layout{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}

.feed-wrap{display:grid;gap:26px}
.feed-item{
  display:grid;grid-template-columns:300px 1fr;gap:26px;background:#fff;
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);
  transition:transform var(--trans),box-shadow var(--trans);
}
.feed-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.feed-thumb{display:block;position:relative;overflow:hidden}
.feed-thumb img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .6s ease}
.feed-item:hover .feed-thumb img{transform:scale(1.07)}
.feed-body{padding:26px 28px 26px 0;display:flex;flex-direction:column;justify-content:center}
.feed-body a{
  font-size:19px;font-weight:700;color:var(--c-primary);line-height:1.45;margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.feed-item:hover .feed-body a{color:var(--c-accent)}
.feed-body p{
  color:var(--c-text-2);font-size:14.5px;line-height:1.8;margin-bottom:14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.feed-body time{font-size:13px;color:var(--c-muted);display:flex;align-items:center;gap:7px}
.feed-body time::before{content:"";width:16px;height:1.5px;background:var(--c-accent)}

/* ---------- 侧边栏 ---------- */
.news-side{display:grid;gap:26px;position:sticky;top:100px}
.side-box{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:26px}
.side-title{
  font-size:17px;margin-bottom:18px;padding-bottom:12px;position:relative;
  border-bottom:1px solid var(--c-line);
}
.side-title::after{content:"";position:absolute;left:0;bottom:-1px;width:44px;height:3px;background:var(--c-grad);border-radius:3px}

.hot-list{counter-reset:hot;display:grid;gap:14px}
.hot-list li{display:grid;gap:4px}
.hot-list a{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;font-weight:600;line-height:1.6;color:var(--c-text)}
.hot-list a:hover{color:var(--c-accent)}
.hot-list b{
  flex-shrink:0;width:22px;height:22px;border-radius:7px;background:var(--c-ice);color:var(--c-accent);
  font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.hot-list li:nth-child(1) b,.hot-list li:nth-child(2) b,.hot-list li:nth-child(3) b{background:var(--c-grad);color:#fff}
.hot-list time{font-size:12.5px;color:var(--c-muted);padding-left:32px}

.side-cat-list{display:grid;gap:2px}
.side-cat-list a{
  display:flex;justify-content:space-between;align-items:center;padding:12px 14px;
  border-radius:10px;font-size:14.5px;font-weight:600;color:var(--c-text-2);background:var(--c-ice-2);
  transition:all var(--trans);
}
.side-cat-list a span{color:var(--c-accent);transition:transform var(--trans)}
.side-cat-list a:hover{background:var(--c-ice);color:var(--c-accent)}
.side-cat-list a:hover span{transform:translateX(4px)}

.side-tpl{background:var(--c-ice);border:1px dashed var(--c-accent);}
.tpl-link{
  display:block;padding:4px 2px 0;color:var(--c-text);line-height:1.7;transition:transform var(--trans);
}
.tpl-link b{display:block;font-size:15px;font-weight:700;color:var(--c-primary);margin-bottom:6px}
.tpl-link span{display:block;font-size:13px;color:var(--c-text-2);line-height:1.8}
.tpl-link:hover{transform:translateX(4px)}
.tpl-link:hover b{color:var(--c-accent)}

.tag-cloud{display:flex;flex-wrap:wrap;gap:10px}
.tag-cloud a{
  font-size:13px;color:var(--c-text-2);background:var(--c-ice-2);border:1px solid var(--c-line);
  padding:6px 14px;border-radius:999px;transition:all var(--trans);
}
.tag-cloud a:hover{background:var(--c-grad);color:#fff;border-color:transparent}

.side-cta{
  background:var(--c-dark);border-radius:var(--radius-lg);padding:30px 26px;color:#fff;
  background-image:radial-gradient(circle at 85% 15%,rgba(37,99,235,.4),transparent 55%);
}
.side-cta h3{color:#fff;font-size:19px;margin-bottom:10px}
.side-cta p{font-size:14px;color:#9FB2D4;line-height:1.8;margin-bottom:18px}
.side-cta .btn{margin:0 8px 10px 0}
.side-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.side-ghost:hover{background:#fff;color:var(--c-primary)}

/* ---------- 延伸服务引导 ---------- */
.extend-sec{background:var(--c-white)}
.extend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.extend-card{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-lg);padding:36px 30px;
  position:relative;overflow:hidden;transition:all var(--trans);
}
.extend-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--c-grad);transform:scaleX(0);transform-origin:left;transition:transform var(--trans)}
.extend-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px)}
.extend-card:hover::before{transform:scaleX(1)}
.extend-icon{
  width:60px;height:60px;border-radius:16px;background:var(--c-ice);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.extend-icon svg{width:28px;height:28px;fill:var(--c-accent)}
.extend-card h3{font-size:20px;margin-bottom:10px}
.extend-card p{color:var(--c-text-2);font-size:14.5px;margin-bottom:18px}
.extend-more{font-size:14px;font-weight:700;color:var(--c-accent)}

/* ---------- 联系区 ---------- */
.contact-sec{padding-top:20px;background:var(--c-ice-2)}

/* ---------- 移动端导航 active ---------- */
.mobile-nav-body>a.active{color:var(--c-accent)!important;background:var(--c-ice)}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .news-layout{grid-template-columns:1fr}
  .news-side{position:static;grid-template-columns:1fr 1fr}
  .side-cta{grid-column:1/-1}
}
@media (max-width:900px){
  .cat-nav-grid{grid-template-columns:1fr 1fr}
  .extend-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
}
@media (max-width:640px){
  .feed-item{grid-template-columns:1fr}
  .feed-body{padding:20px}
  .news-side{grid-template-columns:1fr}
  .cat-nav-grid{grid-template-columns:1fr}
}