/* ==========================================================================
   浪知潮 · 相关服务导航（内链模块）
   文件：/v2/related.css
   用途：在栏目页与方案详情页提供一组「相关服务」锚文本链接，
         与 iLink 插件的正文内链互补（插件只作用于新闻详情页正文）。
   类名前缀 zdl-（ZhiDaoLian），避免与 style.css 既有命名空间冲突。
   ========================================================================== */

.zdl-rel{
  padding:64px 0 72px;
  background:var(--bg);
  border-top:1px solid var(--line);
}
.zdl-rel .zdl-inner{
  max-width:1200px;margin:0 auto;padding:0 22px;
}

/* ---------- 标题 ---------- */
.zdl-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:28px;
}
.zdl-head .zdl-eyebrow{
  display:inline-block;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  color:var(--brand-600);
  background:var(--brand-50);
  border:1px solid var(--brand-100);
  border-radius:999px;padding:3px 11px;margin-bottom:10px;
}
.zdl-head h2{
  font-size:23px;line-height:1.35;margin:0;font-weight:800;
  letter-spacing:-.2px;color:var(--ink);
}
.zdl-head h2 em{
  font-style:normal;
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.zdl-head .zdl-sub{
  margin:8px 0 0;font-size:13.5px;line-height:1.7;color:var(--ink-4);
  max-width:660px;
}

/* ---------- 链接网格 ---------- */
.zdl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:10px;
}
.zdl-link{
  position:relative;
  display:flex;align-items:center;gap:9px;
  padding:13px 15px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  text-decoration:none;color:var(--ink-2);
  font-size:14px;font-weight:600;line-height:1.45;
  transition:border-color .22s ease,background .22s ease,
             color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.zdl-link::before{
  content:"";flex:none;
  width:5px;height:5px;border-radius:50%;
  background:var(--brand-300);
  transition:background .22s ease,transform .22s ease;
}
.zdl-link .zdl-arrow{
  margin-left:auto;flex:none;
  width:13px;height:13px;opacity:0;
  transform:translateX(-4px);
  transition:opacity .22s ease,transform .22s ease;
  color:var(--brand-500);
}
.zdl-link:hover,
.zdl-link:focus-visible{
  border-color:var(--brand-200);
  background:var(--brand-50);
  color:var(--brand-700);
  transform:translateY(-2px);
  box-shadow:0 10px 22px -14px rgba(37,99,235,.45);
  outline:none;
}
.zdl-link:hover::before,
.zdl-link:focus-visible::before{background:var(--cyan);transform:scale(1.35)}
.zdl-link:hover .zdl-arrow,
.zdl-link:focus-visible .zdl-arrow{opacity:1;transform:translateX(0)}

/* 当前页标记：不跳转、不做链接 */
.zdl-link.is-now{
  background:var(--bg-soft);
  border-color:var(--brand-100);
  color:var(--brand-700);
  cursor:default;
  pointer-events:none;
}
.zdl-link.is-now::before{background:var(--brand-500)}
.zdl-link.is-now .zdl-now{
  margin-left:auto;flex:none;
  font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--brand-500);background:var(--brand-100);
  border-radius:4px;padding:1px 6px;
}

/* ---------- 深底区块内的变体（如 CTA 前后） ---------- */
.zdl-rel.zdl-dark{
  background:var(--brand-950);
  border-top-color:rgba(226,236,255,.12);
}
.zdl-rel.zdl-dark .zdl-head h2{color:#fff}
.zdl-rel.zdl-dark .zdl-head .zdl-sub{color:rgba(226,236,255,.72)}
.zdl-rel.zdl-dark .zdl-eyebrow{
  color:var(--cyan-soft);
  background:rgba(34,211,238,.1);
  border-color:rgba(34,211,238,.3);
}
.zdl-rel.zdl-dark .zdl-link{
  background:rgba(255,255,255,.04);
  border-color:rgba(226,236,255,.14);
  color:rgba(226,236,255,.9);
}
.zdl-rel.zdl-dark .zdl-link:hover{
  background:rgba(37,99,235,.22);
  border-color:rgba(96,165,250,.5);
  color:#fff;
}

/* ---------- 响应式 ---------- */
@media(max-width:768px){
  .zdl-rel{padding:46px 0 52px}
  .zdl-head{flex-direction:column;align-items:flex-start;gap:0;margin-bottom:20px}
  .zdl-head h2{font-size:19px}
  .zdl-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .zdl-link{padding:11px 12px;font-size:13px}
}
@media(max-width:560px){
  .zdl-rel .zdl-inner{padding:0 16px}
  .zdl-grid{grid-template-columns:1fr}
  .zdl-link{padding:12px 13px}
}
@media(prefers-reduced-motion:reduce){
  .zdl-link,.zdl-link::before,.zdl-arrow{transition:none}
  .zdl-link:hover{transform:none}
}