/* ===== UNI 产品页：单栏、滚动分段的文案 =====
   段落按内容定高、上下留一档统一的间距；js/uni.js 把停在屏幕中间的那一段
   标成 .is-active，其余压暗。没有 JS 时所有段落都是正常亮度。 */

/* ===== 布局 ===== */
.uni-layout {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}

/* ===== 分段文案 ===== */
.uni-copy { min-width: 0; }

/* 段落不再一段占满一屏：够高就能让当前这段主导视野，又不会让上下两段
   隔着大半屏空白。间距全靠 padding，段与段之间就是这一个数。 */
.uni-step {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 7.5vh, 92px) 0;
  max-width: 34rem;
}
.uni-step--wide { min-height: 72vh; }

/* 首屏留出导航下方的呼吸，别一进页面标题就贴着导航 */
.uni-step--lead {
  min-height: 80vh;
  padding-top: clamp(64px, 11vh, 120px);
}

/* ===== 整页只剩 Hero 时：Hero 独占第一屏，footer 要滚一下才出现 =====
   :has(.uni-copy > .uni-step--lead:only-child) 就是"只剩 Hero"这个条件，
   恢复 02–06 之后 Hero 不再是独子，下面几条自动失效，回到原来的 80vh。

   导航跟首页一样改成 fixed、不占文档流：sticky 的话导航那 70px 也算在页面
   高度里，Hero 想满屏就得写 calc(100svh - 导航高度)，而导航高度是内容撑出来的，
   写死早晚对不上。浮起来之后 Hero 从 y=0 开始，100svh 正好是一屏，
   footer 紧接在一屏之后，不滚就看不见。 */
body:has(.uni-copy > .uni-step--lead:only-child) .nav {
  position: fixed;
  left: 0;
  right: 0;
  /* 导航胶囊在 style.css 里带了 margin-top（给 sticky 的子页补位置），
     这里既然改成 fixed，位置由 top 给，margin 再叠一层会掉到 28px */
  margin-top: 0;
}
.uni-copy > .uni-step--lead:only-child {
  min-height: 100vh;
  min-height: 100svh;   /* 移动端地址栏收起/展开时都不留缝，不支持 svh 的退回上一行 */
}

.step-lead {
  font-family: var(--display);
  font-size: clamp(3.2rem, 11vw, 6.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.95;
  margin-bottom: 22px;
}
.step-title {
  font-size: clamp(1.8rem, 3.8vw, 2.7rem);
  margin-bottom: 18px;
}
.step-body {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.step-body:last-child { margin-bottom: 0; }
.step-body--key { color: var(--ink); font-weight: 500; }

/* 收束段用的小一号字：这三栏是补充说明，压过上面的主段落就喧宾夺主了 */
.step-title--sm {
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  margin-bottom: 12px;
}
.step-body--sm {
  font-size: clamp(0.94rem, 1.15vw, 1.02rem);
  line-height: 1.6;
  margin-bottom: 10px;
}

/* ===== 06 收束段：三栏并排的卡片 =====
   覆盖 .uni-step 的 flex 单栏和 34rem 字宽。三张卡片等高（align-items 用默认的
   stretch）：各栏文字长短不一，顶端对齐会让三个白块下沿参差不齐。
   卡片间距比全站 .cards 的 20px 收窄一档——这里只有三张，靠得近才像一组。 */
.uni-step--row {
  display: grid;
  /* TODO 现在只有两栏（What we are building toward 在 uni.html 里暂时注释掉了）。
     那一栏放回来时，这里改回 repeat(3, minmax(0, 1fr))。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  align-content: center;   /* 三栏合起来比一屏矮，整体在段落里居中，别吊在顶上 */
  max-width: none;
  min-height: 0;           /* 卡片按内容定高：撑到 56vh 只会在文字下面留一大片空白 */
  /* 两行轨道：标题一行、正文一行。几张卡用 subgrid 共用这两行，
     标题折成两行时其余各栏的标题也占同样高度，正文因此从同一条基线起排。
     两行都是 auto——正文行按最长的一栏定高，卡片就在文字下面收住，
     下内边距和上内边距一样，不再被拉长。 */
  grid-template-rows: auto auto;
}

/* 卡面沿用全站 .card 那一套：纯白 + 圆角 + 柔和投影，不描边。
   不加 hover 抬升——这三张不可点，浮起来会让人以为能点进去。 */
.uni-step--row .row-item {
  min-width: 0;
  background: var(--surface);
  border-radius: var(--radius);
  padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 26px);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: subgrid;   /* 借用外层那两行 */
  grid-row: span 2;
  row-gap: 0;                    /* 别继承外层的栏间距，标题与正文之间用标题的 margin 撑开 */
}

/* 不支持 subgrid 的旧浏览器退回普通块级排版：给标题留两行的高度，
   三栏正文照样从同一条线起排，只是不如 subgrid 精确。 */
@supports not (grid-template-rows: subgrid) {
  .uni-step--row .row-item { display: block; }
  .uni-step--row .step-title--sm { min-height: 2.6em; }
}

/* 非活动段落压暗，把注意力留给当前这一段（仅桌面端）。
   带画面的段落只压暗文案：画面本身由 --f 单独控制淡入淡出，
   整段一起压暗会和 --f 叠加，暗两次。 */
@media (min-width: 901px) {
  .uni-layout.is-live .uni-step:not(.uni-step--media),
  .uni-layout.is-live .uni-step--media .step-copy {
    /* 同屏还能看到相邻段落，压得太狠会显得整页发灰 */
    opacity: 0.36;
    transition: opacity 0.45s ease;
  }
  .uni-layout.is-live .uni-step.is-active:not(.uni-step--media),
  .uni-layout.is-live .uni-step--media.is-active .step-copy { opacity: 1; }
}

/* ===== 带画面的段落：左右交替 + 随页面滚动 + 视差 + 淡入淡出 =====

   --p：这一段穿过视口的进度 0→1，只用来做画面在裁切框里的视差位移。
        卡片本身跟着页面正常滚动，漂的只是框里那张图。
   --f：这一段的"聚焦度"，段落停在屏幕中间时为 1，进出时衰减到 0，
        用来做卡片的淡入淡出和轻微上浮。
   两个值都由 js/uni.js 每帧写进来；这里给了默认值，所以没有 JS
   或者用户要求减少动效时，卡片就是一张正常的静态图。 */

.uni-step--media {
  --p: 0.5;
  --f: 1;
  display: grid;
  /* 画面这一列按手机宽度定，剩下的都给文案：竖屏卡片不该浮在一大片空列中间 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;    /* 文案和画面各自居中对齐，两边一起滚 */
  max-width: none;        /* 覆盖 .uni-step 的 34rem，交给 .step-copy 控制字宽 */
  min-height: 0;          /* 画面不再钉住，段落高度由内容决定 */
  /* 带画面这几段本身就比纯文字段落"重"，上下比通用间距再多留一档，
     两张图之间才不会看着像连在一起的一整块 */
  padding: clamp(68px, 9vh, 112px) 0;
}

.step-copy {
  max-width: 30rem;
  align-self: center;
}

/* 交替：默认文案在左、画面在右；.uni-step--flip 反过来。
   列宽也要跟着镜像，否则画面会掉进 0.92fr 那一列——一段宽一段窄，
   左右交替看着就像画面在忽大忽小。 */
.uni-step--flip { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
.uni-step--flip .step-copy  { grid-column: 2; grid-row: 1; }
.uni-step--flip .step-media { grid-column: 1; grid-row: 1; }

/* 画面跟着文案一起滚，不再 sticky 钉在视口上。
   UNI 是手机 App，素材是竖屏录屏：卡片按手机比例收窄并在这一列里居中，
   不要拉满整列——一列 500 多宽的 9:16 会高得离谱。 */
.uni-card {
  display: block;
  width: min(100%, 380px);
  margin: 0 auto;
}

.uni-card-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;       /* 裁掉 .uni-media 放大后溢出的部分，视差才有得漂 */
  border-radius: var(--radius);
  background: var(--surface-tint);
  box-shadow: var(--shadow);
  /* 段落变短、画面又跟着滚，淡入淡出就得收着做：
     只在进出场时轻轻压一下，别让滚到一半的画面看着像没加载出来 */
  opacity: calc(0.55 + 0.45 * var(--f));
  transform: translate3d(0, calc((1 - var(--f)) * 16px), 0)
             scale(calc(0.982 + 0.018 * var(--f)));
  will-change: transform, opacity;
}

.uni-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 竖屏素材上下本来就是 UI（顶栏、输入条、导航），放大切太多会把它们切掉：
     只放大 1.10（上下各留 5% 余量），位移收到 ±3%，不会露边也不吃掉界面 */
  transform: translate3d(0, calc((var(--p) - 0.5) * -6%), 0) scale(1.10);
  will-change: transform;
}

/* ===== 07 投资人收尾卡片 ===== */
.uni-callout {
  padding: clamp(72px, 10vw, 132px) clamp(20px, 5vw, 48px) clamp(64px, 9vw, 112px);
  background: var(--bg-alt);
}
.callout-card {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 48px);
  background: var(--surface);
  /* 描边和左侧蓝条一起去掉：白卡片落在 --bg-alt 的浅灰上，
     光靠底色差 + 投影就分得开，跟全站其他卡片是同一套语言 */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.callout-quote {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 26px;
}
.callout-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ===== 收尾：状态 + 联系入口 =====
   在 .uni-layout 之外，所以不参与分段的压暗；宽度对齐 .uni-layout（1240px + 同一组左右内边距）。
   邮箱链接直接复用全站的 .contact-mail，不另起一套样式。 */
.uni-close {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(52px, 7.5vw, 92px) clamp(20px, 5vw, 48px) clamp(64px, 9.5vw, 112px);
  border-top: 1px solid var(--line);
}
.uni-close-title {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-bottom: 14px;
}
.uni-close-body {
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  color: var(--ink-soft);
  margin-bottom: 30px;
}

/* ===== 移动端：段落之间靠间距拉开，不再一段一屏 ===== */
@media (max-width: 900px) {
  .uni-step {
    min-height: 0;
    padding: 52px 0 8px;
    max-width: none;
  }
  .uni-step--wide { min-height: 0; }
  .uni-step--lead { min-height: 0; padding-top: 56px; }

  /* 窄屏没有三栏的余地，折回单栏，栏与栏之间留出一段间距 */
  /* 窄屏折回单栏，卡片上下排，没有"对齐同一行"这回事——撤掉 subgrid，回到普通块级 */
  .uni-step--row { grid-template-columns: 1fr; grid-template-rows: none; gap: 34px; }
  .uni-step--row .row-item { display: block; grid-row: auto; }
  .uni-copy > .uni-step:last-child { padding-bottom: 72px; }

  /* 单栏：文案在上、画面在下。窄屏没有并排的余地，
     视差也取消——屏幕就那么高，漂不出效果，只会晃。 */
  .uni-step--media {
    display: block;
    min-height: 0;
    padding: 52px 0 8px;   /* 窄屏不再给带画面的段落加码，跟其他段落同一档 */
  }
  .uni-step--media .step-copy,
  .uni-step--flip .step-copy,
  .uni-step--flip .step-media { max-width: none; grid-column: auto; grid-row: auto; }

  .step-media { margin-top: 26px; }
  .uni-card-frame { opacity: 1; transform: none; }
  .uni-media { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .uni-layout.is-live .uni-step,
  .uni-layout.is-live .uni-step--media .step-copy { opacity: 1; transition: none; }
  /* 卡片保持常亮、画面不漂移：内容一样看得到，只是不动 */
  .uni-card-frame { opacity: 1; transform: none; }
  .uni-media { transform: none; }
}