/* ==========================================================================
   layout.css — 容器 / 区块节奏 / 栅格 / 通用两栏 / 断点令牌降档
   只放「本文件自己定义」的东西。组件级断点写在定义它的那个文件里。
   ========================================================================== */

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

/* ---- 区块节奏：统一 48，相邻合起来 96 ---- */
.section { padding-block: var(--sp-6); }

/* 贴在一起的两个区块只留一份间距 */
.section + .section { padding-block-start: 0; }

/* ---- 栅格 ---- */
.grid {
  display: grid;
  gap: var(--sp-4);
}
.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)); }

/* ---- 通用两栏（左右结构） ---- */
.two-col {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
}

/* ---- 区块头（居中版 / 左对齐版） ---- */
.sec-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
  margin-block-end: var(--sp-5);
}
.sec-head--center { align-items: center; text-align: center; }

.sec-head__title { font-size: var(--fs-h2); }
.sec-head__lead {
  font-size: var(--fs-base);
  color: var(--text-muted);
  max-width: var(--w-prose);
}

/* ==========================================================================
   断点：这里只覆写 :root 令牌与「本文件定义的」栅格
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --fs-display: 42px;
    --fs-h1: 34px;
    --fs-h2: 30px;
    --fs-h3: 26px;
    --fs-h4: 20px;
  }

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

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

@media (max-width: 768px) {
  :root {
    --fs-display: 34px;
    --fs-h1: 29px;
    --fs-h2: 26px;
    --fs-h3: 22px;
    --fs-h4: 18px;
    --fs-lg: 16px;
  }

  .section { padding-block: var(--sp-5); }

  .two-col {
    flex-direction: column;
    gap: var(--sp-4);
  }
}

@media (max-width: 560px) {
  :root {
    --fs-display: 30px;
    --fs-h1: 26px;
    --fs-h2: 23px;
    --fs-h3: 20px;
    --fs-title: 17px;
  }

  .container { width: min(var(--w-container), 100% - 32px); }

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