/* ═══════════════════════════════════════════════════════════════════
   迭代 17 · 区块节奏（老叶队列 ⑥）
   ───────────────────────────────────────────────────────────────────
   量出来的问题：全页 7 个区块用的是同一个头型 —— 左边标题、右边一段
   说明的两栏头。滚下去同一个形状看七遍，从中段开始就分不出轻重，
   这就是「节奏太平」的实体。

   不是随机换花样，是**按内容角色定头型**，让起伏跟含义绑在一起：

     A 边界 · 劝退（04 值不值得做 / 06 怎么挑供应商 / 10 我们不接什么）
       这三处是全站唯一主动往外推的内容，是让人「停一下」的时刻。
       → 居中、收窄、上下留更大的白，头顶一道短金线。视觉上安静下来。

     B 证据 · 展示（02b 它们长什么样 / 05 交付到哪一步）
       外向的、要摊开给人看的。→ 保留原来的两栏头，不动。

     C 方法 · 路径（07 你这行怎么做 / 08 我们怎么干）
       是章节开篇的性质。→ 标题独占一行放大，说明移到标题下方，
       像翻开新的一章。

   于是纵向读下来是「摊开 → 收窄 → 摊开 → 开新章」的起伏，
   而不是七个一样的抬头。

   只动区块的**头部**，各区块自己的内容版面（红旗竖排、状态牌、
   行业网格、六阶流程）一个都不碰。
   ═══════════════════════════════════════════════════════════════════ */

/* ── A · 边界劝退三处：居中、收窄、安静 ───────────────────────────── */
html body section[aria-labelledby="s-crit"] .qds-section-head,
html body section[aria-labelledby="s-ruler"] .qds-section-head,
html body section[aria-labelledby="s-stop"] .qds-section-head{
  display:block!important;
  /* 容器要装得下标题本身；说明段自己另有更窄的行宽，仍然是收窄的观感 */
  max-width:min(920px,92vw);
  margin-inline:auto!important;
  margin-bottom:clamp(38px,4.4vw,64px)!important;
  padding-top:clamp(30px,3.4vw,50px);
  text-align:center;
  position:relative}
/* 头顶那道短金线：像一个引号，把这三段括起来 */
html body section[aria-labelledby="s-crit"] .qds-section-head::before,
html body section[aria-labelledby="s-ruler"] .qds-section-head::before,
html body section[aria-labelledby="s-stop"] .qds-section-head::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:56px;height:1px;
  background:linear-gradient(90deg,
    transparent 0%, var(--xh-gold) 50%, transparent 100%)}
html body section[aria-labelledby="s-crit"] .qds-section-head .eyebrow,
html body section[aria-labelledby="s-ruler"] .qds-section-head .eyebrow,
html body section[aria-labelledby="s-stop"] .qds-section-head .eyebrow{
  justify-content:center;
  margin-bottom:clamp(14px,1.6vw,22px)!important}
html body section[aria-labelledby="s-crit"] .qds-section-head h2,
html body section[aria-labelledby="s-ruler"] .qds-section-head h2,
html body section[aria-labelledby="s-stop"] .qds-section-head h2{
  margin:0 auto clamp(16px,1.8vw,26px)!important;
  font-size:clamp(27px,3.4vw,46px)!important;
  line-height:1.3!important;
  /* 标题要比它下面那段说明宽：60ch 的容器装不下 46px 的 17 个字，
     balance 会把两行强行拉等长，断点就落进了「我们」中间。
     给标题自己的宽度，并把 balance 换成 pretty（只防孤字，不拉等长），
     这三句就各自落在一行；真到窄屏要折行时，auto-phrase 也有余地
     在逗号那个自然停顿处断。 */
  max-width:19em;
  text-wrap:pretty;word-break:auto-phrase!important}
html body section[aria-labelledby="s-crit"] .qds-section-head p,
html body section[aria-labelledby="s-ruler"] .qds-section-head p,
html body section[aria-labelledby="s-stop"] .qds-section-head p{
  margin:0 auto!important;max-width:52ch;
  font-size:clamp(14px,1.15vw,16px)!important;
  line-height:1.9!important;
  color:var(--xh-fg2)!important;
  text-wrap:pretty;word-break:auto-phrase}
/* 这三段上下要更透气，才像「停一下」 */
html body section[aria-labelledby="s-crit"],
html body section[aria-labelledby="s-ruler"],
html body section[aria-labelledby="s-stop"]{
  padding-top:clamp(52px,6vw,96px)!important;
  padding-bottom:clamp(52px,6vw,96px)!important}

/* ── C · 方法路径两处：标题独占一行，像翻开新一章 ─────────────────── */
html body section[aria-labelledby="s-ind"] .qds-section-head,
html body section[aria-labelledby="s-method"] .qds-section-head{
  display:block!important;
  margin-bottom:clamp(36px,4vw,58px)!important}
html body section[aria-labelledby="s-ind"] .qds-section-head > div,
html body section[aria-labelledby="s-method"] .qds-section-head > div{
  max-width:none}
html body section[aria-labelledby="s-ind"] .qds-section-head h2,
html body section[aria-labelledby="s-method"] .qds-section-head h2{
  margin:0 0 clamp(20px,2.2vw,32px)!important;
  font-size:clamp(30px,4.4vw,60px)!important;
  line-height:1.2!important;
  /* 同上：ch 在中文里只有半个字宽，用 em 才是「几个字」。
     16em 让第一句在逗号处断开，不会把「15 个行业」劈成两半。 */
  max-width:16em;
  text-wrap:pretty;word-break:auto-phrase!important}
/* 说明落到标题下方，靠左，并让它明显退后一档 */
html body section[aria-labelledby="s-ind"] .qds-section-head p,
html body section[aria-labelledby="s-method"] .qds-section-head p{
  margin:0!important;max-width:56ch;
  padding-inline-start:clamp(14px,1.6vw,22px);
  border-inline-start:1px solid var(--xh-hair);
  font-size:clamp(14px,1.15vw,16px)!important;
  line-height:1.9!important;
  color:var(--xh-fg2)!important;
  text-wrap:pretty;word-break:auto-phrase}

/* ── 区块之间的过渡：不是加线，是让呼吸有长短 ─────────────────────
   原来每个区块上下留白都一样，读起来像等距的栅栏。让「摊开」型的
   区块贴得紧一点，「收窄」型的前后拉开，纵向就有了呼吸。 */
html body section[aria-labelledby="s-cases"],
html body section[aria-labelledby="s-shots"]{
  padding-bottom:clamp(34px,4vw,62px)!important}

/* 头顶那道短金线也做进场：滚到它才画出来。不支持的浏览器直接是完整的一道。 */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes qrhRule{
      from{width:0;opacity:0}
      to  {width:56px;opacity:1}
    }
    html body section[aria-labelledby="s-crit"] .qds-section-head::before,
    html body section[aria-labelledby="s-ruler"] .qds-section-head::before,
    html body section[aria-labelledby="s-stop"] .qds-section-head::before{
      animation:qrhRule .01s linear both;
      animation-timeline:view();
      animation-range:entry 4% entry 80%}
  }
}

/* ── 窄屏：居中头保持居中，章节头把竖线换成上边线 ─────────────────── */
@media (max-width:760px){
  html body section[aria-labelledby="s-crit"] .qds-section-head,
  html body section[aria-labelledby="s-ruler"] .qds-section-head,
  html body section[aria-labelledby="s-stop"] .qds-section-head{
    max-width:none;padding-top:clamp(24px,6vw,34px)}
  html body section[aria-labelledby="s-ind"] .qds-section-head h2,
  html body section[aria-labelledby="s-method"] .qds-section-head h2{
    max-width:none}
  html body section[aria-labelledby="s-ind"] .qds-section-head p,
  html body section[aria-labelledby="s-method"] .qds-section-head p{
    padding-inline-start:0;
    border-inline-start:0;
    padding-top:14px;
    border-top:1px solid var(--xh-hair)}
}


/* 数字 + 量词不许拆开 —— auto-phrase 认中文词边界，但不认「15」接「个」，
   所以靠宽度调是调不干净的，换个视口它又会断在那儿。 */
html body .qnb{white-space:nowrap}


/* 2026-08-26 实测：s-crit 的金线会画出来，s-ruler 和 s-stop 的一开始就是满的。
   同一份 CSS，差别在祖先链 —— 这两个区块带 .qds-section--dark 的
   `overflow:hidden`，那会把区块变成**滚动容器**，于是 view() 以它为参照，
   头部在它内部永远「完全可见」，动画直接被判为跑完。
   `overflow:clip` 同样裁剪，但**不产生滚动容器**，view() 就回到文档层面。
   只对这三处生效，别处不动。 */
html body section[aria-labelledby="s-crit"],
html body section[aria-labelledby="s-ruler"],
html body section[aria-labelledby="s-stop"]{overflow:clip!important}


/* 现场带那句「鼠标停在任意一张上」在手机上是句废话 —— 手机没有鼠标。
   句子本身在桌面是对的，所以按输入方式收起，而不是删掉：
   真正要紧的那半句「均为项目现场与活动实拍，未做任何处理」在哪都留着。 */
@media (hover:none),(pointer:coarse){
  html body .qhoveronly{display:none}
}