/* ============================================================
   资讯栏目 · 设计趋势（news-sheji）
   Hero：H4 左图右文镜像对撞 + 双线框装饰
   列表：双栏杂志式（kicker 栏目标签 + 卡片错落）
   布局签名：图片后双线框偏移装饰 + 问题清单竖排编号
   ============================================================ */

/* ---------- H4 Hero ---------- */
.ban4{padding:150px 0 60px;background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 70%,var(--paper) 100%)}
.ban4-battle{align-items:center}
.ban4-media{position:relative}
.ban4-media img{border-radius:18px;box-shadow:var(--shadow-md)}
/* 签名：双线框偏移 */
.ban4-frame{
  position:absolute;inset:22px -22px -22px 22px;z-index:-1;border-radius:18px;
  border:2px solid var(--sand);
  outline:2px solid var(--sand-light);outline-offset:6px;
}
.eyebrow4{
  display:inline-block;font-size:13px;letter-spacing:.3em;color:var(--gold-deep);
  margin-bottom:16px;
}
.battle-copy h1{font-size:clamp(28px,4vw,44px);margin-bottom:18px}
.battle-copy>p{font-size:16px;margin-bottom:22px}
.ban4-points{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.ban4-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ban4-tel{display:inline-flex;align-items:center;gap:10px;color:var(--brown)}
.ban4-tel b{font-family:var(--font-serif);font-size:22px;color:var(--brown)}
.ban4-crumb{margin-top:26px}

.wave-flip{transform:scaleY(-1)}

/* ---------- 分类标签带 ---------- */
.tag-sec{padding-bottom:10px}
.tag-band{display:flex;flex-wrap:wrap;gap:12px}
.tag-band .tag{font-size:14px;padding:8px 18px;transition:all .25s}
.tag-band .tag:hover{border-color:var(--gold);color:var(--gold-deep);transform:translateY(-2px)}

/* ---------- 双栏杂志式列表 ---------- */
.mag-sec{background:var(--paper)}
.mag-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px 30px}
.mag-card{
  background:var(--cream);border:1px solid var(--line-soft);border-radius:18px;
  overflow:hidden;transition:transform .3s,box-shadow .3s;
}
/* 签名：右列卡片下错 34px */
.mag-grid .mag-card:nth-child(even){transform:translateY(34px)}
.mag-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.mag-grid .mag-card:nth-child(even):hover{transform:translateY(30px)}
.mag-kicker{
  padding:16px 26px 0;font-size:12px;letter-spacing:.24em;color:var(--gold-deep);
  font-family:var(--font-serif);
}
.mag-thumb{display:block;overflow:hidden;padding:14px 26px 0}
.mag-thumb img{width:100%;border-radius:12px;transition:transform .6s ease}
.mag-card:hover .mag-thumb img{transform:scale(1.04)}
.mag-body{padding:20px 26px 24px}
.mag-body h3{font-size:20px;margin-bottom:10px;line-height:1.5}
.mag-body h3 a:hover{color:var(--gold-deep)}
.mag-body p{font-size:14px;line-height:1.85}
.mag-meta{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:16px;padding-top:13px;border-top:1px dashed var(--line);
  font-size:13px;color:var(--muted);
}
.mag-meta a{color:var(--gold-deep);font-weight:600}

/* ---------- 热门专题 ---------- */
.hot-sec{background:var(--cream-deep)}
.hot-battle{margin-bottom:64px}
.hot-battle-2{margin-bottom:0}
.battle-copy h3{margin:14px 0 12px}
.battle-copy .check-list{margin:14px 0 24px}

/* ---------- 设计自查四问（竖排编号清单） ---------- */
.q-sec{background:var(--cream)}
.q-list{display:flex;flex-direction:column;gap:18px}
.q-item{
  display:flex;gap:22px;background:var(--paper);border:1px solid var(--line-soft);
  border-radius:16px;padding:24px 28px;box-shadow:var(--shadow-sm);
  transition:transform .3s,box-shadow .3s;
}
/* 签名：奇数项轻微左错 */
.q-item:nth-child(odd){transform:translateX(-22px)}
.q-item:hover{transform:translateX(-22px) translateY(-3px);box-shadow:var(--shadow-md)}
.q-no{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:12px;background:var(--gold);color:var(--brown-dark);
  font-family:var(--font-serif);font-size:16px;font-weight:700;
}
.q-item h4{font-size:17px;margin-bottom:6px}
.q-item p{font-size:14px}

/* ---------- CTA ---------- */
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.f-mail{font-size:15px;color:var(--gold-bright)}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .mag-grid{grid-template-columns:1fr}
  .mag-grid .mag-card:nth-child(even){transform:none}
  .mag-grid .mag-card:nth-child(even):hover{transform:translateY(-4px)}
  .q-item:nth-child(odd){transform:none}
  .q-item:hover{transform:translateY(-3px)}
}
@media (max-width:768px){
  .ban4{padding:120px 0 40px}
  .ban4-frame{inset:14px;outline-offset:4px}
  .q-item{flex-direction:column;gap:14px}
}