/* =====================================================================
   建站资讯分类页 · news_jianzhan.css
   模块原创设计：导读图文条 / 双列图卡网格 + 侧栏 / 四格直达卡
   ===================================================================== */

.banner-news{background-image:url('../images/banner-news.jpg')}

/* ---------- 栏目导读 ---------- */
.lead-sec{padding-bottom:20px;background:var(--c-white)}
.lead-strip{
  display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:center;
  background:var(--c-ice-2);border-radius:var(--radius-lg);padding:40px;
}
.lead-media{position:relative}
.lead-media img{border-radius:var(--radius-lg);aspect-ratio:3/2;object-fit:cover;box-shadow:var(--shadow-lg)}
.lead-media::after{
  content:"建站思路";position:absolute;left:18px;bottom:18px;background:var(--c-grad);color:#fff;
  font-size:13px;font-weight:700;padding:7px 16px;border-radius:999px;letter-spacing:1px;
}
.lead-text h2{font-size:clamp(22px,2.6vw,30px);margin:6px 0 16px;line-height:1.4}
.lead-text p{color:var(--c-text-2);margin-bottom:14px}

/* ---------- 文章网格 + 侧栏 ---------- */
.grid-sec{background:var(--c-ice-2);padding-top:60px}
.grid-layout{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}
.grid-wrap{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.g-card{
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:transform var(--trans),box-shadow var(--trans);
}
.g-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.g-thumb{display:block;overflow:hidden}
.g-thumb img{aspect-ratio:16/10;object-fit:cover;width:100%;transition:transform .6s}
.g-card:hover .g-thumb img{transform:scale(1.07)}
.g-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.g-body a{
  font-size:16.5px;font-weight:700;color:var(--c-primary);line-height:1.5;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.g-card:hover .g-body a{color:var(--c-accent)}
.g-body p{
  font-size:13.5px;color:var(--c-muted);line-height:1.75;margin-bottom:14px;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.g-body time{font-size:12.5px;color:var(--c-muted)}

/* ---------- 侧栏 ---------- */
.cat-side{display:grid;gap:26px;position:sticky;top:100px}
.side-box{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:22px}
.side-img{padding:0;overflow:hidden}
.side-img img{width:100%;aspect-ratio:16/10;object-fit:cover}
.side-img-cap{padding:22px}
.side-img-cap b{font-size:17px;color:var(--c-primary);display:block;margin-bottom:6px}
.side-img-cap p{font-size:13.5px;color:var(--c-muted);margin-bottom:14px}
.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{display:grid;gap:14px}
.hot-list li{display:grid;gap:4px}
.hot-list a{display:flex;gap:10px;align-items:flex-start;font-size:14px;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}
.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}

/* ---------- 建站类型直达 ---------- */
.direct-sec{background:var(--c-white)}
.direct-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.direct-card{
  background:var(--c-ice-2);border:1px solid var(--c-line);border-radius:var(--radius-lg);
  padding:28px 24px;transition:all var(--trans);position:relative;overflow:hidden;
}
.direct-card::after{
  content:"→";position:absolute;right:20px;top:20px;font-size:18px;color:var(--c-accent);
  opacity:0;transform:translateX(-8px);transition:all var(--trans);
}
.direct-card:hover{background:var(--c-grad);border-color:transparent;transform:translateY(-6px)}
.direct-card:hover h3,.direct-card:hover p{color:#fff}
.direct-card:hover::after{opacity:1;transform:translateX(0)}
.direct-card h3{font-size:18px;margin-bottom:8px}
.direct-card p{font-size:13.5px;color:var(--c-muted);margin:0}

.contact-sec{padding-top:20px;background:var(--c-ice-2)}
.mobile-nav-body>a.active{color:var(--c-accent)!important;background:var(--c-ice)}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .grid-layout{grid-template-columns:1fr}
  .cat-side{position:static;grid-template-columns:1fr 1fr}
  .side-img{grid-column:1/-1}
}
@media (max-width:900px){
  .lead-strip{grid-template-columns:1fr;gap:32px;padding:28px}
  .direct-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .grid-wrap{grid-template-columns:1fr}
  .cat-side{grid-template-columns:1fr}
  .direct-grid{grid-template-columns:1fr}
}