/* ==========================================================================
   pages.css · 首页 14 屏页级布局 + 9 个栏目页模板微调
   作用域：.page-index / .page-thought / … 由 body class 限定
   只引用 tokens.css 变量。
   ========================================================================== */

/* ==========================================================================
   1. 屏 01 · #hero（100vh 满幅影像）
   ========================================================================== */
.screen--hero {
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  padding-block: 0;
  padding-bottom: var(--space-9);
  overflow: hidden;
  border-top: 0;
  background: var(--color-soil);
  color: var(--color-ink-inverse);
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  will-change: auto;
}

.hero__scrim-a,
.hero__scrim-b {
  position: absolute;
  inset: 0;
}

/* 两层遮罩在窄屏/宽屏的搭配不一样：
   <768 文字通栏，a 与 b 都是竖向，所以两层都用 narrow 档（a 0.46 / b 0.40）；
   ≥768 文字靠左，b 换回「左浓右淡」的横向渐变，a 回原值。 */
.hero__scrim-a { background: var(--scrim-hero-a-narrow); }

/* base（<768）用竖向均匀遮罩：窄屏文字通栏，hero-b 的横向渐变到 74% 就没了，
   右半截文字落在几乎无遮罩的区域（实测 .hero__subtitle 2.35:1）。
   768 起文字靠左、右半留给照片，再换回横向渐变。 */
.hero__scrim-b { background: var(--scrim-hero-b-narrow); }

.hero__landing {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: var(--scrim-landing);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: var(--z-base);
  padding-top: calc(var(--nav-h) + var(--space-9));
}

.hero__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  line-height: var(--lh-eyebrow);
  color: var(--color-accent-soft);
  margin-bottom: var(--space-4);
  max-width: none;
}

.hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--color-ink-inverse);
  letter-spacing: var(--ls-wide);
}

.hero__subtitle {
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-ink-inverse);
  max-width: 34em;
}

.hero__rule {
  display: block;
  width: var(--space-5);
  height: 1px;
  background: var(--color-accent-soft);
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}

.hero__copy {
  max-width: 720px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-inverse);
}

.hero__copy p { max-width: none; }

.hero__copy p + p { margin-top: var(--space-4); }

.hero__jump { margin-top: var(--space-6); }

/* 首屏「想先看定义？」压在照片上，1440 实测 accent-soft 只有 4.16:1
   （79.8% 像素不达 4.5）。这里才是这条链真正的着色点（它不是 .on-dark），
   与 .btn--text.on-dark 一起切到 glow；本轮遮罩加强后实测 8.39:1。 */
.hero__jump .btn--text {
  color: var(--color-glow);
  text-decoration-color: var(--color-line-inverse-mid);
}

.hero__jump .btn--text:hover { color: var(--color-ink-inverse); }

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  min-height: 44px;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  color: var(--color-ink-inverse-2);
  text-decoration: none;
}

.hero__scroll:hover { color: var(--color-ink-inverse); }

.hero__scroll .icon {
  animation: hero-nudge 2.4s var(--ease-out) infinite;
}

@keyframes hero-nudge {
  0%, 60%, 100% { transform: translateY(0); }
  75% { transform: translateY(3px); }
}

@media (min-width: 768px) {
  .screen--hero { padding-bottom: var(--space-10); }

  .hero__inner { padding-top: calc(var(--nav-h) + var(--space-10)); }

  /* ≥768 文字靠左，右半留给照片：换回「左浓右淡」的横向渐变。
     这档不是只有窄屏坏过——1440 实测正文 3.01:1，原横向渐变在文字列的 56% 处
     只剩 0.19，叠加竖向的 0.37 后合成 0.49，远不够。四档改强后文字列稳在 0.68 上下。 */
  .hero__scrim-b { background: var(--scrim-hero-b); }

  /* 竖向遮罩回全站原值（窄屏那 0.46 只为通栏文字让步，宽屏不需要） */
  .hero__scrim-a { background: var(--scrim-hero-a); }
}

@media (max-width: 767px) {
  /* 手机端只保留前两句核心文案（design-spec 屏 01 手机差异） */
  .hero__copy p:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll .icon { animation: none; }
}

/* ==========================================================================
   2. 屏 02 · #why 六问
   ========================================================================== */
.screen--why .grid--why {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .screen--why .grid--why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .screen--why .grid--why { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   3. 屏 04 · #eight-systems 八大系统 4×2
   ========================================================================== */
.grid--systems {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .grid--systems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .grid--systems { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   4. 屏 05 · #china 双栏（左竖排引言 / 右 10 标签）
   ========================================================================== */
.china-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pad-subblock);
}

.china-grid__quote {
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .china-grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-8);
    align-items: stretch;
  }
}

/* ==========================================================================
   5. 屏 07 · #tech 13 项矩阵
   ========================================================================== */
.grid--tech {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

.grid--tech .card--tech:last-child {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  min-height: 72px;
  background: var(--color-tech-tint);
  border-color: var(--color-line);
}

@media (min-width: 768px) {
  .grid--tech { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .grid--tech { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   6. 屏 09 · #life 生活 12 项
   ========================================================================== */
.grid--life {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .grid--life { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .grid--life { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   7. 分流卡（非 14 屏，插在屏 09 之后）
   ========================================================================== */
.screen--branch {
  padding-block: var(--space-9);
  background: var(--color-bg-alt);
}

.branch__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin-bottom: var(--space-6);
}

.branch__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

.branch__card {
  justify-content: flex-start;
  min-height: 120px;
}

.branch__card .card__title { font-size: var(--fs-h4); }

@media (min-width: 768px) {
  .screen--branch { padding-block: var(--space-9); }
}

@media (min-width: 1200px) {
  .branch__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .branch__card { min-height: 168px; }
}

/* ==========================================================================
   8. 屏 10 · #practice 占位卡区
   ========================================================================== */
.grid--placeholder {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

/* 这里和下面 1200 档一样是 3 列，不是笔误：屏 10 的「企业实践」面板有三张案例卡，
   2 列栅格会把它排成 2+1，第三张落单且比前排矮 17px，切 tab 时面板高度跳 184–218px。
   3 列后三张在同一行、被栅格拉到等高，跳幅降到 17–70px。 */
@media (min-width: 768px) {
  .grid--placeholder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .grid--placeholder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 只剩一张卡时占满整行并居中。
   768 档起就是 3 列栅格，单卡会占 1/3、右边空 2/3，比 3 张空卡更像「没做完」。
   用 :only-child 而不是加一个 .is-single 类：将来真接进 2–3 个案例时
   这条自动失效、栅格自己复原，不需要回来删代码。
   width:100% 不能省——只给 max-width + justify-self:center 时，
   居中项会按内容收缩，实测五张卡宽 353/369/338/338/331，切 tab 会跳 38px。 */
.grid--placeholder > :only-child {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 460px;
  justify-self: center;
}

/* 1120 宽的栅格里，460 的单卡居中后右侧空 330、屏末再空 200，重心全塌在左边。
   只放宽到 720（不是 100%）：100% 会变成一条 1120 的横幅，与上方 320 宽的
   tab 条彻底脱节；720 仍是一张「卡」，两侧各余 200。
   注意：这条必须写在上面 base 规则之后——同特异度时靠源码顺序决胜，
   写进前面的 1200 断点块会被 base 的 460 反杀。 */
@media (min-width: 1200px) {
  .grid--placeholder > :only-child { max-width: 720px; }
}

/* ==========================================================================
   9. 屏 12 · #standards 六份文件 3×2
   ========================================================================== */
.grid--docs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .grid--docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .grid--docs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   10. 屏 13 · #action 五张行动卡
   ========================================================================== */
.grid--actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .grid--actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--actions > *:nth-child(5) { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
  .grid--actions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid--actions > *:nth-child(5) { grid-column: auto; }
}

/* ==========================================================================
   11. 屏 14 · #vision（100vh 深色收束）
   ========================================================================== */
.screen--vision {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-block: var(--space-9);
  background: var(--color-soil);
  color: var(--color-ink-inverse);
  overflow: hidden;
  border-top: 0;
}

.vision__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

.vision__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-vision);
}

/* ≥768 加一层横向「文字侧」遮罩：右侧绿田留亮，对比度只保证文字那一列。
   两层在同一条 background 里叠加，不额外加 DOM 节点。 */
@media (min-width: 768px) {
  .vision__scrim {
    background: var(--scrim-vision-side), var(--scrim-vision-wide);
  }
}

.vision__inner {
  position: relative;
  z-index: var(--z-base);
}

.vision__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  line-height: var(--lh-eyebrow);
  /* 压图小字：accent-soft 在亮绿田上只有 3.9:1，改用全站最亮的 glow，
     叠右侧横向遮罩后实测 5.1:1。 */
  color: var(--color-glow);
  margin-bottom: var(--space-5);
  max-width: none;
}

.vision__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-medium);
  color: var(--color-ink-inverse);
  letter-spacing: var(--ls-normal);
  max-width: 26em;
}

.vision__body {
  margin-top: var(--space-6);
  max-width: 720px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* 压图正文不用 ink-inverse-2：它比 ink-inverse 暗一档，压在亮绿田上只剩 2.5:1，
     遮罩要压到 0.8 以上才够，图就废了。整段提升到 ink-inverse 后 0.6 遮罩即达标。 */
  color: var(--color-ink-inverse);
}

.vision__body p { max-width: none; }

.vision__body p + p { margin-top: var(--space-5); }

.vision__litany {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-quote-sm);
  line-height: 2;
  font-weight: var(--fw-regular);
  color: var(--color-ink-inverse);
  max-width: none;
}

.vision__litany span { display: block; }

.vision__closing {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  font-weight: var(--fw-medium);
  color: var(--color-ink-inverse);
  max-width: 30em;
  /* 1440 下末行只剩「人。」两个字。pretty 会轻微改写断行位置以避免孤字；
     不支持该特性的浏览器直接忽略，无回退风险。 */
  text-wrap: pretty;
}

.vision__exits {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.vision__more {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-6);
}

@media (min-width: 768px) {
  .vision__exits { flex-direction: row; align-items: center; gap: var(--space-4); }
  .vision__more { justify-content: flex-end; }
}

/* ==========================================================================
   12. 栏目页：有图页头的高度与文字压图参数
   ========================================================================== */
.page-china .page-header--image,
.page-practice .page-header--image {
  min-height: 420px;
  display: flex;
  align-items: flex-end;
}

.page-china .page-header--image .page-header__body,
.page-practice .page-header--image .page-header__body {
  width: 100%;
  padding-block: var(--space-9) var(--space-7);
}

@media (min-width: 1200px) {
  .page-china .page-header--image,
  .page-practice .page-header--image { min-height: 520px; }
}

/* ==========================================================================
   13. 栏目页：常用内容组合（段落 + 列表 + 卡片）
   ========================================================================== */
.prose {
  display: grid;
  gap: var(--space-5);
  max-width: 720px;
}

.prose p { max-width: none; }

.prose ul {
  display: grid;
  gap: var(--space-3);
}

.prose li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
}

.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 1px;
  background: var(--color-line-strong);
}

.prose--accent li::before {
  width: 4px;
  height: 4px;
  top: 0.72em;
  background: var(--color-accent);
}

.big-question {
  margin-block: var(--pad-subblock);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.5;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  max-width: 24em;
}

@media (min-width: 1200px) {
  .big-question { font-size: var(--fs-h2); line-height: 1.4; }
}

/* 双栏对照（industry.html S4） */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}

.panel {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-1);
}

.panel__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.panel__q {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
  max-width: none;
}

.panel__desc {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-ink-3);
  max-width: none;
}

/* 生活页「从农田到餐桌」六段流程（纯 CSS 图形） */
.flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

.flow__step {
  position: relative;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-1);
  text-align: center;
}

.flow__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.flow__note {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--color-ink-3);
}

.flow__step::after {
  content: "→";
  position: absolute;
  right: calc(var(--space-2) * -1);
  top: 50%;
  transform: translate(50%, -50%);
  color: var(--color-line-strong);
  font-size: var(--fs-sm);
}

.flow__step:nth-child(2n)::after { display: none; }

@media (min-width: 768px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow__step:nth-child(2n)::after { display: block; }
  .flow__step:nth-child(3n)::after { display: none; }
}

@media (min-width: 1200px) {
  .flow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .flow__step:nth-child(3n)::after { display: block; }
  .flow__step:last-child::after { display: none; }
}

/* 实践页四步循环（#cycle） */
.cycle {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

.cycle__item {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-1) var(--radius-1) 0;
}

.cycle__num {
  font-family: var(--font-num);
  font-size: var(--fs-num-sm);
  color: var(--color-accent);
  letter-spacing: var(--ls-normal);
}

.cycle__name {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.cycle__desc {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-ink-2);
  max-width: 40em;
}

@media (min-width: 768px) {
  .cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .cycle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 行动页「适合谁」等元信息行 */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-caption);
  color: var(--color-ink-3);
  letter-spacing: var(--ls-normal);
}

.meta-row span { max-width: none; }

/* 案例库字段清单表的空态说明 */
.table-empty {
  padding: var(--space-9) var(--space-5);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-ink-3);
}

.table-empty p { max-width: 40em; margin-inline: auto; }

/* ==========================================================================
   404 页
   复用 .section / .container / .btn / .btn--primary / .btn--text，
   此处只补这一个页面独有的排版。所有取值来自 tokens，无字面量。
   页面底色跟随 .section（纸色），不加暗底，避免与首页 hero 抢视觉。
   ========================================================================== */

/* 404 页没有面包屑（栏目页靠 .breadcrumb-wrap 的 padding-top 让开固定顶栏），
   所以这里自己补上 nav 高度，否则区块顶边会被顶栏压住。 */
.notfound {
  padding-top: calc(var(--nav-h) + var(--pad-section));
}

.notfound__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

/* 「404」是纯装饰：标记 aria-hidden，取最弱的中性阶，只做视觉锚点 */
.notfound__code {
  margin: 0;
  font-family: var(--font-num);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--color-n200);
}

.notfound__title {
  margin-block: var(--space-2) 0;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
}

/* 与 .section__title-rule 同一套语言：短横线，纯装饰 */
.notfound__rule {
  display: block;
  width: var(--space-7);
  height: 1px;
  margin-block: var(--space-4);
  background: var(--color-line-strong);
}

.notfound__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
}

/* 路径占位：等宽数字字体 + 浅底片，长路径可断行 */
.notfound__path {
  padding: 1px var(--space-2);
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  color: var(--color-ink-3);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-1);
  word-break: break-all;
}

.notfound__cta { margin-block: var(--space-6) 0; }

.notfound__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-5);
  margin-block: var(--space-4) 0;
  padding: 0;
  list-style: none;
}

.notfound__links li { list-style: none; }