/* ============================================================
   hhlsq.com — news.css 资讯列表页专属样式
   布局指纹：页首图带 + 左侧频道列表/右侧侧栏 + 服务速览条 + 深蓝 CTA
   ============================================================ */

/* ---------- 1. 页首 ---------- */
.news-hero{ background:var(--gray-100); padding-bottom:clamp(40px,5vw,64px); position:relative; overflow:hidden; }
.news-hero::before{
  content:""; position:absolute; right:-120px; top:-120px; width:340px; height:340px;
  border-radius:50%; border:1px dashed var(--gray-300);
}
.news-hero::after{
  content:""; position:absolute; left:-80px; bottom:-140px; width:260px; height:260px;
  border-radius:50%; border:1px dashed rgba(176,141,74,.5);
}
.news-hero__row{ display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:center; position:relative; z-index:1; }
.news-hero__eyebrow{ margin-bottom:12px; }
.news-hero__title{ font-size:clamp(26px,3.4vw,38px); margin-bottom:14px; }
.news-hero__lead{ color:var(--gray-600); font-size:15.5px; max-width:480px; }
.news-hero__media img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }

/* ---------- 2. 主区 ---------- */
.news-layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:30px; align-items:start; }
.news-list-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:22px; }
.news-list-head__title{ font-size:22px; position:relative; padding-left:14px; }
.news-list-head__title::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:22px; border-radius:2px; background:var(--gold); }
.news-list-head__note{ font-size:13px; color:var(--gray-500); }

/* 频道列表 */
.channel-list{ display:flex; flex-direction:column; gap:18px; }
.channel-item{
  display:grid; grid-template-columns:250px 1fr; gap:20px;
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:16px; transition:all .3s ease;
}
.channel-item:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); }
.channel-item__media{ display:block; aspect-ratio:16/10; border-radius:var(--radius-md); overflow:hidden; }
.channel-item__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.channel-item:hover .channel-item__media img{ transform:scale(1.06); }
.channel-item__title{ font-size:17px; margin-bottom:8px; }
.channel-item__title a{ color:var(--navy-900); }
.channel-item__title a:hover{ color:var(--navy-600); }
.channel-item__desc{
  color:var(--gray-600); font-size:14px; line-height:1.75;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.channel-item__time{ display:inline-block; font-size:12.5px; color:var(--gray-400); margin-top:10px; }
.channel-item__more{
  display:inline-block; margin-left:14px; font-size:13.5px; font-weight:600; color:var(--navy-600);
}
.channel-item__more:hover{ color:var(--gold); }

/* ---------- 3. 侧栏 ---------- */
.news-sidebar{ display:flex; flex-direction:column; gap:20px; position:sticky; top:120px; }
.side-card{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:24px; }
.side-card--contact{ background:linear-gradient(150deg,var(--navy-800),var(--navy-700)); color:#fff; }
.side-card__title{ font-size:16.5px; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.side-card--contact .side-card__title{ color:#fff; }
.side-card--contact .side-card__title::before{ content:""; width:18px; height:2px; background:var(--gold); }
.side-card__text{ font-size:13.5px; color:rgba(232,238,245,.8); margin-bottom:16px; }
.side-card--contact .btn{ width:100%; }
.side-card__mini{ font-size:12px; color:rgba(232,238,245,.65); margin-top:10px; text-align:center; }
.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:14px; color:var(--gray-700); }
.side-links a:hover{ color:var(--navy-600); padding-left:8px; }
.side-links--dot a::before{ content:"·"; color:var(--gold); font-weight:700; margin-right:6px; }

/* ---------- 4. 服务速览 ---------- */
.svc-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.svc-chip{
  display:flex; align-items:center; gap:10px; background:var(--gray-100);
  border:1px solid var(--gray-200); border-radius:var(--radius-md); padding:16px 18px;
  font-size:14.5px; font-weight:600; color:var(--navy-900); transition:all .3s ease;
}
.svc-chip span{ color:var(--gold); font-size:12.5px; font-weight:700; }
.svc-chip:hover{ background:var(--navy-700); color:#fff; transform:translateY(-4px); box-shadow:var(--shadow-md); }
.svc-chip:hover span{ color:var(--gold-soft); }

/* ---------- 5. CTA ---------- */
.news-cta__inner{ text-align:center; }
.news-cta__inner h2{ color:#fff; font-size:clamp(22px,3vw,30px); margin-bottom:10px; }
.news-cta__inner p{ color:rgba(232,238,245,.78); font-size:15px; margin-bottom:26px; }
.news-cta__actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.news-cta__ghost{ border-color:rgba(255,255,255,.5); color:#fff; }
.news-cta__ghost:hover{ background:#fff; color:var(--navy-700); }

/* ---------- 响应式 ---------- */
@media (max-width: 992px){
  .news-hero__row{ grid-template-columns:1fr; }
  .news-layout{ grid-template-columns:1fr; }
  .news-sidebar{ position:static; }
  .svc-strip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .channel-item{ grid-template-columns:1fr; }
  .channel-item__media{ aspect-ratio:16/9; }
  .svc-strip{ grid-template-columns:1fr 1fr; gap:12px; }
  .svc-chip{ padding:13px 14px; font-size:13.5px; }
}