/* 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}
}

/* TOPICS_V1 文章末尾「相关话题阅读」: 只标题, 单行, 最多 10 条; 电脑双列(5+5, 先排满左列再排右列), 手机单列 */
.rel-tp{margin:36px 0 8px;container-type:inline-size}
.rel-tp .rel-hd{margin:0 0 6px}
.rel-tp .rel-h{font-size:20px}
.rel-tp-l{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--rel-tp-r,5),auto);column-gap:34px}
.rel-tp-l li{min-width:0;margin:0;padding:0;list-style:none;background:none}
.rel-tp-l li::before,.rel-tp-l li::marker{content:none}
.rel-tp-l a{display:flex;align-items:center;gap:10px;height:42px;border-bottom:1px solid #eef1f6;color:var(--rel-tx,#1f2937);font-size:15px;line-height:1.4;text-decoration:none}
.rel-tp-l li.e a{border-bottom-color:transparent}
.rel-tp-l a i{flex:none;display:flex;color:var(--rel-c,#1d4ed8);opacity:.85}
.rel-tp-l a span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel-tp-l a:hover span{color:var(--rel-c,#1d4ed8)}
.rel-tp-l a:focus-visible{outline:2px solid var(--rel-c,#1d4ed8);outline-offset:2px;border-radius:4px}
[dir="rtl"] .rel-tp-l a i svg{transform:scaleX(-1)}
@media(max-width:640px){
  .rel-tp-l{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .rel-tp-l li.e a{border-bottom-color:#eef1f6}
  .rel-tp-l li:last-child a{border-bottom-color:transparent}
}
@container (max-width:560px){
  .rel-tp-l{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .rel-tp-l li.e a{border-bottom-color:#eef1f6}
  .rel-tp-l li:last-child a{border-bottom-color:transparent}
}