/* ==========================================================================
   VPNPF — nodes.css
   线路页(network.html)专属样式:页首双栏与线路概览、缓滚带、线路表补充、
   线路类型三栏、按用途选线网格、协议与客户端、覆盖地区徽章墙。
   颜色、圆角、字体一律引用 base.css 的 :root 令牌,不写死设计值。
   ========================================================================== */

/* ==========================================================================
   1. 页首:左文案 + 右线路概览面板
   ========================================================================== */
.nodes-hero { padding-top: 36px; padding-bottom: 46px; }

.nodes-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: 44px;
  align-items: start;
}

.nodes-hero .copy { align-items: flex-start; text-align: left; }
.nodes-hero .copy h1 {
  margin-top: 18px;
  max-width: 24ch;
  font-size: clamp(36px, 4.4vw, 54px);
}
.nodes-hero .copy .sub { max-width: 54ch; }
.nodes-hero .cta-row { gap: 24px; }
.nodes-hero .trust { justify-content: flex-start; }

.spec-panel {
  min-width: 0;
  padding: 22px 24px 20px;
  background: var(--bg-panel);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 0 0 1px var(--hl-panel),
    0 24px 44px -18px var(--shadow-indigo-2),
    0 2px 8px var(--shadow-indigo);
}

.sp-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sp-title { font-size: 14.5px; font-weight: 500; }
.sp-code {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--text-muted); white-space: nowrap;
}

.spec-list { display: flex; flex-direction: column; }
.spec-row {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.spec-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.spec-row dt { font-size: 12.5px; color: var(--text-muted); }
.spec-row dd { font-size: 13.5px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.sp-link { margin-top: 16px; }

/* ==========================================================================
   2. 缓滚带(ticker-loop 配方的页面侧结构样式)
   ========================================================================== */
.ticker {
  overflow: hidden;
  max-width: 100%;
  padding: 13px 0;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ticker-track { display: flex; align-items: center; width: max-content; }
.ticker-item {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-muted); white-space: nowrap;
}
.ticker-item::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin: 0 24px; flex-shrink: 0;
}
.ticker.is-static { overflow-x: auto; }

/* ==========================================================================
   3. 线路表补充说明
   ========================================================================== */
.table-note {
  margin-top: 14px; max-width: 78ch;
  font-size: 12.5px; line-height: 1.65; color: var(--text-muted);
}

/* ==========================================================================
   4. 线路类型三栏
   ========================================================================== */
.rtype-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.rtype-card {
  display: flex; flex-direction: column; min-width: 0;
  padding: 24px 24px 22px;
  background: var(--bg-panel);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--hl-panel), 0 22px 40px -22px var(--shadow-indigo-2);
}
.rtype-card.is-brass {
  box-shadow: inset 0 0 0 1px var(--accent), 0 26px 48px -20px var(--shadow-brass);
}
.rtype-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rtype-head svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); }
.rtype-head h3 { font-size: 18px; }
.rtype-tag { margin-left: auto; flex-shrink: 0; }

.rtype-body { margin-top: 18px; display: flex; flex-direction: column; gap: 15px; }
.rtype-body dt {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--text-muted);
}
.rtype-body dd {
  margin-top: 5px;
  font-size: 13.5px; line-height: 1.68; color: var(--text-muted);
}

/* ==========================================================================
   5. 按用途选线(无卡分隔线网格)
   ========================================================================== */
.advice-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border);
}
.advice-item {
  min-width: 0;
  padding: 26px 26px 24px;
  border-bottom: 1px solid var(--border);
}
.advice-item:nth-child(odd) { border-right: 1px solid var(--border); }
.advice-item:last-child { grid-column: 1 / -1; border-right: 0; }
.advice-item h3 { font-size: 17px; }
.advice-pick {
  display: inline-flex; align-items: center;
  margin-top: 10px; min-height: 26px; padding: 2px 12px;
  max-width: 100%; overflow: hidden;
  border-radius: var(--r-pill); border: 1px solid var(--accent);
  color: var(--accent-dark); font-size: 12.5px; white-space: nowrap;
}
.advice-item p { margin-top: 12px; max-width: 62ch; font-size: 14px; line-height: 1.68; color: var(--text-muted); }

/* ==========================================================================
   6. 协议与客户端
   ========================================================================== */
.proto-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 22px; align-items: start;
}
.proto-col {
  min-width: 0;
  padding: 26px 26px 24px;
  background: var(--bg-panel);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--hl-panel), 0 22px 40px -22px var(--shadow-indigo-2);
}
.proto-col h3 { font-size: 17px; }
.proto-col > p { margin-top: 10px; font-size: 14px; line-height: 1.68; color: var(--text-muted); }

.proto-list { margin-top: 18px; display: flex; flex-direction: column; }
.proto-list li {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.6;
}
.proto-list li:first-child { border-top: 0; padding-top: 0; }
.proto-list b {
  font-family: var(--font-mono); font-weight: 500; font-size: 13px;
  color: var(--text); overflow-wrap: anywhere;
}
.proto-list span { color: var(--text-muted); }

.client-chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.client-chips li {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 6px 14px;
  border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--bg);
  font-size: 13px; color: var(--text);
}
.client-chips svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--success); }

.proto-links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ==========================================================================
   7. 覆盖地区徽章墙
   ========================================================================== */
.region-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
}
.region-card {
  min-width: 0;
  padding: 20px 20px 18px;
  background: var(--bg-panel);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--hl-panel), 0 18px 34px -24px var(--shadow-indigo-2);
}
.rc-head { display: flex; align-items: center; gap: 9px; }
.rc-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--shadow-brass);
}
.region-card h3 { font-size: 15.5px; }
.region-cities {
  margin-top: 10px;
  font-size: 13px; line-height: 1.75; color: var(--text-muted);
}

/* ==========================================================================
   8. FAQ 区补充
   ========================================================================== */
#faq .faq-list { margin-top: 26px; }
#faq .callout { margin-top: 26px; }

/* ==========================================================================
   9. 响应式
   ========================================================================== */
@media (max-width: 1100px) {
  .nodes-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .nodes-hero .copy h1 { max-width: 28ch; }
  .spec-panel { max-width: 560px; }
  .region-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .rtype-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .proto-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .nodes-hero { padding-top: 26px; padding-bottom: 34px; }
  .nodes-hero .cta-row { gap: 16px; }
  .spec-row { grid-template-columns: 66px minmax(0, 1fr); }
  .advice-grid { grid-template-columns: minmax(0, 1fr); }
  .advice-item { padding: 22px 0; }
  .advice-item:nth-child(odd) { border-right: 0; }
  .advice-item:last-child { grid-column: auto; }
  .proto-list li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .advice-pick { white-space: normal; min-height: 0; padding: 5px 12px; }
}

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

@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
}