/* ==========================================================================
   layout.css — 容器 / 区块节奏 / 栅格 / 两栏 split / 全局断点
   注意：这里只放「本文件自己定义的东西」的断点。
   组件级（.hero / .shot-wall / .faq-list …）的 @media 必须写在定义它的文件里，
   否则会被后加载的同优先级规则静默盖掉（改不动、也不报错）。
   ========================================================================== */

/* ---------- 容器 ---------- */
.container {
  width: 100%;
  max-width: calc(var(--w-container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 长文 / 问答列表：全站唯一的阅读宽度档 */
.prose {
  width: 100%;
  max-width: calc(var(--w-prose) + var(--gutter) * 2);
  margin-inline: auto;
}

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

.section--tight-block { padding-block-end: 0; }
.section--tight-start { padding-block-start: 0; }

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

.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: flex;
  align-items: center;
  gap: var(--sp-11);
}

/* 左列显式 flex-start：默认 stretch 会把带背景填充的行内元素拉成整条长条 */
.split__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);
}

.split__media { flex: 0 0 auto; }

/* ==========================================================================
   全局断点
   ========================================================================== */

/* 笔记本档：字号整体降档，布局不动 */
@media (max-width: 1180px) {
  :root {
    --fs-hero: 56px;
    --fs-page-title: 44px;
    --fs-h2: 34px;
    --fs-h3: 28px;
    --fs-feature: 27px;
    --fs-lead: 17px;
    --fs-body: 15.5px;
    --fs-card: 18px;
    --fs-item: 17px;
    --fs-meta: 14px;
    --section-py: 76px;
    --sp-11: 48px;
    --sp-13: 64px;
  }
}

/* 平板档：栅格折两列，两栏改竖排 */
@media (max-width: 980px) {
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .split {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-8);
  }

  .split--reverse { flex-direction: column-reverse; }

  .split__media { width: 100%; }
  .split__body { align-items: stretch; }
}

/* 手机档 */
@media (max-width: 700px) {
  :root {
    --fs-hero: 38px;
    --fs-page-title: 33px;
    --fs-h2: 27px;
    --fs-h3: 23px;
    --fs-feature: 22px;
    --fs-lead: 16px;
    --fs-body: 15px;
    --fs-card: 17px;
    --fs-item: 16px;
    --fs-meta: 13.5px;
    --section-py: 56px;
    --gutter: 20px;
    --header-h: 64px;
    --sp-11: 32px;
    --sp-13: 40px;
  }

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

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