/* ==========================================================================
   VPNPX . nodes.css
   线路列表页专属:页首说明 / 覆盖概览面板 / 地区线路块 /
   线路类型卡 / 按用途选线卡 / 正文窄栏
   ========================================================================== */

/* ---------------------------------------------------------------- page intro */
.nodes-intro{padding-top:44px;padding-bottom:32px;}

.nodes-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);
  gap:44px;
  align-items:start;
}

.nodes-intro-copy{min-width:0;}

.nodes-title{
  margin:0 0 16px;
  font-size:clamp(32px,4vw,54px);
  line-height:1.1;
  letter-spacing:-.03em;
}

.nodes-lede{
  margin:0 0 20px;
  max-width:58ch;
  font-size:16px;
  line-height:1.78;
  color:var(--text-muted);
}

.nodes-facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 22px;
  padding:0;
  list-style:none;
}
.nodes-facts li{margin:0;max-width:100%;}

.nodes-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* ------------------------------------------------------------- coverage panel */
.coverage-panel{
  position:relative;
  min-width:0;
  padding:22px 22px 20px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-soft);
  background-color:var(--surface);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.coverage-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:20px 20px;
}
.coverage-panel > *{position:relative;}

.coverage-label{
  margin:0 0 10px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--text-muted);
}

.coverage-figure{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 10px;
  margin:0 0 16px;
  padding-bottom:14px;
  border-bottom:1px dashed var(--border);
  font-family:var(--font-mono);
}
.coverage-num{
  font-size:30px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--accent-dark);
}
.coverage-unit{
  font-size:13px;
  font-weight:600;
  color:var(--text-muted);
}
.coverage-sep{
  font-size:18px;
  color:var(--border);
}

.coverage-flags{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 12px;
  margin:0 0 14px;
  padding:0;
  list-style:none;
}
.coverage-flags li{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  min-width:0;
  font-size:12.5px;
  color:var(--text-muted);
  white-space:nowrap;
}

.coverage-regions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 14px;
  padding:0;
  list-style:none;
}
.coverage-regions li{
  margin:0;
  max-width:100%;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  background:var(--bg-panel-2);
  font-size:11.5px;
  font-weight:600;
  color:var(--text-muted);
  white-space:nowrap;
}

.coverage-note{
  margin:0;
  font-size:12px;
  line-height:1.7;
  color:var(--text-muted);
}

/* --------------------------------------------------------------- region block */
.region-block{margin:0 0 28px;}
.region-block:last-child{margin-bottom:0;}

.region-head{margin:0 0 12px;}
.region-name{
  margin:0 0 6px;
  font-size:19px;
  letter-spacing:-.02em;
}
.region-note{
  margin:0;
  max-width:72ch;
  font-size:13.5px;
  line-height:1.72;
  color:var(--text-muted);
}

.line-table td:nth-child(3){
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-muted);
}

/* ---------------------------------------------------------------- route types */
.route-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.route-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  padding:24px 22px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-soft);
  background:var(--surface);
  box-shadow:0 18px 40px -32px var(--accent-a35);
}
.route-card--accent{
  border-color:transparent;
  background:linear-gradient(180deg, var(--bg-panel) 0%, var(--surface) 52%);
  box-shadow:0 24px 48px -30px var(--accent-a35), 0 0 0 2px var(--violet-a28);
}

.route-tag{
  align-self:flex-start;
  margin:0;
  max-width:100%;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  background:var(--accent-a10);
  color:var(--accent-dark);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.route-card--accent .route-tag{
  background:linear-gradient(132deg, var(--accent) 0%, var(--violet) 100%);
  color:var(--text-on-accent);
}

.route-title{
  margin:0;
  font-size:20px;
  letter-spacing:-.02em;
}

.route-dl{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.route-dl dt{
  margin:8px 0 0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--text-muted);
}
.route-dl dt:first-child{margin-top:0;}
.route-dl dd{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:var(--text-muted);
}

/* ------------------------------------------------------------- pick (by usage) */
.pick-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.pick-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  min-width:0;
  padding:20px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-soft);
  background:var(--surface);
  box-shadow:0 14px 30px -28px var(--accent-a35);
}
.pick-card:last-child{grid-column:1 / -1;}

.pick-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:34px;
  height:34px;
  border-radius:var(--radius-sm);
  background:var(--bg-panel-2);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  color:var(--accent-dark);
}

.pick-body{min-width:0;}
.pick-title{
  margin:0 0 6px;
  font-size:16px;
}
.pick-text{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:var(--text-muted);
}

/* --------------------------------------------------------------- prose column */
.nodes-prose{
  max-width:780px;
  margin:0 auto;
}
.nodes-prose p{
  margin:0 0 16px;
  font-size:15.5px;
  line-height:1.82;
  color:var(--text-muted);
}
.nodes-prose p:last-child{margin-bottom:0;}
.nodes-prose a{
  color:var(--accent-dark);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ----------------------------------------------------------------- faq column */
.faq-wrap{
  max-width:820px;
  margin:0 auto;
}

/* ---------------------------------------------------------------- breakpoints */
@media (max-width:1180px){
  .nodes-intro-grid{gap:32px;}
}

@media (max-width:1024px){
  .nodes-intro-grid{grid-template-columns:minmax(0,1fr);gap:26px;}
  .pick-grid{grid-template-columns:minmax(0,1fr);}
  .pick-card:last-child{grid-column:auto;}
}

@media (max-width:980px){
  .route-grid{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:768px){
  .nodes-intro{padding-top:32px;padding-bottom:24px;}
  .coverage-panel{padding:20px 18px;}
  .coverage-num{font-size:27px;}
}

@media (max-width:640px){
  .nodes-cta .btn{flex:1 1 150px;}
  .coverage-flags{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .route-card{padding:20px 18px;}
  .pick-card{padding:18px 16px;gap:12px;}
  .pick-index{width:30px;height:30px;font-size:11.5px;}
}

@media (max-width:400px){
  .coverage-flags{grid-template-columns:minmax(0,1fr);}
  .coverage-num{font-size:24px;}
}