/* ==========================================================================
   layout.css — 容器 / 区块节奏 / 栅格 / 文档两栏
   只放「布局」本身。组件自己的响应式写在 components.css 或 blocks.css 里，
   否则同优先级下会被后加载的文件覆盖（不报错，只是静默失效）。
   ========================================================================== */

/* ---- 容器：全站唯一的内容宽度档 ---- */
.container {
  --gutter: 48px;
  width: min(var(--w-container), 100% - var(--gutter));
  margin-inline: auto;
}

/* ---- 阅读列：唯一的窄档，长文与说明页都用它 ---- */
.prose {
  --gutter: 48px;
  width: min(var(--w-prose), 100% - var(--gutter));
  margin-inline: auto;
}

/* ---- 区块节奏 ---- */
.section {
  padding-block: var(--sec-top) var(--sec-bottom);
}

.section--alt {
  background: var(--bg-alt);
}

/* 紧跟在别的区块之后时用它：顶部不再叠一层留白 */
.section--tight {
  padding-block: 0 var(--sec-bottom);
}

/* ---- 栅格 ---- */
.grid {
  display: grid;
  gap: var(--sp-5);
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--gap-5 {
  gap: var(--sp-5);
}

/* ---- 文档页两栏：目录 + 正文 ---- */
.doc {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: var(--sp-19);
  align-items: start;
}

/* 正文列里所有块统一纵向节奏 */
.doc__main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  min-width: 0;
}

/* ---- 纵向堆叠的工具类 ---- */
.stack {
  display: flex;
  flex-direction: column;
}

.stack--6 {
  gap: var(--sp-2);
}
.stack--8 {
  gap: var(--sp-3);
}
.stack--10 {
  gap: var(--sp-4);
}
.stack--12 {
  gap: var(--sp-5);
}
.stack--16 {
  gap: var(--sp-7);
}
.stack--22 {
  gap: var(--sp-10);
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

/* ---- 响应式 ---- */
@media (max-width: 1024px) {
  .container,
  .prose {
    --gutter: 40px;
  }

  .doc {
    grid-template-columns: 1fr;
    gap: var(--sp-11);
  }

}

@media (max-width: 880px) {
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .container,
  .prose {
    --gutter: 40px;
  }

  .grid--2,
  .grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}