/* ==========================================================================
   layout.css — 版心、区块节奏、栅格、双栏骨架
   只放这里自己定义的东西；组件级的断点覆盖写在各组件文件里
   ========================================================================== */

/* 版心宽度就是内容宽度：不用 padding，避免 border-box 把内容挤窄 */
.container {
  width: min(calc(100% - var(--gutter) * 2), var(--w-container));
  margin-inline: auto;
}

/* 页面区块的垂直节奏：相邻两段之间留 96px，比卡片内部的 20px 明显高一级 */
.section {
  padding-block: 48px;
}

.section--tight {
  padding-block: 32px;
}

.section--surface {
  background: var(--surface);
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.section__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* 区块标题前的红色竖条 */
.section__title::before {
  content: "";
  flex: none;
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: var(--brand-mark);
}

.section__note {
  margin-top: var(--sp-3);
  max-width: var(--w-prose);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* 说明文字下面的栅格自己拉开距离，不用在 HTML 里写内联样式 */
.section__note + .grid {
  margin-top: 26px;
}

/* 内页主体的上下留白 */
.page-body {
  padding-block: 40px 72px;
}

/* 紧跟区块之后的次级内容 */
.block-top {
  margin-top: var(--sp-10);
}

/* 只需要上留白的提示条行 */
.block-pad-top {
  padding-block: 22px 0;
}

.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   栅格
   -------------------------------------------------------------------------- */

.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--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--sp-3); }

@media (max-width: 1180px) {
  .grid--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

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

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

/* 窄屏收紧区块节奏，不然一屏只放得下一段 */
@media (max-width: 860px) {
  .section { padding-block: 34px; }
  .section--tight { padding-block: 24px; }
  .page-body { padding-block: 26px 48px; }
}

/* --------------------------------------------------------------------------
   双栏 / 三栏骨架
   -------------------------------------------------------------------------- */

/* 文章页：正文卡 + 右侧辅助栏 */
.with-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--w-aside);
  gap: var(--sp-5);
  align-items: start;
}

/* 正文卡定宽：720 正文 + 36×2 内边距，避免大屏上出现 900+ 的长行 */
.with-aside > .article,
.with-toc > .article,
.ab-layout > .article {
  max-width: var(--w-article);
}

/* 带章节目录的文章页：目录 + 正文卡 + 辅助栏 */
.with-toc {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 280px;
  gap: var(--sp-5);
  align-items: start;
}

/* 1180 以下：目录折成顶部横条（见 pages.css），正文与辅栏并排 */
@media (max-width: 1180px) {
  .with-toc {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  /* 中等宽度先收回辅栏宽度，别把正文挤窄 */
  .with-aside {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

@media (max-width: 860px) {
  .with-aside,
  .with-toc {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 单栏后目录不再横铺，辅栏回到竖排 */
  .with-toc .toc {
    grid-column: auto;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* 侧栏吸顶：长文滚动时目录跟着走 */
.sticky {
  position: sticky;
  top: var(--sp-5);
}