/* ===========================================================
   layout.css — 只放「骨架」：容器、区块节奏、栅格、两栏。
   这里不定义任何组件外观，避免覆盖 components.css。
   断点只写属于这一层的：≤1024 与 ≤640。
   =========================================================== */

.container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: calc(var(--w-prose) + var(--gutter) * 2); }

/* 区块节奏：设计稿 96 / 64 上下留白 */
.section { padding-block: var(--s-24); }
.section--tight { padding-block: var(--s-16); }
.section--raise { background: var(--bg-raise); }
.section--sunken { background: var(--bg-sunken); }

/* —— 栅格 —— */
.grid { display: grid; gap: var(--s-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)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* —— 两栏：左侧说明 / 右侧视觉 —— */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-16);
  align-items: center;
}
.split--wide-visual { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
.split--wide-text { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }

/* —— 区块头：三段式 眉 / 标题 / 副 —— */
.block-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-16);
  max-width: calc(var(--w-prose) + var(--s-10));
}
.block-head--center { align-items: center; text-align: center; margin-inline: auto; }
.block-head .lede { margin-top: var(--s-1); }

/* —— 通栏背景条（Hero 之类）—— */
.full-bleed {
  position: relative;
  overflow: hidden;
}

/* 视觉组：图位统一.No这类包裹不参与内容宽度判定，
   见 verify_site.py 的 isMediaNode */
.media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--card-line);
}
.media img { width: 100%; height: auto; }

.media--tall img { aspect-ratio: 9 / 19.5; object-fit: cover; }
.media--wide img { aspect-ratio: 16 / 9; object-fit: cover; }

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: var(--s-4); }
.spacer { flex: 1 1 auto; }

/* —— ≤1024：两栏与三栏一并收成一栏 —— */
@media (max-width: 1024px) {
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split,
  .split--wide-visual,
  .split--wide-text { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .section { padding-block: var(--s-20); }
  .block-head { margin-bottom: var(--s-12); }
}