/* ============================================================================
   VPNJM · nodes page
   线路/节点页专属：事实胶囊行、线路类型三卡、选线建议拼盘、地区徽章墙。
   所有颜色与圆角只引用 base.css 的令牌，不在此层新增硬编码取值。
   ========================================================================== */

/* ── 页头事实胶囊 ──────────────────────────────────────────────────────── */
.nodes-facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
  min-width:0;
}
.nodes-facts .chip{flex:none}

.nodes-note{
  margin-top:14px;
  max-width:78ch;
  font-size:12.5px;
  line-height:1.72;
  color:var(--text-muted);
}

/* ── 线路类型三卡 ──────────────────────────────────────────────────────── */
.nodes-types{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  min-width:0;
}
.nodes-type{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  padding:24px 22px 22px;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--white) 0%,var(--bg-panel-3) 58%,var(--bg-panel-2) 100%);
  border:1px solid rgb(var(--text-rgb)/.08);
  box-shadow:var(--shadow-card);
}
.nodes-type-k{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--text-muted);
}
.nodes-type h3{font-size:19px}
.nodes-type > p{font-size:13px;line-height:1.7;color:var(--text-muted)}

.nodes-type-facts{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
  padding-top:12px;
  border-top:1px dashed rgb(var(--text-rgb)/.16);
}
.nodes-type-facts > div{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  align-items:start;
}
.nodes-type-facts dt{
  padding-top:;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--accent);
  white-space:nowrap;
}
.nodes-type-facts dd{
  margin:0;
  font-size:13px;
  line-height:1.72;
  color:var(--text-muted);
}

/* ── 选线建议拼盘（3 + 2 错落） ────────────────────────────────────────── */
.nodes-picks{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
  min-width:0;
}
.nodes-pick{
  grid-column:span 2;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  padding:22px;
  border-radius:var(--r-md);
  background:var(--bg-panel);
  border:1px solid rgb(var(--text-rgb)/.08);
  box-shadow:var(--shadow-soft);
}
.nodes-pick:nth-child(4),
.nodes-pick:nth-child(5){
  grid-column:span 3;
  background:linear-gradient(160deg,var(--white) 0%,var(--bg-panel-3) 100%);
}
.nodes-pick-k{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--accent);
  white-space:nowrap;
}
.nodes-pick h3{font-size:16.5px}
.nodes-pick p{font-size:13px;line-height:1.72;color:var(--text-muted)}

/* ── 地区徽章墙 ────────────────────────────────────────────────────────── */
.nodes-wall{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}

/* ── 响应式 ────────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .nodes-picks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nodes-pick,
  .nodes-pick:nth-child(4),
  .nodes-pick:nth-child(5){grid-column:auto}
  .nodes-pick:last-child{grid-column:1 / -1}
}

@media (max-width:900px){
  .nodes-types{grid-template-columns:1fr}
}

@media (max-width:640px){
  .nodes-type{padding:20px 18px}
  .nodes-pick{padding:18px}
  .nodes-picks{grid-template-columns:1fr}
  .nodes-pick:last-child{grid-column:auto}
  .nodes-facts .chip{font-size:11px}
}