/* ============================================================
   EOC 共创组 · 首页（/index.html）专属布局优化
   ------------------------------------------------------------
   本文件只由 /index.html 引入，其它页面完全不受影响；
   从 index.html 中移除对应 <link> 即可整体回滚本次布局调整。

   为什么单开一个文件，而不是改 /css/base/index.css：
     index.css 被 7 个页面共用（index.html / zh/index.html /
     zh/about / zh/docs / zh/download / https 跳转页等），
     而本文件里的规则（首屏留白、单页卡片栅格）是按首页的
     DOM 结构实测调出来的，写进共享文件会波及这些页面的既有布局。

   本文件只做四件事：
     1) 首屏文案退场后不再残留占位高度；
     2) 特性卡片栅格由 3 列改 4 列，消除「4 张卡 / 3 列」的孤儿卡；
     3) 宽幅面板正文与标题左边缘对齐、与上方栅格同宽；
     4) 固定页脚不再拦截底部区域的鼠标点击。

   刻意不做的事：
     · 不新增 h1 字号规则。标题层级由 h2 改为 h1 后，浏览器对 h1 的
       默认样式（font-size: 2em、margin: 0.67em）会被既有 .intro-title
       的 font-size / font-weight 与全局 *{margin:0} 完全覆盖，
       视觉零变化；此处若再写死字号，反而会压掉 base 在 ≤640px
       断点下的 21px 规则。
     · 不动入场编排、i18n、主题变量与任何 DOM 契约（id / class / href）。
   ============================================================ */

/* ===== 1. 首屏文案退场后不残留占位 =====
   现状：.welcome / .desc 退场只改了 opacity 与 transform，盒子仍在文档流里，
        实测（1440×820）退场后 .text-wrap 仍占 111px 高度；叠加 .buttons 的
        40px 上边距，首屏顶部形成约 148px 的空白带。

   做法：退场时用 max-height 把这块高度收掉。
        · max-height 必须给一个具体上限才能参与过渡（auto 不可插值），
          取 240px（现状 111px 的 2.2 倍余量，覆盖其它语种文案变长）。
        · overflow:hidden 只在 .exit 状态下加，正常展示时不存在被裁切的风险。
        · 收拢延后 0.4s 启动：先让文字淡出到约六成，再收掉高度，
          避免出现「文字还在、位置突然上跳」的观感。 */

.text-wrap {
  max-height: 240px;
  transition: opacity 0.7s var(--smooth),
              transform 0.8s var(--elastic-soft),
              max-height 0.4s var(--smooth) 0.4s;
}
.text-wrap.exit {
  max-height: 0;
  overflow: hidden;
}

/* ===== 2. 首屏按钮区上边距收紧 =====
   文案退场后，首屏只剩渐变主标题与按钮，40px 的上边距会把整体重心压到
   屏幕中线以下。收到 26px 后重心上移，与上方留白形成更均衡的呼吸感。
   移动端（≤640px，base 为 32px）与横屏矮视口（base 为 20px）维持原值，
   故此处用 min-height 限定，避免覆盖这两档既有的紧凑布局。 */
@media (min-width: 641px) and (min-height: 481px) {
  .buttons { margin-top: 26px; }
}

/* ===== 3. 特性卡片栅格：3 列 → 4 列 =====
   首页恰好 4 张特性卡片，而 1025–1919px 区间 base 用的是 3 列，
   必然出现「2 + 1」的孤儿卡：第 4 张独占一行、右侧空出两列（实测
   1440px 下行分布为 {第一行:3, 第二行:1}）。改为 4 列后单行排满。

   容器同步加宽，保证单卡不低于约 250px 的可读宽度（各档均为实测值）：
     视口 1100–1219 : 容器受 max-width: calc(100vw - 40px) 约束 → 单卡 250–280px
     视口 ≥1220     : 容器 1180px → 单卡 ≈280px
     ≥1600           : 容器 1280px → 单卡 ≈305px（与改造前 3 列时的 306px 持平）
     ≥1920           : 容器 1440px → 单卡 ≈345px
     ≥2200           : 容器 1560px → 单卡 ≈366px

   注意：.intro 是 .main-stage（max-width 880px）的子元素，base 的手法是用
   「固定宽度 + 等量负边距」让它向两侧均等外扩，所以宽度与负边距必须成对
   出现，且负边距 = (容器宽 − 上级 max-width)/2，随断点各自计算。 */
@media (min-width: 1025px) and (max-width: 1099px) {
  /* 这一档容器只有 960px，铺 4 列会把单卡压到 225px，改用 2×2 同样无孤儿卡 */
  .intro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 宽幅面板正文与标题左边缘对齐：base 在 ≥1025px 给正文加了
     max-width:56em + margin:auto 使其居中，而 h2 是左对齐，
     不覆盖会出现「标题在左、正文缩进 25px」的错位（实测 1099px 下差 25px）。 */
  .intro-wide p { margin-left: 0; margin-right: 0; }
}
@media (min-width: 1100px) {
  .intro {
    width: 1180px;
    max-width: calc(100vw - 40px);
    margin-left: -150px;
    margin-right: -150px;
  }
  .intro-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  /* 宽幅面板与上方栅格同宽，消除 base 留下的右侧空档 */
  .intro-wide { max-width: none; }
  /* 宽幅面板正文原本居中，标题却是左对齐：改成与标题同一左边缘 */
  .intro-wide p { margin-left: 0; margin-right: 0; }
}
@media (min-width: 1600px) {
  /* 上级 .main-stage 在此档放宽到 960px → 负边距 (1280-960)/2 = 160px */
  .intro { width: 1280px; margin-left: -160px; margin-right: -160px; }
}
@media (min-width: 1920px) {
  /* 上级 .main-stage 在此档为 1040px → 负边距 (1440-1040)/2 = 200px */
  .intro { width: 1440px; margin-left: -200px; margin-right: -200px; }
}
@media (min-width: 2200px) {
  /* 覆盖 base 的超大屏 3 列（minmax(0,420px)）；本档上级仍为 1040px */
  .intro { width: 1560px; margin-left: -260px; margin-right: -260px; }
  .intro-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
}

/* ===== 4. 固定页脚不再吞掉点击 =====
   页脚是 position:fixed + z-index:2 且可接收鼠标事件：内容滚动到底时，
   实测在「水平中心、距底 20px」处调用 elementFromPoint 命中的是页脚节点，
   即底部整条带的点击都被它接走（遮挡 i18n 面板等内容的可点区域）。
   页脚只有一行静态版权文字、不含任何可交互元素，取消其命中检测即可。 */
.site-footer { pointer-events: none; }

/* ===== 5. 过渡降级的重申（源码顺序保护） =====
   第 1 节重写了 .text-wrap 的 transition，而 base 中移动端与
   prefers-reduced-motion 两处对 .text-wrap 的过渡改写位于本文件之前，
   同特异性下会被本文件覆盖。故在此按原意重申一遍，保持既有降级行为。 */
@media (max-width: 640px) {
  .text-wrap {
    transition: opacity 0.55s var(--smooth),
                transform 0.55s var(--smooth),
                max-height 0.4s var(--smooth) 0.4s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .text-wrap, .buttons, .btn, .bg-img, .intro-card { transition-duration: 0.15s; }
}