/* RELATE_V1 相关文章 / 相关产品 / 分类关联区块 (颜色跟随主题变量) */
.rel{--rel-c:var(--primary-blue,#1d4ed8);--rel-ch:var(--hover-blue,#1e40af);--rel-bd:#e5e8ee;
  --rel-tx:#1f2937;--rel-mu:#6b7280;box-sizing:border-box;color:var(--rel-tx);clear:both}
.rel *,.rel *::before,.rel *::after{box-sizing:border-box}
.rel-pn{padding:56px 0 8px}
.rel-in{margin:0;padding:0}
.rel-np,.rel-cat{margin:32px 0 0}
.rel-np{background:#fff;border:1px solid var(--rel-bd);border-radius:12px;padding:24px}
.rel-hd{display:flex;align-items:center;gap:12px;margin:0 0 20px}
.rel-hd::before{content:"";width:4px;height:22px;border-radius:2px;background:var(--rel-c);flex:none}
.rel-h{margin:0;font-size:24px;line-height:1.3;font-weight:700;color:var(--rel-tx)}
.rel-np .rel-h,.rel-cat .rel-h{font-size:20px}
.rel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.rel-grid.rel-c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rel-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--rel-bd);
  border-radius:10px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.rel-card:hover{border-color:rgba(var(--primary-rgb,29,78,216),.35);
  box-shadow:var(--shadow-md,0 6px 18px rgba(15,23,42,.08))}
.rel-media{display:block;position:relative;background:var(--bg-light,#f5f7fa);overflow:hidden}
.rel-art .rel-media{aspect-ratio:16/10}
.rel-pro .rel-media,.rel-ser .rel-media{aspect-ratio:1/1}
.rel-media img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;
  object-fit:cover;transition:transform .35s}
.rel-card:hover .rel-media img{transform:scale(1.04)}
.rel-noimg{position:absolute;inset:0;background:linear-gradient(135deg,var(--primary-light,#eef4ff),#f8fafc)}
.rel-body{display:flex;flex-direction:column;gap:8px;flex:1;padding:14px 16px 16px}
.rel-dt{font-size:13px;line-height:1.4;color:var(--rel-mu)}
.rel-tt{margin:0;font-size:16px;line-height:1.45;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.rel-tt a{color:var(--rel-tx);text-decoration:none}
.rel-tt a:hover{color:var(--rel-c)}
.rel-d{margin:0;font-size:14px;line-height:1.6;color:var(--rel-mu);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.rel-pro .rel-tt,.rel-ser .rel-tt{font-size:15px;text-align:center}
.rel-q,.rel-more{margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:38px;
  padding:8px 12px;border-radius:8px;font-size:14px;font-weight:600;line-height:1.3;text-align:center;
  text-decoration:none!important;transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.rel-q{background:var(--rel-c);border:1px solid var(--rel-c);color:#fff!important}
.rel-q:hover{background:var(--rel-ch);border-color:var(--rel-ch)}
.rel-more{background:#fff;border:1px solid var(--rel-c);color:var(--rel-c)!important}
.rel-more:hover{background:var(--rel-c);color:#fff!important}
.rel a:focus-visible{outline:2px solid var(--rel-c);outline-offset:2px}
@media (max-width:900px){
  .rel-grid,.rel-grid.rel-c3{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .rel-pn{padding:40px 0 4px}
  .rel-h{font-size:20px}
}
@media (max-width:768px){
  .rel-np{padding:16px;border-radius:10px}
}
@media (max-width:480px){
  .rel-grid,.rel-grid.rel-c3{gap:10px}
  .rel-body{padding:10px 10px 12px;gap:6px}
  .rel-tt,.rel-pro .rel-tt,.rel-ser .rel-tt{font-size:14px}
  .rel-d{display:none}
  .rel-q,.rel-more{font-size:13px;min-height:34px;padding:6px 8px}
}
@media (prefers-reduced-motion:reduce){
  .rel-card,.rel-media img{transition:none}
  .rel-card:hover .rel-media img{transform:none}
}