/* ==========================================================================
   VPNFL — nodes.css
   线路页(servers.html)专属样式:首屏头部、横向缓滚带、线路类型卡、
   选线建议正文、地区徽章墙、表格脚注
   所有颜色 / 圆角 / 阴影只引用 :root 设计令牌
   ========================================================================== */

/* --------------------------------------------------------------------------
   首屏头部
   -------------------------------------------------------------------------- */

.nodes-hero{
  padding-top:calc(var(--sec-y) * .74);
  padding-bottom:calc(var(--sec-y) * .52);
}
.nodes-hero .sec-head{margin-bottom:26px}
.nodes-hero .lede{max-width:62ch}
.nodes-hero .fact-strip{margin-top:4px}
.nodes-hero .ctas{margin-top:28px}
.nodes-hero .h1{max-width:20ch}

/* --------------------------------------------------------------------------
   横向缓滚带(线路与协议)
   -------------------------------------------------------------------------- */

.ticker{
  overflow:hidden;
  max-width:100%;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg-panel);
}
.ticker-track{
  display:flex;
  width:max-content;
  will-change:transform;
}
.ticker-unit{
  display:flex;
  align-items:center;
  gap:34px;
  padding:14px 17px;
  white-space:nowrap;
  font-size:13.5px;
  color:var(--muted);
}
.ticker-unit span{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.ticker-unit i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  opacity:.45;
  flex:none;
}

/* --------------------------------------------------------------------------
   线路表脚注
   -------------------------------------------------------------------------- */

.table-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:22px;
  padding:14px 18px;
  border-radius:var(--r-md);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card), inset 0 1px 0 var(--white);
  font-size:13.5px;
  color:var(--muted);
  min-width:0;
}
.table-note svg{
  width:16px;
  height:16px;
  color:var(--accent);
  flex:none;
  margin-top:3px;
}
.table-note span{min-width:0}

/* --------------------------------------------------------------------------
   线路类型卡
   -------------------------------------------------------------------------- */

.line-type-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr));
  gap:20px;
  align-items:stretch;
}
.lt-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:26px 24px;
  border-radius:var(--r-md);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card), inset 0 1px 0 var(--white);
  min-width:0;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.lt-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-float);
  border-color:var(--accent);
}
.lt-card > .tag{align-self:flex-start}
.lt-card h3{font-size:19px;letter-spacing:-.015em}
.lt-card p{font-size:14.5px;line-height:1.7;color:var(--muted)}
.lt-points{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:auto;
  padding-top:16px;
  border-top:1px dashed var(--border);
}
.lt-points li{
  display:flex;
  gap:12px;
  font-size:13.5px;
  line-height:1.65;
  color:var(--muted);
  min-width:0;
}
.lt-points .k{
  flex:none;
  width:4.6em;
  font-weight:700;
  color:var(--text);
}

/* --------------------------------------------------------------------------
   选线建议:表格 + 说明正文
   -------------------------------------------------------------------------- */

.pick-table{min-width:600px}
.pick-table tbody th{
  font-weight:700;
  white-space:nowrap;
}
.pick-prose{margin-top:40px;max-width:78ch}
.pick-prose h3 + p{margin-top:10px}
.pick-prose p + h3{margin-top:32px}

/* --------------------------------------------------------------------------
   地区徽章墙
   -------------------------------------------------------------------------- */

.region-wall{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:16px;
  align-items:start;
}
.region-block{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:20px;
  border-radius:var(--r-md);
  background:var(--bg-panel2);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--white-70);
  min-width:0;
}
.region-block h3{
  font-size:15.5px;
  letter-spacing:-.01em;
}
.region-block .chip{
  background:var(--white);
  color:var(--accent-dark);
}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */

@media (max-width:1024px){
  .nodes-hero .h1{max-width:24ch}
  .pick-prose{max-width:none}
}

@media (max-width:768px){
  .nodes-hero{padding-top:calc(var(--sec-y) * .8);padding-bottom:calc(var(--sec-y) * .6)}
  .nodes-hero .h1{max-width:none}
  .line-type-grid{grid-template-columns:minmax(0,1fr)}
  .region-wall{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
  .ticker-unit{gap:24px;padding:12px 14px}
}

@media (max-width:640px){
  .lt-card{padding:22px 20px}
  .lt-points .k{width:4.2em}
  .pick-table{min-width:540px}
  .table-note{padding:12px 14px}
}

@media (prefers-reduced-motion:reduce){
  .lt-card{transition:none}
  .lt-card:hover{transform:none}
}