/* layout.css —— 容器 / 栅格 / Section 节奏 / 深浅切换。依赖：tokens.css, base.css */

.container {
  width: 100%;
  max-width: var(--site-container-default);
  margin: 0 auto;
  padding-inline: var(--site-gutter);
}
.container--narrow { max-width: var(--site-container-narrow); }
.container--wide { max-width: var(--site-container-wide); }

/* ---------- Section 节奏 ---------- */
.section {
  position: relative;
  padding-block: var(--site-section-y);
}
.section--light { background: var(--site-bg); color: var(--site-text-2); }
.section--dark {
  background: linear-gradient(180deg, var(--site-ink-800) 0%, var(--site-ink-900) 100%);
  color: var(--site-ink-text-2);
}
.section--dark-flat {
  background: var(--site-ink-900);
  color: var(--site-ink-text-2);
}
.section--tight { padding-block: calc(var(--site-section-y) * 0.6); }

/* 相邻深浅切换处补一条发丝线，避免深色边缘发灰 */
.section--light + .section--dark,
.section--light + .section--dark-flat { border-top: 1px solid var(--site-border); }

.section__head { margin-bottom: var(--site-stack); }
.section__head > * + * { margin-top: 16px; }
.section__stack > * + * { margin-top: var(--site-stack); }

/* ---------- 通用栅格 ---------- */
.grid { display: grid; gap: var(--site-grid-gap); }
.grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--57 { grid-template-columns: 5fr 7fr; }
.grid--48 { grid-template-columns: 4fr 8fr; }
.grid--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

/* ---------- 屏内纵向节奏 ---------- */
.stack > * + * { margin-top: var(--site-stack); }
.stack-sm > * + * { margin-top: 24px; }
.stack-xs > * + * { margin-top: 12px; }

/* ---------- 分栏容器：桌面并排，移动端塌陷 ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--site-grid-gap);
  align-items: start;
}
.split--48 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- 响应式 ---------- */
@media (max-width: 1023px) {
  .grid--12 > [class*="span-"],
  .grid--6 > [class*="span-"] { grid-column: span 6; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .grid--12,
  .grid--6,
  .grid--4,
  .grid--3,
  .grid--2,
  .grid--57,
  .grid--48,
  .grid--split,
  .split,
  .split--48,
  .split--even { grid-template-columns: minmax(0, 1fr); }
  .grid--12 > [class*="span-"],
  .grid--6 > [class*="span-"] { grid-column: auto; }
  .lead { max-width: none; }
}

/* ---------- 网格纹理背景（台账隐喻，opacity ≤0.05） ---------- */
.texture-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--mock-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--mock-grid) 1px, transparent 1px);
  background-size: 40px 40px;
}