/* =========================================================
   VPNTd nodes.css — locations page(服务器节点与线路)
   Page-specific layout only; colors/fonts reference :root tokens.
   ========================================================= */

/* ---------------- page head ---------------- */
.nodes-head{
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(760px 380px at 84% 18%,var(--accent-glow-soft),transparent 70%),
    var(--bg);
  overflow-x:clip;
}
.nodes-head-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:48px;
  align-items:center;
  padding-top:56px;
  padding-bottom:56px;
}
.nodes-head-copy{min-width:0}
.nodes-head h1{margin:18px 0 20px}
.nodes-head .lede{margin-bottom:22px}
.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:26px;
}
.nodes-head .cta-row{margin-bottom:0}

/* mono code tag shared by region / line-type / use cards */
.code-tag{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--accent-dark);
  margin-bottom:8px;
}

/* ---------------- head visual: node topology card ---------------- */
.nodes-visual{
  background:var(--panel);
  background-image:radial-gradient(var(--dot) 1px,transparent 1px);
  background-size:18px 18px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 20px 50px rgba(0,0,0,.38);
  padding:18px;
  min-width:0;
}
.nodes-visual svg{display:block;width:100%;height:auto}
.nd-line{stroke:var(--trace);stroke-width:1.4;fill:none;opacity:.55}
.nd-line-hot{stroke:var(--accent-dark);stroke-width:1.8;fill:none;opacity:.85}
.nd-orbit{stroke:var(--border);stroke-width:1;fill:none;stroke-dasharray:3 6;opacity:.8}
.nd-node{fill:var(--panel2);stroke:var(--trace);stroke-width:1.4}
.nd-via{fill:var(--bg);stroke:var(--trace);stroke-width:1.2}
.nd-hub-ring{fill:none;stroke:var(--accent-dark);stroke-width:1.6}
.nd-hub-core{fill:var(--accent)}
.nd-hub-halo{fill:var(--accent);opacity:.18}
.nd-label{font-family:var(--font-mono);font-size:10px;fill:var(--muted);letter-spacing:.08em}
.nd-label-hot{font-family:var(--font-mono);font-size:10px;fill:var(--text);letter-spacing:.08em}

/* ---------------- region mini cards ---------------- */
.region-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:26px;
  margin-bottom:26px;
}
.region-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  min-width:0;
}
.region-card h3{font-size:15px;margin-bottom:8px}
.region-card p{font-size:13px;color:var(--muted);line-height:1.7}

/* ---------------- line type cards ---------------- */
.lt-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:26px;
}
.lt-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  min-width:0;
}
.lt-card h3{font-size:17px;margin-bottom:12px}
.lt-card p{font-size:13.5px;color:var(--muted);line-height:1.75;margin-bottom:10px}
.lt-card p:last-child{margin-bottom:0}
.lt-card p strong{color:var(--text)}

/* ---------------- use-case cards ---------------- */
.use-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:26px;
}
.use-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  min-width:0;
  transition:border-color .15s;
}
.use-card:hover{border-color:var(--accent-dark)}
.use-card h3{font-size:15.5px;margin:2px 0 8px}
.use-card p{font-size:13.5px;color:var(--muted);line-height:1.75}

/* ---------------- updates section ---------------- */
.faq-sub{
  font-size:17px;
  margin:34px 0 14px;
}
#updates .prose{margin-top:8px}

/* ---------------- closing cta ---------------- */
.nodes-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px 30px;
}
.nodes-cta-copy{flex:1 1 340px;min-width:0}
.nodes-cta-brand{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--accent-dark);
  margin-bottom:8px;
}
.nodes-cta p{font-size:14.5px;color:var(--muted);line-height:1.8;max-width:640px}
.nodes-cta .cta-row{flex:0 0 auto;margin-bottom:0}

/* ---------------- breakpoints ---------------- */
@media (max-width:960px){
  .nodes-head-grid{grid-template-columns:1fr;gap:32px}
  .region-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lt-grid{grid-template-columns:1fr}
  .use-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .region-grid{grid-template-columns:1fr}
  .use-grid{grid-template-columns:1fr}
  .nodes-cta{padding:22px 20px}
}