/* ==========================================================================
   VPNAY — nodes.css
   线路列表页专属样式：页头、章节节奏、表格说明、地区徽章墙、
   线路类型卡、选线建议卡。全部取值走 :root 设计令牌，不散落硬编码颜色。
   ========================================================================== */

/* ==========================================================================
   1. 页头（非首页装置，仅一层极淡氛围 + 版心内容）
   ========================================================================== */
.page-head{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:56px;
  padding-bottom:48px;
  background:linear-gradient(180deg,rgba(52,68,168,.07) 0%,rgba(52,68,168,.025) 58%,rgba(52,68,168,0) 100%);
}
.page-head h1{margin-top:24px}
.page-head .lead{margin-top:16px;max-width:46em}
.page-head .cta-row{margin-top:28px}
.page-head .fact-row{margin-top:28px;padding-top:24px;border-top:1px solid var(--border)}

/* ==========================================================================
   2. 章节节奏（toc-tabs 与本容器内的所有章节同级）
   ========================================================================== */
.doc-sec{min-width:0}
.doc-sec + .doc-sec{margin-top:56px}

/* ==========================================================================
   3. 表格说明行
   ========================================================================== */
.table-note{margin-top:12px;font-size:13px;line-height:1.7;color:var(--muted);max-width:64em}
.table-note + .table-note{margin-top:8px}
.table-note .tag{margin:0 2px;vertical-align:1px}

/* ==========================================================================
   4. 地区覆盖：装饰线稿 + 徽章墙
   ========================================================================== */
.region-topo{
  width:260px;
  max-width:100%;
  height:auto;
  margin:0 0 22px;
  color:var(--doodle);
}
.region-wall{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;
}
.region-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
  padding:16px 18px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.region-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-panel);border-color:var(--border-strong)}
.region-dot{
  flex:none;
  width:12px;
  height:12px;
  margin-top:6px;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--border);
}
.rd-hk{background:var(--reg-hk)}
.rd-us{background:var(--reg-us)}
.rd-sg{background:var(--reg-sg)}
.rd-jp{background:var(--reg-jp)}
.rd-ca{background:var(--reg-ca)}
.rd-nl{background:var(--reg-nl)}
.region-name{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.region-cities{margin-top:4px;font-size:12.5px;line-height:1.6;color:var(--muted)}

/* ==========================================================================
   5. 线路类型卡（IEPL 专线 / 中转 / 直连）
   ========================================================================== */
.line-type-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  align-items:stretch;
}
.line-type-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:24px 22px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.line-type-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-panel);border-color:var(--border-strong)}
.lt-top{display:flex;align-items:center;gap:12px}
.lt-badge{
  flex:none;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:var(--r-sm);
}
.lt-badge svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lt-badge-iepl{background:var(--accent-10);color:var(--accent)}
.lt-badge-relay{background:var(--warn-12);color:var(--warn)}
.lt-badge-direct{background:var(--success-12);color:var(--success)}
.lt-name{font-family:var(--font-display);font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.lt-sub{margin-top:3px;font-size:12px;color:var(--muted)}
.lt-body{margin-top:16px;font-size:14.5px;line-height:1.75;color:var(--muted)}
.lt-body p + p{margin-top:10px}
.lt-body strong{color:var(--ink);font-weight:600}
.line-type-card .pills{margin-top:18px;padding-top:14px;border-top:1px dashed var(--border-strong)}

/* ==========================================================================
   6. 选线建议卡
   ========================================================================== */
.choose-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  align-items:stretch;
}
.choose-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:22px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.choose-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-panel);border-color:var(--border-strong)}
.choose-head{display:flex;align-items:center;gap:10px}
.choose-ico{
  flex:none;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:var(--r-sm);
  background:var(--accent-08);
  color:var(--accent);
}
.choose-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.choose-card h3{font-size:15.5px}
.choose-card p{margin-top:12px;font-size:14px;line-height:1.75;color:var(--muted)}
.choose-pick{
  margin-top:auto;
  padding-top:14px;
  border-top:1px dashed var(--border-strong);
  font-size:12.5px;
  color:var(--muted);
}
.choose-pick b{color:var(--accent-2);font-weight:700}

/* ==========================================================================
   7. 响应式
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .region-item:hover,.line-type-card:hover,.choose-card:hover{transform:none}
}

@media (max-width:900px){
  .page-head{padding-top:44px;padding-bottom:40px}
  .doc-sec + .doc-sec{margin-top:44px}
}

@media (max-width:640px){
  .page-head{padding-top:32px;padding-bottom:32px}
  .page-head h1{margin-top:18px}
  .page-head .cta-row{margin-top:22px}
  .page-head .fact-row{margin-top:22px;padding-top:18px}
  .region-wall{grid-template-columns:minmax(0,1fr)}
  .line-type-grid,.choose-grid{grid-template-columns:minmax(0,1fr)}
  .line-type-card,.choose-card{padding:20px 18px}
  .region-topo{width:100%;margin-bottom:18px}
}