@charset "UTF-8";
/* ==========================================================================
   layout.css —— 容器、区块节奏、栅格
   内容宽度只有两档：--w-container（区块/卡片）与 --w-prose（长文）。
   任何元素只挂一个宽度类，不再出现第三种宽度。
   ========================================================================== */

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.site-main { flex: 1 0 auto; }

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

/* 长文阅读宽度：全站唯一的「第二档宽度」，一个元素只挂这一个宽度类 */
.prose { max-width: var(--w-prose); }

/* ---------- 区块节奏 ---------- */
.section { padding-block: var(--sp-9); }
.section--soft { background: var(--bg-soft); }

/* 内页「页头 + 内容区」两种间距档 */
.section--page { padding-block: 56px 80px; }
.section--tight { padding-block: 64px 28px; }

/* ---------- 区块标题 ---------- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.section-head--center {
  align-items: center;
  text-align: center;
}

/* ---------- 栅格 ---------- */
.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: flex;
  align-items: center;
  gap: 90px;
}

.split__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* 图位默认贴住右边缘；图片在左侧的区块改为贴左边缘 */
.split__media {
  flex: 0 0 300px;
  display: flex;
  justify-content: flex-end;
}

.split--image-left .split__media { justify-content: flex-start; }

/* ---------- 响应式断点 ---------- */
@media (max-width: 1400px) {
  :root { --gutter: 64px; }
}

@media (max-width: 1100px) {
  :root { --gutter: 40px; --sp-9: 72px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { gap: 48px; }
  .split__media { flex-basis: 260px; }
}

@media (max-width: 860px) {
  /* 字号降一档：全部走令牌，改一处全站生效 */
  :root {
    --gutter: 24px;
    --sp-9: 56px;
    --fs-display: 38px;
    --fs-title: 32px;
    --fs-h2: 28px;
    --fs-h3: 24px;
    --fs-h4: 20px;
    --fs-stat: 26px;
    --fs-cta: 26px;
  }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .split,
  .split--image-left { flex-direction: column; align-items: stretch; gap: var(--sp-6); }
  .split__media,
  .split--image-left .split__media { flex-basis: auto; justify-content: center; }
}

/* 注意：组件级的响应式覆盖必须写在定义该组件的文件里（components.css / blocks.css）。
   写在这里会被后加载的同优先级规则盖掉 —— CSS 的失败模式是静默的。 */

@media (max-width: 640px) {
  :root { --gutter: 20px; }
}