/* ==========================================================================
   VPNDU · nodes.css
   服务器节点页专属:覆盖概览与地区徽章墙 / 线路类型说明卡 / 按用途选线卡
   仅本页使用,不重复定义 base.css 与 components.css 中已有的组件
   ========================================================================== */

/* 段落级引语(用于覆盖概览与收尾区块的说明句) */
.nd-lead{
  margin-top:18px;
  color:var(--text-muted);
  font-size:15px;
  line-height:1.8;
  max-width:820px;
}

/* 地区 / 城市徽章墙 */
.nd-wall{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
  max-width:100%;
}
.nd-wall .chip{min-width:0}

/* 线路类型说明卡 */
.nd-type-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}
.nd-type{
  position:relative;
  min-width:0;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:26px 22px 22px;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.nd-type:hover{transform:translateY(-2px);box-shadow:var(--shadow-card);border-color:var(--accent)}
.nd-type::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:4px;
  background:var(--grad-band);
}
.nd-type h3{
  margin-top:14px;
  font-size:17px;
  line-height:1.4;
}
.nd-type p{
  margin-top:12px;
  font-size:14.5px;
  line-height:1.8;
  color:var(--text-muted);
}
.nd-type .nd-when{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border);
  font-size:13.5px;
  color:var(--text);
}
.nd-type .nd-when strong{color:var(--accent-dark)}

/* 类型对比表与上方说明的间距 */
.nd-type-table{margin-top:26px}

/* 按用途选线卡 */
.nd-pick-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:18px;
}
.nd-pick{
  min-width:0;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  transition:border-color .18s,box-shadow .18s;
}
.nd-pick:hover{border-color:var(--accent);box-shadow:var(--shadow-soft)}
.nd-pick h3{
  font-size:17px;
  line-height:1.35;
}
.nd-pick p{
  margin-top:10px;
  font-size:14.5px;
  line-height:1.8;
  color:var(--text-muted);
}
.nd-pick-line{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.nd-pick-line .chip{
  background:var(--white);
  font-size:12.5px;
  min-width:0;
}

/* 收尾面板里的按钮行与段落的间距 */
#sec-next .panel .btn-row{margin-top:20px}

@media (max-width:640px){
  .nd-type{padding:22px 18px 18px}
  .nd-pick{padding:18px 16px}
  .nd-wall{gap:6px}
}