/* ============================================================================
   whorows-r35.css —— careers#who「我们在找这样的人」结构复位(2026-09-26)

   只追加,不改既有样式表;要回退,删掉 careers.html 里这一条 <link> 即可
   (HTML 侧另有一处 DOM 位移,见文末「回退」)。
   必须排在 figart-r34.css 之后 —— 本文件三组选择器与它 §F.2 同特异度,
   靠后来居上取胜;排前面会被压掉,而且压掉时版面像"生效了一半",最难查。

   ── 改之前那一版的三处毛病(照 1440 实测) ─────────────────────────
   ① 对偶句读不成一对。表是 `auto 1px auto` 三轨,左轨按最长那条
      「看到「一直都这样做」」收到 ~320,于是前两行的左半句写完之后
      还剩 ~180px 空白才到那条轴,过了轴又隔一个 64 的沟才是右半句。
      一对句子中间隔着三段空 —— 眼睛得跳两次才能把它们接上。
   ② 收束那两句成了孤儿。它被放在表的右边、与表垂直居中(r34 §F.2),
      可它在文义上是前面三条的**总括**,不是第四条。读者顺着标题往下读,
      读到第二条时被迫横向甩到右边去读一段总括,再甩回来读第三条。
      版面把"总—分"关系画成了"并列"。
   ③ 那条 1px 竖轴在①的前提下只是把空白**居中标注**了一下:
      它证明右半边是空的,而不是把两半句系在一起。

   ── 这一版的三件事 ─────────────────────────────────────────────
   ① 总括句回到节头(HTML 侧改动):eyebrow → h2 → lead → 三条。
      这是站上 #work / #apply / about#what 已有的节头三段式,不新造东西。
   ② 一条一行:左右两个半句同行紧挨,沟 = --s-5(24px),一眼就是一对。
      三条右半句不再强行对齐成一列 —— 对齐的代价正是①里那几段空白,
      而它们本来就是三句话,不是一张需要纵向比对的表。
   ③ 竖轴撤掉;横分隔线收到 max-content,不再拖着一条画到容器右缘的尾巴。
   ========================================================================== */

/* ── §1 · 两栏:左节头(总)/ 右三条(分) ──────────────────────────────
   typo-v2.css §1 早就把 #who 的 .container 做成两栏了,第二栏原是留给
   那张 330 宽的侧图的;图撤掉之后第二栏塌成 0,r34 §F.2 改拿它放总括句
   —— 病根在这:放进右栏的是"总",而左边列着的是"分",版面把从属关系
   画反了。现在把两者换个位置:左栏节头(eyebrow/h2/总括句),右栏三条。

   顺带把 1136 用满。实测(1440):节高 695 → 442,右侧不再有 746px 空场。

   ⚠️ 给 .rows 重新定列必须带上那两个 :not() —— typo-v2.css:52 那条通栏令
   是 (1 id, 4 class),只写 `> .rows` 是 (1 id, 3 class),会被它压掉,
   而且压掉时列表只是"往上挪了一截",看着像生效了一半(我第一版就这样)。 */
@media (min-width: 1024px) {
  .page-careers #who > .container {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s-9);
    align-items: start;
  }
  .page-careers #who > .container > .section__head { grid-column: 1; grid-row: 1; }
  .page-careers #who > .container > .rows:not(.section__head):not(.figmark) {
    grid-column: 2;
    grid-row: 1;
    margin-block-start: 0;   /* §3 那条节头间距只在单栏档(<1024)才需要 */
  }
}

/* ── §2 · 三条对偶句:一条一行 ────────────────────────────────────────
   把 r32 §3.3 的 `auto 1px auto` 三轨表整个退掉。
   ⚠️ .rows--pair 的母栅格一旦不是 grid,子行上的 subgrid 就失效,
      所以 .row 必须自己声明 display:flex —— 不声明的话它退回 site.css:661
      的 `grid-template-columns:1fr`,两个半句会竖着叠成两行。 */
@media (min-width: 768px) {
  .page-careers #who .rows--pair {
    display: block;
    /* 横分隔线跟着最长那一行收边,不拖尾巴 */
    inline-size: max-content;
    max-inline-size: 100%;
    column-gap: normal;
  }

  .page-careers #who .rows--pair .row {
    display: flex;
    flex-wrap: wrap;          /* 英文档/窄容器兜底:接不下就换行,不横向溢出 */
    align-items: baseline;
    column-gap: var(--s-5);
    row-gap: var(--s-1);
    padding-block: var(--s-5);
  }

  /* 那条 1px 竖轴(r32 §3.3 的 .row::after)撤掉:两半句已经挨着了,
     中间再插一条线等于把一句话劈成两句。 */
  .page-careers #who .rows--pair .row::after { content: none; }

  /* r32 给左半句加的 18em 上限是为了在三轨表里防止英文长句挤掉右轨;
     现在同行 flex,挤不掉谁,上限解除(留着会在英文档里提前折行)。 */
  .page-careers #who .rows--pair .row__name  { max-inline-size: none; }

  /* 字号沿用 r34 §F.2 的判断(左半句 h3、右半句正文),只是不再需要
     靠 --s-9 的大沟去撑那条轴,沟收到 --s-5。 */
  .page-careers #who .rows--pair .row__state { justify-self: auto; }
}

/* ── §2.5 · 窄屏:右半句跟着记号缩进 ──────────────────────────────────
   <768 时两个半句上下叠(site.css:661 的 `grid-template-columns:1fr`)。
   左半句被 .rows--roles 的记号轨推进了 16+12,右半句是它的兄弟节点、
   没吃到那一轨 ⇒ 实测 390 档:上句文字起于 88,下句起于 32,差 56px,
   读起来像两条不同层级的东西。补上同一段缩进即可。 */
@media (max-width: 767.98px) {
  .page-careers #who .rows--roles .row__state {
    padding-inline-start: calc(var(--icon-sm) + var(--s-3));
  }
}

/* ── §3 · 节头 → 列表的间距(只对 <1024 的单栏档) ────────────────────
   总括句现在是 .section__head 的一部分,吃 pages-v1/typo-v2 给 .lead 的
   那套(34em 列宽、与 h2 左对齐)。
   r32 §5 原先订的是 `.rows + .body` 的 --s-9(那是"垫在表底下"时的节奏),
   选择器已随 DOM 位移失效,不必删,补上正确的那一条即可。
   ≥1024 档两栏并排,这条由 §1 的 margin-block-start:0 覆回去。 */
.page-careers #who .section__head + .rows {
  margin-block-start: var(--sec-head-gap);
}

/* ── 回退 ──────────────────────────────────────────────────────────
   删掉 careers.html 的 <link ... whorows-r35.css>,
   并把 #who 里那条 <p class="body lead"> 从 .section__head 内移回
   </ul> 之后(备份:careers.html.bak-who-20260926-0430)。 */
