/*!
 * layout-v2.css — 全站布局层（W59 · 腾讯云式节奏 · 官网原配色）
 *
 * 只做三件事，颜色一个不改（全部继承 site.css 的 token）：
 *   1) 容器宽度对齐腾讯云：1600 视口下内容实宽 1457（max-w 1680 / pad-x 72）
 *   2) section 间距对齐腾讯云：96px → 60px（更紧凑、信息密度更高）
 *   3) 标题区统一 76px 节奏
 *
 * 覆盖而非重写：不改动 site.css 里的 token 定义本身，只在 :root 上调两个布局变量，
 * 万一要回滚，删掉这一行 link 就恢复原样。
 */

:root {
  --max-w: 1680px;
  --pad-x: 72px;
}

@media (max-width: 1300px) { :root { --pad-x: 48px; } }
@media (max-width: 1100px) { :root { --pad-x: 40px; } }
@media (max-width: 900px)  { :root { --pad-x: 32px; } }
@media (max-width: 600px)  { :root { --pad-x: 20px; } }

/* ===== section 节奏：腾讯云是 60px，官网原是 96px ===== */
.section { padding: 60px 0; }
@media (max-width: 900px) { .section { padding: 44px 0; } }
@media (max-width: 600px) { .section { padding: 36px 0; } }

/* ===== 标题区统一 76px 节奏 ===== */
.section-hd,
.section-head,
.sec-head {
  min-height: 76px;
  margin-bottom: 8px;
}

/* ===== 内容模块最大宽度：腾讯云 1457 ===== */
.section-bd,
.section-body,
.section__bd {
  max-width: 1457px;
}

/* ===== 卡片密度：腾讯云是多列高信息密度 ===== */
.grid,
.cards,
.card-grid {
  gap: 18px;
}

/* 通用块级容器也吃新的 --max-w / --pad-x（.container 已在 site.css 里用变量，自动生效） */

/* 首屏不要被公告条压住 —— 由 nav-v2.js 加 body.ghb-nav2 处理 padding-top */

/* ==========================================================================
   Hero v2 —— 腾讯云式全宽大 Banner（1600×500，左文右卡）
   只作用于 .hero-v2，其余页面的 hero 不受影响。配色全部走官网 token。
   ========================================================================== */
.hero-v2 { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--green-50, #fdf6ef) 0%, var(--bg, #FAFAF7) 100%); }
.hero-v2::before {
  content: ""; position: absolute; top: -140px; right: -120px;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 36, 36, .07) 0%, rgba(180, 36, 36, 0) 70%);
}
.hero-v2::after {
  content: ""; position: absolute; bottom: -180px; left: -100px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 108, 36, .06) 0%, rgba(228, 108, 36, 0) 70%);
}
.hero-v2 > .container { position: relative; z-index: 1; min-height: 500px; display: flex; align-items: center; }
.hero-v2 .hero-grid { width: 100%; align-items: center; }

/* 左侧：标题更大，节奏对齐腾讯云 Hero */
.hero-v2 .hero-text h1 { font-size: 46px; line-height: 1.22; letter-spacing: -.02em; }
.hero-v2 .hero-sub { font-size: 17px; margin-top: 20px; max-width: 600px; }
.hero-v2 .hero-ctas { margin-top: 30px; }

/* 右侧：可拖拽速测卡 */
.hero-v2 .hero-card .preview { border: 1px solid rgba(122, 22, 22, .08); }
.hc-field { margin: 16px 0 6px; }
.hc-field .hc-lab { font-size: 12px; color: var(--ink-400, #8A8A82); display: flex; justify-content: space-between; margin-bottom: 10px; }
.hc-field .hc-lab b { color: var(--green-700, #b42424); font-size: 14px; font-weight: 600; }
.hc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: var(--green-100, #fbeee1); outline: none; }
.hc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--green-700, #b42424); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(122, 22, 22, .3); cursor: pointer;
}
.hc-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--green-700, #b42424);
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(122, 22, 22, .3); cursor: pointer;
}
.hc-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-300, #B6B6AE); margin-top: 8px; }
.hc-out { text-align: center; padding: 4px 0 2px; }
.hc-out .hc-num { font-size: 26px; font-weight: 700; color: var(--green-700, #b42424); line-height: 1.3; }
.hc-out .hc-num small { font-size: 14px; font-weight: 400; color: var(--ink-300, #B6B6AE); }
.hc-out .hc-note { font-size: 11px; color: var(--ink-400, #8A8A82); margin-top: 4px; }

@media (max-width: 1100px) {
  .hero-v2 > .container { min-height: 0; }
  .hero-v2 .hero-text h1 { font-size: 34px; }
}
@media (max-width: 900px) {
  .hero-v2 .hero-text h1 { font-size: 28px; }
  .hero-v2 .hero-sub { font-size: 15px; }
}

/* ==========================================================================
   qa 问答页外围增强（W59 P4）—— 正文 DOM 一个字不碰
   ========================================================================== */
.ghb-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--green-700, #b42424); z-index: 1201; transition: width .08s linear; }

.ghb-toc { position: fixed; top: 150px; right: 24px; width: 208px; max-height: calc(100vh - 220px);
  overflow: auto; background: var(--card, #fff); border: 1px solid rgba(122, 22, 22, .08);
  border-radius: var(--radius-card, 20px); padding: 16px 6px 16px 16px; z-index: 40;
  box-shadow: var(--shadow-card); }
.ghb-toc .ghb-toc-h { font-size: 13px; font-weight: 600; color: var(--ink-900, #1A1A17); margin-bottom: 10px; }
.ghb-toc a { display: block; font-size: 12px; color: var(--ink-500, #55554E); padding: 6px 10px;
  border-radius: var(--radius-tag, 8px); line-height: 1.5; }
.ghb-toc a:hover { color: var(--green-700, #b42424); background: var(--green-50, #fdf6ef); }

.ghb-rel-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ghb-rel-cards h3 { grid-column: 1 / -1; }
.ghb-rel-cards a { display: block; background: var(--card, #fff); border: 1px solid rgba(122, 22, 22, .07);
  border-radius: var(--radius-tag, 8px); padding: 14px 16px; font-size: 13px; color: var(--ink-700, #3A3A35); }
.ghb-rel-cards a:hover { background: var(--green-50, #fdf6ef); color: var(--green-700, #b42424); }

@media (max-width: 1400px) { .ghb-toc { display: none; } }
@media (max-width: 700px) { .ghb-rel-cards { grid-template-columns: 1fr; } }