/* ==========================================================================
   VPN31 · nodes.css
   线路页专属:页头双栏、地区概览面板、线路类型小标签、按用途选线清单
   仅补充本页结构,颜色 / 圆角 / 间距全部引用 base.css 的 :root 令牌
   ========================================================================== */

/* ---------- 1. 页头双栏 ---------- */

.page-head-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(0, .7fr);
  gap:clamp(24px, 4vw, 52px);
  align-items:start;
}

.page-head-copy{min-width:0;}

.page-title{
  margin-bottom:18px;
  font-family:var(--font-display);
  font-size:clamp(2rem, 4.4vw, 3.4rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.028em;
}

.page-head-copy .lead{
  margin-bottom:22px;
  max-width:34em;
}

.page-head-copy .facts-band{margin-bottom:24px;}

/* ---------- 2. 地区概览面板 ---------- */

.region-wall{
  min-width:0;
  padding:clamp(18px, 2.2vw, 24px);
  border-radius:var(--r-xl);
  background-color:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
}

.region-wall-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--muted);
}

.region-wall-title::before{
  content:"";
  width:16px;
  height:2px;
  flex:none;
  border-radius:2px;
  background-image:var(--grad-bar);
}

.region-wall-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}

.region-wall-list li{
  display:grid;
  grid-template-columns:minmax(0, 52px) minmax(0, 1fr);
  gap:10px;
  align-items:baseline;
  padding-bottom:12px;
  border-bottom:1px dashed var(--border);
}

.region-wall-list li:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.region-name{
  font-size:13px;
  font-weight:650;
  color:var(--text);
  white-space:nowrap;
}

.region-cities{
  font-size:12.5px;
  line-height:1.72;
  color:var(--muted);
  overflow-wrap:anywhere;
}

/* ---------- 3. 地区分组说明 ---------- */

.region-note{
  margin:0 0 12px;
  max-width:46em;
  font-size:13.5px;
  line-height:1.72;
  color:var(--muted);
}

/* ---------- 4. 线路类型小标签 ---------- */

.type-key{
  display:inline-block;
  margin-right:6px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--accent-dark);
  white-space:nowrap;
}

/* ---------- 5. 按用途选线清单 ---------- */

.pick-list{
  margin:0;
  border-top:1px solid var(--border);
}

.pick-item{
  display:grid;
  grid-template-columns:minmax(0, 190px) minmax(0, 1fr);
  gap:6px 28px;
  padding-block:18px;
  border-bottom:1px solid var(--border);
}

.pick-item dt{
  font-size:15px;
  font-weight:650;
  line-height:1.5;
  color:var(--text);
}

.pick-item dd{
  margin:0;
  min-width:0;
  font-size:14.5px;
  line-height:1.8;
  color:var(--muted);
}

/* ---------- 6. FAQ 栏宽 ---------- */

.faq-narrow{max-width:58rem;}

/* ---------- 7. 响应式 ---------- */

@media (max-width:900px){
  .page-head-grid{grid-template-columns:minmax(0, 1fr);}
  .region-wall{max-width:34rem;}
}

@media (max-width:680px){
  .pick-item{grid-template-columns:minmax(0, 1fr);}
  .region-wall-list li{grid-template-columns:minmax(0, 48px) minmax(0, 1fr);}
}