/* ==========================================================================
   VPNAF — nodes.css
   线路页专属样式:页头、速览面板、线路类型卡、选线建议、地区徽章墙、后续链接
   ========================================================================== */

/* ---------- 页头 ---------- */
.nodes-head{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-block:clamp(36px,5vw,64px) clamp(28px,4vw,44px);
}
.nodes-head__dots{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(circle,var(--dot-color) 1px,transparent 1.2px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 72% 66% at 42% 34%,#000 10%,transparent 74%);
  mask-image:radial-gradient(ellipse 72% 66% at 42% 34%,#000 10%,transparent 74%);
}
.nodes-head__grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,48px);
  align-items:start;
}
.nodes-head__copy{min-width:0;}
.nodes-head__copy .lede{margin-bottom:22px;max-width:58ch;}
.nodes-head__copy .lede strong{color:var(--text);font-weight:600;}
.nodes-facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:24px;
}
.nodes-cta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}
.nodes-head__aside{min-width:0;}

/* ---------- 速览面板 ---------- */
.glance__head{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-muted);
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px dashed var(--border);
}
.glance{display:grid;gap:8px;}
.glance__row{
  display:grid;
  gap:4px;
  padding:12px 14px;
  border-radius:var(--radius-md);
  background:var(--white);
  box-shadow:inset 0 1px 0 var(--white),var(--shadow-row);
  min-width:0;
}
.glance__type{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.04em;
  color:var(--accent-ink);
  font-weight:600;
}
.glance__use{
  font-size:13.5px;
  line-height:1.55;
  color:var(--text-muted);
}
.glance__foot{
  margin-top:14px;
  font-size:12.5px;
  line-height:1.6;
  color:var(--text-muted);
}

/* ---------- 线路类型卡 ---------- */
.linetype-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  align-items:start;
}
.linetype-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:24px 22px;
  border-radius:var(--radius-xl);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--white),var(--shadow-card);
  min-width:0;
}
.linetype-card__name{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:800;
  letter-spacing:-0.01em;
  color:var(--text);
}
.linetype-card__tag{justify-self:start;}
.linetype-card dl{display:grid;gap:10px;margin:0;}
.linetype-card dl > div{display:grid;gap:3px;min-width:0;}
.linetype-card dt{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.linetype-card dd{
  margin:0;
  font-size:14.5px;
  line-height:1.68;
  color:var(--text-muted);
}

/* ---------- 选线建议 ---------- */
.picker{
  display:grid;
  gap:10px;
  margin-bottom:clamp(28px,3.6vw,44px);
}
.picker__row{
  display:grid;
  grid-template-columns:minmax(0,200px) minmax(0,1fr);
  gap:clamp(12px,2vw,28px);
  align-items:baseline;
  padding:16px 20px;
  border-radius:var(--radius-lg);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--white),var(--shadow-card);
  min-width:0;
}
.picker__use{
  font-family:var(--font-display);
  font-size:15.5px;
  font-weight:800;
  letter-spacing:-0.01em;
  color:var(--text);
  min-width:0;
}
.picker__pick{
  font-size:14.5px;
  line-height:1.7;
  color:var(--text-muted);
  min-width:0;
}
.picker__pick b{
  font-weight:700;
  color:var(--accent-ink);
}

/* ---------- 补充说明 ---------- */
.notes{
  display:grid;
  gap:12px;
  max-width:78ch;
}
.notes h3{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:800;
  color:var(--text);
  margin-top:8px;
}
.notes p{
  font-size:15.5px;
  line-height:1.75;
  color:var(--text-muted);
}
.notes ul{
  display:grid;
  gap:8px;
  list-style:none;
  padding:0;
  margin:0;
}
.notes li{
  position:relative;
  padding-left:20px;
  font-size:15px;
  line-height:1.7;
  color:var(--text-muted);
}
.notes li::before{
  content:"";
  position:absolute;
  left:2px;
  top:10px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent-dark);
}
.notes li b{color:var(--text);font-weight:700;}

/* ---------- 地区徽章墙 ---------- */
.region-wall{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:100%;
}
.region-wall .badge{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.02em;
}

/* ---------- FAQ 收窄 ---------- */
.faq--narrow{max-width:860px;}

/* ---------- 后续链接 ---------- */
.next-links{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin-top:clamp(20px,2.6vw,30px);
}
.next-link{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:20px;
  border-radius:var(--radius-lg);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--white),var(--shadow-card);
  min-width:0;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.next-link:hover{
  transform:translateY(-2px);
  border-color:var(--accent-dark);
  box-shadow:var(--shadow-lift),inset 0 1px 0 var(--white);
}
.next-link__label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent-ink);
}
.next-link__title{
  font-family:var(--font-display);
  font-size:16.5px;
  font-weight:800;
  letter-spacing:-0.01em;
  color:var(--text);
}
.next-link__note{
  font-size:13.5px;
  line-height:1.6;
  color:var(--text-muted);
}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .nodes-head__grid{grid-template-columns:minmax(0,1fr);gap:28px;}
  .nodes-head__aside{max-width:560px;}
}

@media (max-width:900px){
  .picker__row{grid-template-columns:minmax(0,1fr);gap:6px;}
  .linetype-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
}

@media (max-width:640px){
  .nodes-head{padding-block:28px 32px;}
  .nodes-facts{gap:6px;}
  .linetype-card{padding:20px 18px;}
  .picker__row{padding:14px 16px;}
  .next-link{padding:16px;}
  .region-wall .badge{font-size:11px;}
}

@media (prefers-reduced-motion:reduce){
  .next-link,.next-link:hover{transform:none;transition:none;}
}