/* Hero —— 屏 1
 * 三段式首屏抄 H-2 Linear Method，关键词着色抄 H-3 Stripe / H-6 Modal，
 * 三问抄 H-4 Vercel 的右列三行 + X-2 的链接行，右侧物件抄 H-1 Palantir + C-1。
 * 结构上的取舍写在 build/render-hero.js 顶部。
 *
 * 版面：一个两栏栅格。左栏上半是文字块、下半是三问；右栏是那叠板，跨两行。
 * 上一版的图是绝对定位钉在右边 30% 宽、0.7 透明度，老板的评价是「左边重右边轻」。
 * 现在右栏 45% 整幅给图，图全不透明，是一个真正的物件。
 */

.hero {
  position: relative;
  min-height: min(calc(100vh - 62px), 880px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 0 40px;
  overflow: hidden;
}

/* ── 栅格 ──────────────────────────────────────────────── */
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 24px;
  min-height: calc(min(100vh - 62px, 880px) - 84px);
}
.hero__lead { grid-area: 1 / 1; align-self: start; padding-right: 16px; }
.asks { grid-area: 2 / 1; align-self: end; }
.hero__figure { grid-area: 1 / 2 / 3 / 3; }

/* ── 主张：三行短句 ──────────────────────────────────────
 * 定位句「在电商业务里做 FDE 的一套工作方式」折进上面那行 eyebrow 的右半段（base.css 的 .eyebrow span），
 * 不再独占一行——上一版它是 18px 带橙色左线的一行，和大标题抢戏。
 * 每行不超过 9 个汉字，54px 的字一行 486px，左栏 600px 放得下。
 * 行高 1.26：三行紧一点才像一块标题，不像三段话。断行是写死的三个 span，不靠自动换行。 */
.hero__claim {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-size: clamp(30px, 3.8vw, 54px);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.hero__line { display: block; white-space: nowrap; }
.hero__claim em { font-style: normal; color: var(--accent); }

/* 副句：交代方法论定位与最终产物，和定位句同一档字号 */
.hero__sub {
  margin-top: 24px;
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 28em;
}
.hero__sub-key { white-space: nowrap; }

/* ── 右侧物件：C1—C4 四块板 ───────────────────────────────
 * 宽度跟着视口高度走：图的高宽比是 650:470，矮屏（768 高的笔记本）上不能把图裁掉一截，
 * 所以宽度封顶在 (可用高度 − 图注) × 0.72。900 高 → 500px，768 高 → 约 410px。 */
.hero__figure {
  position: relative;
  margin: 0;
  justify-self: end;
  align-self: start;
  width: 100%;
  max-width: min(500px, calc((100vh - 62px - 150px) * 0.72));
}
.hero__figure .iso { width: 100%; height: auto; overflow: visible; }

/* 三问里指向 C 屏的两行（01 / 03）悬停时，物件四块板一起抬 3px、编号点橙——
 * 「你懂不懂我的生意」和右边那叠板是同一件事。motion.js 负责加 is-peek。 */
.iso--hero.is-peek .iso-slab__in { transform: translateY(-3px); }
.iso--hero.is-peek .iso-tag__id { fill: var(--accent); }
.iso--hero.is-peek .iso-tag__en { fill: var(--ink); }

/* 图注：匿名化说明在左，「向下」在右，同一条横线上 */
.hero__cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  margin-top: 6px; padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.hero__progress { font-size: var(--fs-small); color: var(--ink-3); min-width: 0; }

/* Hero 的板是链接：hover 抬起 + 影子拉长 + 编号变橙，按下 90ms 跟手。
 * 不做「其它三块变灰」——Hero 不是选择器，压灰会让物件看起来坏了。 */
.iso--hero .iso-slab { cursor: pointer; outline: none; }
.iso--hero .iso-slab__in { transition: transform 220ms var(--ease-out); }
@media (hover: hover) {
  .iso--hero .iso-slab:hover .iso-slab__in { transform: translate(-6px, -4px); }
  .iso--hero .iso-slab:hover .iso-face--top { fill: var(--panel); }
  .iso--hero .iso-slab:hover .iso-face { stroke: var(--line-3); }
  .iso--hero .iso-slab:hover .iso-tag__id { fill: var(--accent); }
  .iso--hero .iso-slab:hover .iso-tag__en { fill: var(--ink); }
}
.iso--hero .iso-slab:active .iso-slab__in { transform: translate(-5px, -2px); transition-duration: var(--t-press); }
.iso--hero .iso-slab:focus-visible .iso-face--top { stroke: var(--accent); stroke-width: 2; }
/* 板外的中文层名：Hero 里默认藏着，悬停 / 落焦 / 三问联动时才出现——板上只有拉丁字，老板得知道点的是哪一层 */
.iso--hero .iso-note { opacity: 0; pointer-events: none; transition: opacity 180ms var(--ease); }
.iso--hero .iso-slab:hover .iso-note,
.iso--hero .iso-slab:focus-visible .iso-note,
.iso--hero.is-peek .iso-note { opacity: 1; }
.iso--hero .iso-note__t { fill: var(--ink); }
.iso--hero .iso-note__d { fill: var(--accent); }

/* ── 三问：三行列表 ─────────────────────────────────────────
 * 一行 = 序号 / 问句 / 答案 / →。整行可点：hover 浮白底、箭头右移 4px 变橙，按下沉 1px。 */
.asks { border-top: 1px solid var(--line-2); }
.ask__hit {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 18px;
  column-gap: 12px;
  align-items: baseline;
  min-height: 50px;
  padding: 13px 14px;
  margin: 0 -14px;
  border-radius: 3px;
  position: relative;
  transition: background var(--t-swap) var(--ease), transform var(--t-press) var(--ease);
}
/* 行线画在伪元素上，不受 -14px 出血影响，和上面那条 border-top 同宽 */
.ask__hit::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px;
  background: var(--line);
  transition: background var(--t-swap) var(--ease);
}
.ask:last-child .ask__hit::after { display: none; }
@media (hover: hover) {
  .ask__hit:hover { background: var(--panel); }
  .ask__hit:hover::after { background: var(--line-3); }
}
.ask__hit:active { transform: translateY(1px); }

.ask__n {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.ask__q { font-size: 16.5px; color: var(--ink); }
.ask__k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color var(--t-swap) var(--ease);
}
.ask__a {
  font-style: normal; font-size: 15px; color: var(--ink-3); justify-self: end;
  transition: transform var(--t-swap) var(--ease-out), color var(--t-swap) var(--ease);
}
.ask__hit:hover .ask__k, .ask__hit:focus-visible .ask__k { color: var(--ink-2); }
.ask__hit:hover .ask__a, .ask__hit:focus-visible .ask__a { color: var(--accent); transform: translateX(4px); }

/* ── 滚动提示 ─────────────────────────────────────────────── */
.hero__cue-hit { position: relative; display: inline-block; flex: 0 0 auto; min-width: 44px; padding-right: 10px; }
.hero__cue-t {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--t-swap) var(--ease);
}
.hero__cue-hit:hover .hero__cue-t,
.hero__cue-hit:focus-visible .hero__cue-t { color: var(--ink-2); }
/* 一条 24px 的渐隐竖线，里面有一小段强调色反复往下走。
 * 幅度很小、周期 2.6s——门面页不做跳动的箭头，只要一个「下面还有」的暗示。 */
.hero__cue-l {
  position: absolute;
  left: calc(100% - 1px);
  top: calc(50% - 12px);
  width: 1px;
  height: 24px;
  overflow: hidden;
  background: linear-gradient(var(--line-3), transparent);
}
.hero__cue-l::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 9px;
  background: var(--accent);
  animation: cue-run 2.6s var(--ease) infinite;
}
@keyframes cue-run {
  0%   { transform: translateY(-10px); opacity: 0; }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(24px); opacity: 0; }
}

@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero__claim { font-size: clamp(28px, 4.2vw, 46px); }
}

@media (max-width: 900px) {
  .hero { min-height: auto; padding: 36px 0 32px; }
  /* 手机上一栏：文字 → 图 → 三问 */
  .hero__grid { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; row-gap: 28px; }
  .hero__lead, .hero__figure, .asks { grid-area: auto; }
  .hero__lead { padding-right: 0; }
  .hero__line { white-space: normal; }
  .hero__figure { justify-self: start; max-width: 440px; }
  .hero__claim { margin-top: 20px; }
  .ask__hit { padding: 12px 12px; margin: 0 -12px; }
  .ask__hit::after { left: 12px; right: 12px; }
  .ask__q { font-size: 15.5px; }
}