/* container.css —— L2 容器查询基建 + 流体布局类（master §4） */

/* L2 组件形态看自身容器宽而非视口：需要容器查询的组件外包 .cq */
.cq { container-type: inline-size; }

/* 全站主容器：流体宽度 + 连续化左右留白（px-6 lg:px-12 的 clamp 化） */
.container-fluid {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-px);
}

/* 区块通用内边距 */
.section {
  padding-block: var(--section-py);
  padding-inline: var(--section-px);
}

/* ── L3 形态媒体查询（少量兜底；禁宽度断点布局）────────────── */

/* 触屏设备关闭 hover 微交互（P06+ 组件用 :hover 前缀此开关） */
@media (hover: none) {
  .hover-lift, .hover-scale { transition: none; }
  .hover-lift:hover, .hover-scale:hover { transform: none; }
}

/* ── P15 reveal（js-reveal 类由 reveal.mjs 挂载才生效：无 JS/爬虫/SSR 恒显〔红线「核心内容不依赖 JS」〕；
     prefers-reduced-motion 时 reveal.mjs 不挂类恒显，keyframes.css 全局降级块钳 transition 双保险）── */
html.js-reveal [data-reveal] { opacity: 0; translate: 0 24px; transition: opacity 0.5s ease, translate 0.5s ease; }
html.js-reveal [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* 极窄屏字级微调（<360px） */
@media (max-width: 359px) {
  :root {
    --fs-h2: clamp(24px, 7vw, 28px);
    --fs-body: 14px;
  }
}

/* 超宽增强（>1920px） */
@media (min-width: 1921px) {
  :root {
    --section-px: clamp(96px, 8vw, 160px);
  }
}