/* ==========================================================================
   VPNDH · tutorial.css
   guides.html 专属：页头动作行 / 步骤正文微调 / 操作路径行 / 示例链接块 /
   平台小节标签 / 延伸阅读卡
   通用组件（按钮、徽章、卡片、步骤、目录条、Callout、深色 CTA 带）一律复用
   base.css 与 components.css，本文件只补充本页独有的排版细节。
   ========================================================================== */

/* ---------- 1. 页头 ---------- */
.page-head{
  padding-top:var(--sp-7);
  padding-bottom:var(--sp-6);
}
.page-head .lede{margin-top:var(--sp-4)}

.guide-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:var(--sp-5);
}
.guide-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:var(--sp-5);
}

/* ---------- 2. 正文容器 ---------- */
.guide-article{padding-bottom:var(--sp-8)}
.guide-note{margin:0 0 var(--sp-5)}
.guide-block{margin-top:var(--sp-8)}
.guide-lead{
  margin:0 0 var(--sp-5);
  max-width:62ch;
  font-size:15px;
  line-height:1.78;
  color:var(--text-muted);
}

/* 步骤正文：行距略放宽，长段落更耐读 */
.guide-steps .step p{line-height:1.8}
.guide-steps .step h2{margin-bottom:var(--sp-4)}

/* ---------- 3. 操作路径行 ---------- */
.guide-steps .path-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  margin:var(--sp-4) 0 0;
  padding:9px 12px;
  border:1px dashed var(--ink-12);
  border-radius:var(--r-sm);
  background:var(--bg-panel-3);
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.6;
  color:var(--text-muted);
}
.path-k{
  margin-right:2px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--accent);
}
.path-seg{
  padding:2px 8px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  color:var(--text);
  white-space:nowrap;
}

/* ---------- 4. 示例订阅链接 ---------- */
.guide-steps .code-line{
  margin:var(--sp-3) 0 0;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg-panel-3);
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.7;
  color:var(--text);
  overflow-wrap:anywhere;
  word-break:break-word;
}
.code-k{
  display:block;
  margin-bottom:4px;
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--text-muted);
}

/* ---------- 5. 平台小节 ---------- */
.client-plat{
  margin:0 0 6px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--accent);
}
.client-card h3{margin:0 0 8px}
.client-card .card-text{line-height:1.78}

/* ---------- 6. 步骤按钮行 ---------- */
.step-cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:var(--sp-4);
}

/* ---------- 7. 延伸阅读卡 ---------- */
.next-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-decoration:none;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.next-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.next-kicker{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--accent);
}
.next-title{
  font-size:16px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--text);
}
.next-text{
  font-size:13px;
  line-height:1.7;
  color:var(--text-muted);
}

/* ---------- 8. 窄屏 ---------- */
@media (max-width:760px){
  .guide-steps .step{padding-left:46px}
  .guide-steps .step::before{width:30px;height:30px;font-size:11px}
  .guide-block{margin-top:var(--sp-7)}
}