/* ============================================================
   VPNYS · nodes.css
   线路页专属样式:页面头 / 地区线路表 / 线路类型说明 / 选线建议 / 覆盖范围
   ============================================================ */

/* ---------- 页面头 ---------- */
.page-hero{
  position:relative;
  padding-top:56px;
  padding-bottom:52px;
  border-bottom:1px solid var(--line);
  overflow-x:clip;
  max-width:100%;
}
.page-hero__in{
  display:grid;
  grid-template-columns:minmax(0,1fr) 500px;
  gap:56px;
  align-items:center;
}
.page-hero__copy{max-width:600px}
.page-hero h1{
  margin:18px 0 16px;
  font:900 52px/1.1 var(--font-display);
  letter-spacing:-.025em;
}
.page-hero__lead{
  font-size:16.5px;
  line-height:1.65;
  color:var(--text-muted);
  max-width:540px;
}
.page-hero .cta{margin-top:26px}
.page-hero .trust{margin-top:22px}
.page-hero__visual{position:relative;min-width:0}

/* 线路拓扑示意(纯装饰) */
.route-map{
  width:100%;
  height:auto;
  background-color:var(--bg-panel);
  background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);
  background-size:18px 18px;
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow-card);
}
.route-map__lines path{
  fill:none;
  stroke:var(--hl);
  stroke-width:1.6;
  stroke-linecap:round;
  opacity:.8;
}
.route-map__lines path.is-alt{
  stroke:var(--border);
  opacity:1;
}
.route-map__node circle{
  fill:var(--bg-panel);
  stroke:var(--accent);
  stroke-width:2;
}
.route-map__node--hl circle{stroke:var(--hl)}
.route-map__node text{
  font:600 11px var(--font-mono);
  fill:var(--text);
}
.route-map__node--hl text{font-weight:700}
.route-map__legend circle{fill:var(--hl)}
.route-map__legend text{
  font:600 11px var(--font-mono);
  fill:var(--text-muted);
}
.page-hero__cap{
  margin-top:10px;
  text-align:center;
  font:500 12px var(--font-mono);
  color:var(--text-muted);
}

/* ---------- 章节目录条横向内距 ---------- */
.toc-tabs{
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* ---------- 表格图例 ---------- */
.table-legend{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}
.table-legend__label{
  font:600 12px/1 var(--font-mono);
  letter-spacing:.04em;
  color:var(--text-muted);
}
.td-na{color:var(--text-muted)}

/* ---------- 地区分组 ---------- */
.region-block{margin-top:32px}
.region-block__head{
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.region-block__name{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  font-weight:800;
}
.region-block__name::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:3px;
  background:var(--hl);
  flex:none;
}
.region-block__note{
  font:600 12px var(--font-mono);
  color:var(--text-muted);
}

/* ---------- 线路类型说明 ---------- */
.type-list{border-top:1px solid var(--border)}
.type-row{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:32px;
  padding-top:30px;
  padding-bottom:30px;
  border-bottom:1px solid var(--border);
}
.type-row__head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.type-row__ic{
  width:34px;
  height:34px;
  border-radius:var(--r-sm);
  background:var(--bg-panel-2);
  display:grid;
  place-items:center;
  color:var(--accent);
}
.type-row__name{font-size:20px;font-weight:800}
.type-row__body p{
  font-size:15px;
  line-height:1.75;
  color:var(--text-muted);
}
.type-row__body p + p{margin-top:10px}
.type-row__tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.type-row__tags li{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 11px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  font-size:12.5px;
  font-weight:600;
  color:var(--text-muted);
}
.type-note{
  margin-top:24px;
  padding:16px 20px;
  background:var(--bg-panel);
  border:1px dashed var(--border);
  border-radius:var(--r);
  font-size:14.5px;
  line-height:1.7;
  color:var(--text-muted);
}

/* ---------- 选线建议 ---------- */
.advice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.advice-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:22px 22px 24px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow-card);
}
.advice-card--wide{grid-column:1/-1}
.advice-card__top{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.advice-card__tag{
  font:600 12px var(--font-mono);
  letter-spacing:.06em;
  color:var(--text-muted);
}
.advice-card h3{font-size:17px;font-weight:800}
.advice-card p{
  font-size:14.5px;
  line-height:1.7;
  color:var(--text-muted);
}

/* ---------- 覆盖范围 ---------- */
.cover-panel{
  padding:28px 28px 26px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow-card);
}
.cover-panel__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.cover-panel__stat{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-left:16px;
  border-left:1px solid var(--border);
}
.cover-panel__stat b{
  font:700 28px/1 var(--font-mono);
  letter-spacing:-.02em;
  color:var(--text);
}
.cover-panel__stat span{
  font-size:13px;
  font-weight:600;
  color:var(--text-muted);
}
.cover-wall{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.cover-wall li{
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg);
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
}
.cover-panel__note{
  margin-top:18px;
  font-size:13px;
  color:var(--text-muted);
}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .page-hero__in{
    grid-template-columns:1fr;
    gap:36px;
  }
  .page-hero__visual{max-width:560px}
}
@media (max-width:768px){
  .page-hero{
    padding-top:36px;
    padding-bottom:36px;
  }
  .page-hero h1{font-size:34px}
  .type-row{
    grid-template-columns:1fr;
    gap:16px;
    padding-top:24px;
    padding-bottom:24px;
  }
  .advice-grid{grid-template-columns:1fr}
  .advice-card--wide{grid-column:auto}
  .cover-panel__stats{
    grid-template-columns:1fr;
    gap:12px;
  }
  .cover-panel__stat{
    padding-left:0;
    border-left:0;
    padding-top:10px;
  }
  .cover-panel__stat + .cover-panel__stat{
    border-top:1px solid var(--line);
  }
}