/* ==========================================================================
   layout.css · 内容容器 / 区块节奏 / 栅格 / 全局断点
   --------------------------------------------------------------------------
   这里只放「它自己定义的东西」的响应式：
   令牌、.container、.prose、.grid--N。
   组件自己的 @media（.hero / .duo-card / .site-header…）必须写在定义它的
   那个文件里 —— 写在别处会被后加载的同名规则静默盖掉。
   ========================================================================== */

/* ---------- 内容宽度：全站只有两档 ---------- */
.container {
  width: 100%;
  /* max-width 含左右留白，所以 1440 视口下内容区正好 = --w-container */
  max-width: calc(var(--w-container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose {
  max-width: var(--w-prose);
  margin-inline: auto;
}

/* ---------- 区块节奏 ---------- */
.section { padding-block: var(--sp-13); }
.section--first { padding-block: var(--sp-5) var(--sp-13); }
.section--last { padding-bottom: var(--sp-13); }
.section--deep { background: var(--deep); }

/* ---------- 栅格 ---------- */
/* 不设 align-items:start —— 让同一行的卡片自然等高，比「一高一矮」整齐 */
.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)); }

/* 两栏主从结构（左目录右正文） */
.split {
  display: grid;
  gap: var(--sp-11);
  align-items: start;
}
.split--aside { grid-template-columns: 236px minmax(0, 1fr); }

/* 纵向堆叠 */
.stack { display: flex; flex-direction: column; gap: var(--sp-6); }
.stack--lg { gap: var(--sp-9); }

/* 锚点跳转时不被吸顶导航压住 */
:target { scroll-margin-block-start: 96px; }

/* ==========================================================================
   全局断点 —— 只改令牌与栅格
   ========================================================================== */

@media (max-width: 1200px) {
  :root {
    --fs-display: 48px;
    --fs-h1: 42px;
    --fs-h2: 32px;
    --gutter: 32px;
  }
  .split--media { grid-template-columns: minmax(0, 1fr); gap: var(--sp-9); }
}

@media (max-width: 1024px) {
  :root {
    --fs-display: 42px;
    --fs-h1: 36px;
    --fs-h2: 30px;
    --fs-h2-sm: 25px;
    --fs-h3: 21px;
    --fs-card: 18px;
    --gutter: 32px;
  }
  .section { padding-block: var(--sp-12); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--aside { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
}

/* 3 列在 896px 以下每张只剩不到 270px，必须折成 2 列。
   奇数张会在左下角剩一张「孤儿卡」。这里**刻意不让它跨满整行**：
   跨满后卡片宽度和上面两张不一致，右侧一半还是空的，读起来像被拉长；
   保持等宽、左缘对齐，右下角留白反而读作「列表到此为止」。
   实测对比过跨满 / 等宽留空 / 居中三种，等宽留空最干净。 */
@media (max-width: 896px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  :root {
    --fs-display: 33px;
    --fs-h1: 29px;
    --fs-h2: 24px;
    --fs-h2-sm: 21px;
    --fs-h3: 19px;
    --fs-card: 17px;
    --fs-lead: 15px;
    --fs-body: 14.5px;
    --gutter: 20px;
  }
  .section { padding-block: var(--sp-10); }
  .section--first { padding-block: var(--sp-2) var(--sp-10); }
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}