/* ============================================================
   layout.css — 容器 / 区块节奏 / 栅格 / 两栏 / 全局断点
   仅放「本文件自己定义」的东西；组件级 @media 覆盖随组件写在 blocks.css。
   ============================================================ */

/* 容器：max-width = 内容区宽度 + 左右内边距（border-box，内边距会被算进去，必须补回） */
.container {
  width: 100%;
  max-width: calc(var(--w-container) + 2 * var(--pad-x));
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* 长文 / lede 阅读宽度档（全站唯一除容器外的第二档） */
.prose { max-width: var(--w-prose); }

.section { padding-block: var(--sp-section); }
.section--alt { background: var(--bg-alt); }

/* —— 栅格 —— */
.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)); }

@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: 640px) {
  .grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .grid--4 { grid-template-columns: 1fr; }
}

/* —— 两栏 split（Hero / 核心能力块 复用）—— */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-7); }
}