/* layout.css — 容器 / 分节 / 栅格 / 揭示动画 */

/* ── 全局骨架 ───────────────────────────────────────────────
 * body 为 sticky 纵向骨架：内容少时 <main> 撑开视口，二维码与页脚始终贴底；
 * 子页 .page 撑满导航以下首屏并垂直居中，单模块也不空旷。
 */
body { display: flex; flex-direction: column; }
main { flex: 1 0 auto; display: flex; flex-direction: column; }
.main--sub { padding-top: var(--nav-height); }
.main--sub .page {
  flex: 1 0 auto;
  min-height: calc(100vh - var(--nav-height));
  display: flex; flex-direction: column; justify-content: center;
}
.main--sub .page > .section { flex: 0 0 auto; }

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

/* ── 分节 ─────────────────────────────────────────────────── */
.section { padding-block: var(--space-3xl); position: relative; }
.section--tight { padding-block: var(--space-2xl); }
.section--alt { background: var(--color-paper-2); }            /* 浅层次背景区分模块 */
.section--dark { background: var(--color-graphite); color: var(--color-graphite-ink); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-paper); }

/* ── 刊头 masthead（杂志风：编号 + 类别 + 衬线大标题 + 导语 + 墨线）── */
.masthead {
  max-width: 64rem;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: var(--rule-w) solid var(--color-rule-2);
}
.masthead__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-display-s); line-height: 1.1;
  letter-spacing: -0.025em; color: var(--color-ink);
  margin: 0 0 var(--space-sm);
}
.masthead .dek { margin: 0; }
.section--dark .masthead__title { color: var(--color-paper); }
.section--dark .masthead { border-bottom-color: var(--color-rule-dark); }

/* ── 栅格 ─────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--space-md); }
.grid--services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--articles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--business { grid-template-columns: 1fr; gap: var(--space-2xl); }

@media (max-width: 60rem) {       /* 平板 */
  .grid--services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {       /* 手机 */
  .grid--services { grid-template-columns: 1fr; }
  .grid--articles { grid-template-columns: 1fr; }
}

/* 业务介绍：图文交错 diptych */
.biz-item { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-xl); align-items: center; }
.biz-item[data-reverse="true"] .biz-item__media { order: 2; }
.biz-item__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); border: var(--rule-w) solid var(--color-rule); background: var(--color-paper-3); }
.biz-item__media img { width: 100%; height: 100%; object-fit: cover; }
.biz-item__icon { display: inline-flex; align-items: center; gap: var(--space-2xs); margin-bottom: var(--space-sm); }
.biz-item__title { font-size: var(--text-2xl); }
.biz-item__content { color: var(--color-ink-3); margin-top: var(--space-sm); }
@media (max-width: 60rem) {
  .biz-item { grid-template-columns: 1fr; gap: var(--space-md); }
  .biz-item[data-reverse="true"] .biz-item__media { order: 0; }
}

/* ── 揭示动画（IntersectionObserver 加 .is-in）────────────── */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
/* 错峰：用内联 --i 控制延迟 */
.reveal[style*="--i"] { transition-delay: calc(var(--i, 0) * 60ms); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}