/* ============================================================
   VPNBQ — nodes.css
   线路列表页(servers.html)专属样式
   依赖 base.css 的设计令牌与 components.css 的通用组件
   ============================================================ */

/* ---- 页头 ---- */
.nodes-head{
  display:grid;
  gap:18px;
  max-width:920px;
  min-width:0;
}
.nodes-head h1{max-width:760px}
.nodes-head .lede{max-width:660px}
.nodes-head .fact-band{margin-top:4px;width:100%}
.nodes-head .btn-row{margin-top:4px}

/* ---- 正文骨架(目录条的直接父元素,覆盖全部章节) ---- */
.nodes-body{
  display:block;
  min-width:0;
  padding-bottom:88px;
}
.nodes-sec{
  padding-top:64px;
  min-width:0;
}
.nodes-sec > .sec-head{margin-bottom:18px}

/* ---- 区块引导文字 ---- */
.region-lead{
  max-width:860px;
  margin-bottom:20px;
}
.region-lead p{
  font-size:14.5px;
  line-height:1.85;
  color:var(--text-2);
}
.region-lead p + p{margin-top:10px}
.region-lead strong{color:var(--text);font-weight:600}

.region-group > p{
  font-size:14px;
  line-height:1.8;
  color:var(--text-2);
  max-width:860px;
  margin-bottom:14px;
}
.region-group > h3 .mono{
  font-size:11.5px;
  font-weight:400;
  letter-spacing:.05em;
  color:var(--text-3);
  text-transform:uppercase;
}

/* ---- 线路类型详情面板 ---- */
.type-panel{min-width:0}
.type-panel p{
  font-size:14.5px;
  line-height:1.85;
  color:var(--text-2);
  max-width:780px;
}
.type-panel p + p{margin-top:12px}

.spec-list{
  display:grid;
  gap:10px;
  margin-top:20px;
  max-width:780px;
}
.spec-row{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:12px 16px;
  border-radius:var(--r-md);
  background:var(--bg-panel-2);
  border:1px solid var(--border-soft);
  min-width:0;
}
.spec-k{
  font:500 11.5px/1.7 var(--font-mono);
  letter-spacing:.06em;
  color:var(--text-3);
  text-transform:uppercase;
  white-space:nowrap;
}
.spec-v{
  font-size:13.8px;
  line-height:1.75;
  color:var(--text-2);
  min-width:0;
}
.spec-v b{color:var(--text);font-weight:600}

/* ---- 用途卡片(选线建议) ---- */
.use-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:16px;
  margin-top:26px;
}
.use-item{
  min-width:0;
  padding:20px 20px 22px;
  border-radius:var(--r-lg);
  background:var(--bg-panel);
  box-shadow:0 1px 0 var(--hl-28) inset,0 0 0 1px var(--border),0 14px 30px -26px var(--tint-16);
}
.use-item h3{
  font-size:15px;
  font-weight:600;
  margin-bottom:9px;
  color:var(--text);
}
.use-item p{
  font-size:13.5px;
  line-height:1.8;
  color:var(--text-2);
}

/* ---- 覆盖地区徽章墙 ---- */
.geo-wall{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(176px,1fr));
  gap:12px;
  margin-top:22px;
}
.geo-item{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:12px 14px;
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:0 1px 0 var(--hl-28) inset,0 0 0 1px var(--border);
}
.geo-item .flag{flex-shrink:0}
.geo-name{
  font-size:13.5px;
  font-weight:500;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.geo-meta{
  margin-left:auto;
  flex-shrink:0;
  font:400 11.5px/1 var(--font-mono);
  letter-spacing:.04em;
  color:var(--text-3);
}

/* ---- 结尾提示 ---- */
.nodes-close{margin-top:28px;max-width:860px}

/* ---- 旗帜补充色(取设计令牌,不散落硬编码) ---- */
.f-gold{fill:var(--warn)}

/* ---- 响应式 ---- */
@media (max-width:768px){
  .nodes-sec{padding-top:52px}
  .nodes-body{padding-bottom:64px}
  .nodes-head{gap:14px}
}
@media (max-width:640px){
  .spec-row{grid-template-columns:1fr;gap:6px;padding:12px 14px}
  .spec-k{white-space:normal}
  .geo-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .geo-meta{display:none}
  .use-grid{grid-template-columns:1fr}
}
@media (max-width:360px){
  .geo-wall{grid-template-columns:1fr}
}