/* ===========================================================
   layout.css — 容器 / 区块节奏 / 栅格 / 一档内容宽度
   宽度只有一档：--w-container。**所有模块**（Hero 副标题、内页标题区、FAQ、
   长文段落、版本块）都对齐到它，右边缘落在同一条线上。
   需要控制行长的长文请用 .cols 分两栏，不要靠收窄模块 ——
   收窄会让整页出现好几条左对齐基准线，视觉上就是「有些模块比较小」。
   =========================================================== */
.wrap{width:min(var(--w-container),100% - var(--gutter)*2);margin-inline:auto}

/* ---------- 区块节奏：上下同值，跨档同步降 ---------- */
.sec{padding-block:var(--s-24)}
.sec--tight{padding-block:var(--s-16)}
.sec--raise{background:var(--bg-raise)}
.sec--flush{padding-top:0}

.sec-head{margin-bottom:var(--s-12)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head h2+p,.sec-head .lede{margin-top:var(--s-3)}
.sec-head+.grid,.sec-head+.cols,.sec-head+.plats,.sec-head+.thin{margin-top:var(--s-12)}

/* ---------- 栅格 ---------- */
.grid{display:grid;gap:var(--s-6);min-width:0}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid>*{min-width:0}

/* 自适应列：薄卡这类「数量不固定但都等权」的用这个 */
.grid--auto{display:grid;gap:var(--s-4);justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.grid--auto>*{min-width:0}

/* 两栏（含图文行）*/
.cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);min-width:0}
.cols--wide{grid-template-columns:1.1fr .9fr}
.cols>*{min-width:0}

/* 左右交替图文行 */
.rows{display:grid;gap:var(--s-20)}
@media (max-width:1024px){.rows{gap:var(--s-12)}}

/* ---------- 工具类：替代模板里的行内 style，让「结构在 HTML、样式在 CSS」 ---------- */
.mt-4{margin-top:var(--s-4)} .mt-6{margin-top:var(--s-6)}
.mt-10{margin-top:var(--s-10)}
.mb-3{margin-bottom:var(--s-3)} .mb-5{margin-bottom:var(--s-5)} .mb-6{margin-bottom:var(--s-6)}
.p-body{font-size:15px;line-height:28px}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .cols,.cols--wide{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid--2,.grid--3{grid-template-columns:1fr}
  .grid--auto{grid-template-columns:1fr}
  .sec-head{margin-bottom:var(--s-8)}
}

/* ---------- 锚点目标必须留出吸顶页头的高度 ----------
   这是全站最容易被漏掉的一行：没有它，锚点跳转会被 sticky 页头盖住标题。 */
[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}