/* ============================================================
   lnwmold.com —— 资讯列表页样式（独立原创：拼接积木风）
   文件：css/news.css  依赖：css/base.css
   ============================================================ */

/* ---------- 页首横幅：圆润拼接积木 ---------- */
.page-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg,var(--yellow-soft) 0%,var(--pink-soft) 60%,var(--green-soft) 100%);
  border-bottom:2px dashed var(--pink-mid);
}
.ph-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.2fr .8fr; gap:20px;
  align-items:center; padding-top:64px; padding-bottom:76px;
}
.ph-text .tag{ margin-bottom:14px; }
.ph-text h1{ margin-bottom:12px; }
.ph-text p{ font-size:16px; max-width:520px; }
.ph-contact{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.ph-blocks{ position:relative; height:230px; }
.ph-block{
  position:absolute; border-radius:var(--r-l);
  box-shadow:var(--shadow-s);
}
.b1{ width:180px; height:150px; background:var(--white); left:0; top:8px; transform:rotate(-6deg); border:2px dashed var(--yellow); }
.b2{ width:150px; height:120px; background:var(--pink-soft); right:6px; top:0; transform:rotate(5deg); border:2px dashed var(--pink-mid); }
.b3{ width:120px; height:90px; background:var(--green-soft); right:90px; bottom:0; transform:rotate(-4deg); border:2px dashed var(--green-mid); }
.ph-sun{
  position:absolute; right:30px; bottom:14px; width:56px; height:56px;
  background:var(--yellow); border-radius:50%;
  box-shadow:0 0 0 10px rgba(245,184,46,.25);
}

/* ---------- 资讯列表 ---------- */
.newslist{ padding:60px 0 20px; }
.nl-head{ margin-bottom:26px; }
.nl-head h2{ font-size:26px; }
.nl-head p{ color:var(--body); font-size:14px; }
.nl-card{
  background:var(--white); border-radius:var(--r-m);
  border:2px dashed transparent; box-shadow:var(--shadow-s);
  margin-bottom:18px; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.nl-card:hover{ transform:translateY(-5px); border-color:var(--yellow); box-shadow:var(--shadow-m); }
.nl-link{ display:flex; align-items:stretch; }
.nl-thumb{
  width:300px; flex:none; overflow:hidden;
}
.nl-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.nl-card:hover .nl-thumb img{ transform:scale(1.05); }
.nl-body{
  flex:1; padding:24px 26px;
  display:flex; flex-direction:column; gap:10px;
}
.nl-body h3{ font-size:19px; transition:color .2s ease; }
.nl-card:hover .nl-body h3{ color:var(--pink-deep); }
.nl-body p{
  font-size:14.5px; color:var(--body); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.nl-meta{
  margin-top:auto; display:flex; justify-content:space-between; align-items:center;
}
.nl-meta time{ font-size:13px; font-weight:700; color:var(--yellow-deep); }
.nl-meta i{ font-style:normal; font-size:13px; font-weight:700; color:var(--pink-deep); }

/* ---------- 相关服务入口 ---------- */
.relsvc{ padding:50px 0 20px; }
.rel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.rel-tile{
  display:flex; flex-direction:column; gap:6px;
  background:var(--white); border-radius:var(--r-m);
  border:2px dashed transparent; box-shadow:var(--shadow-s);
  padding:24px 20px;
  transition:transform .3s ease, border-color .3s ease;
}
.rel-tile:hover{ transform:translateY(-5px) rotate(-.5deg); border-color:var(--pink); }
.rel-tile b{ font-size:17px; color:var(--ink); }
.rel-tile span{ font-size:13px; color:var(--body); }
.rel-y{ background:linear-gradient(135deg,#fff,var(--yellow-soft)); }
.rel-p{ background:linear-gradient(135deg,#fff,var(--pink-soft)); }
.rel-g{ background:linear-gradient(135deg,#fff,var(--green-soft)); }

/* ---------- 底部 CTA ---------- */
.nl-cta{
  margin:60px 20px 0; border-radius:var(--r-xl);
  background:linear-gradient(120deg,var(--yellow),var(--pink));
  text-align:center; padding:56px 20px;
}
.nl-cta h2{ color:#fff; margin-bottom:10px; }
.nl-cta p{ color:#fff; font-weight:700; margin-bottom:22px; }
.nl-cta .btn{ margin:0 6px; }

/* ---------- 响应式 ---------- */
@media (max-width:1023.98px){
  .ph-inner{ grid-template-columns:1fr; padding-top:48px; padding-bottom:54px; }
  .ph-blocks{ display:none; }
  .rel-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767.98px){
  .nl-link{ flex-direction:column; }
  .nl-thumb{ width:100%; aspect-ratio:16/9; }
  .rel-grid{ grid-template-columns:1fr; }
  .nl-cta{ margin:46px 12px 0; padding:44px 16px; }
}