/* ==========================================================================
   layout.css — 容器 / 区块节奏 / 栅格 / 长文档位 / 全局断点
   只放「这一层自己定义的东西」。组件级（.hero / .data-bar 等）的 @media 覆盖
   必须写在定义该组件的那个文件里，否则会被后加载的同优先级规则静默盖掉。
   ========================================================================== */

.container {
  width: min(calc(100% - 48px), var(--w-container));
  margin-inline: auto;
}

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

/* ── 区块纵向节奏 ─────────────────────────────────────────────────────── */
.section          { padding-block: var(--sp-12); }   /* 86 */
.section--sm      { padding-block: var(--sp-10); }   /* 64 */
.section--lead    { padding-block-start: var(--sp-11); } /* 76，用于页头 */
.section--tail    { padding-block-end: var(--sp-12); }
.section--band    { background: var(--band); }
.section--flush   { padding-block-end: 0; }

/* ── 栅格：列宽由设计稿的卡片尺寸反算，正好整除 ──────────────────────── */
.grid {
  display: grid;
  gap: var(--sp-5);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 1200 → 590 */
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 1200 → 386 */
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 1200 → 285 */

/* ── 堆叠：默认纵向 flex，间距用 gap 不用 margin ─────────────────────── */
.stack { display: flex; flex-direction: column; }

/* ── 全局断点 ─────────────────────────────────────────────────────────
   只放令牌降档与它自己定义的栅格。 */

@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: 768px) {
  /* 字号整体降档：改这一处，全站生效 */
  :root {
    --fs-22: 36px;  /* display 52 → 36 */
    --fs-21: 34px;
    --fs-20: 30px;  /* h1 42 → 30 */
    --fs-19: 28px;
    --fs-18: 27px;
    --fs-17: 26px;
    --fs-16: 26px;  /* h2 34 → 26 */
    --fs-15: 24px;
    --fs-14: 22px;
    --fs-13: 21px;
    --fs-12: 19px;

    /* 区块留白同步收窄，否则手机上首屏全是空白 */
    --sp-13: 64px;
    --sp-12: 56px;
    --sp-11: 48px;
    --sp-10: 40px;
    --sp-9: 36px;
  }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .container { width: min(calc(100% - 40px), var(--w-container)); }
}