/* ==========================================================================
   project-era-align.css
   仅供 sites/arch/project.html 使用（挂载点：<body class="arch-page era-align">）。
   作用：把项目案例展示页的滚动条 / 横向推进节 / 标签排版对齐参考站 era-residence.com。
   ⚠️ 本文件不修改任何共享资产（arch-drag-scroll-*.css / *.js 原封不动）。
      所有规则都收在 .era-align 作用域内，index.html 不受影响。
   所有数值均来自 era-residence.com 运行时实测，来源标在每条注释里。
   ========================================================================== */

/* --- 实测常量 ------------------------------------------------------------
   参考站 1512×900 实测：
     .s-bar-w   fixed  left 45px  （包裹层 129×462）
     .s-bar_track  1px × 272px   rgba(255,255,255,.2)
     .s-bar_thumb  45.4 × 45.4   圆形，内含 .l1 两位数百分比
     .l1 标签      font-size 10.395px  letter-spacing 0.499px  700  uppercase
     轨道垂直居中： (900-272)/2 = 314px ✓ 实测 top=314
     滑块中心行程： 轨道顶 314 → 轨道底 586（实测 y=0→thumbTop 291，y=18735→500）
     ≤767px：.s-bar-w display:none （390×844 实测）
   ------------------------------------------------------------------------ */
.era-align {
  --ea-sb-left: 45px;      /* 实测 .s-bar-w left */
  --ea-sb-track-h: 272px;  /* 实测 .s-bar_track height */
  --ea-sb-thumb: 45px;     /* 实测 .s-bar_thumb 45.4 → 取 45 */
  --ea-label-size: 10.4px; /* 实测 .l1 font-size 10.395px */
  --ea-label-ls: 0.048em;  /* 实测 0.499px / 10.395px = 0.048em */
  --ea-ease-in-out: cubic-bezier(0.76, 0, 0.24, 1); /* 实测 --ease-in-out */
  --ea-ease-out: cubic-bezier(0.25, 1, 0.5, 1);     /* 实测 --ease-out */
  --ea-dur-m: 0.8s;                                  /* 实测 --dur-m */
  --ea-gap: 16px;          /* 实测 --_special-units---grid-gap */
  --ea-offset: 48px;       /* 实测 --_special-units---offset-l/r */
}

/* ========================================================================
   1 · 自定义滚动条：停用站内旧版（右侧 8px 长条），改用参考站形制
       旧版 .era/.mtt/.eun 定义在共享 CSS 里，这里只在本页隐藏，不改共享文件。
   ======================================================================== */
.era-align .era { display: none !important; }

.ea-sb {
  position: fixed;
  left: var(--ea-sb-left);
  top: 50%;
  transform: translateY(-50%);
  height: var(--ea-sb-track-h);
  width: var(--ea-sb-thumb);
  z-index: 9997;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  color: var(--paper, #fff);
  mix-blend-mode: difference; /* 沿用本站做法：深浅底都可读（参考站改用分节主题色，见总结） */
}
/* 实测参考站：.s-bar-w pointer-events:none，内层 .s-bar/.s-bar_thumb 为 auto，
   且滑块可拖动（拖一下 y 从 1600 跳到 17660）。这里对齐：只有滑块可点，
   外框不拦内容点击。data-nodrag 是共享 scrolldrag 的出口选择器，防止拖动被它抢走。 */
.ea-sb-thumb { pointer-events: auto; cursor: grab; touch-action: none; }
.ea-sb.is-drag .ea-sb-thumb { cursor: grabbing; }

/* 1px 发丝轨道，垂直居中 —— 实测 .s-bar_track 1×272 */
.ea-sb-track,
.ea-sb-fill {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}
.ea-sb-track { background: currentColor; opacity: .2; }  /* 实测 rgba(255,255,255,.2) */
.ea-sb-fill  { background: currentColor; transform-origin: 50% 0; transform: translateX(-50%) scaleY(0); }

/* 45px 圆形滑块，中心沿轨道行走 —— 实测 45.4×45.4 */
.ea-sb-thumb {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--ea-sb-thumb);
  height: var(--ea-sb-thumb);
  margin-left: calc(var(--ea-sb-thumb) / -2);
  margin-top: calc(var(--ea-sb-thumb) / -2);
  border-radius: 50%;
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
/* 两位数百分比 —— 实测 .l1 10.395px / ls .499px / 700 / uppercase */
.ea-sb-pct {
  font-size: var(--ea-label-size);
  letter-spacing: var(--ea-label-ls);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: currentColor;
}

/* 390×844 实测参考站 .s-bar-w display:none —— 窄屏隐藏，行为对齐 */
@media (max-width: 767.98px) {
  .ea-sb { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ea-sb-thumb, .ea-sb-fill { transition: none !important; }
}

/* ========================================================================
   2 · 横向推进节（参考站签名交互）
       实测 .loc-scroll-area：
         screen  position:sticky  1467×900
         track   width 4695  → 4695/1467 = 3.20 倍视口宽
         section height 4740，减去 900 的 sticky 屏 = 3840 滚动距离
         横向行程 4695-1467 = 3228 → 行程/滚动距离 = 0.84
       390×844 实测：screen position 变 static，track width 345（=视口），整节改为纵向堆叠
   ======================================================================== */
.ea-hs {
  position: relative;
  /* --ea-travel 由 JS 按实际轨道宽度写入一次（load / resize），静止时不再写 */
  height: calc(100vh + var(--ea-travel, 220vh) / 0.84); /* 0.84 = 实测行程/滚动距离比 */
}
.ea-hs-screen {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ea-hs-track {
  display: flex;
  align-items: stretch;
  gap: var(--ea-gap);
  padding-inline: var(--ea-offset);
  width: max-content;
  will-change: transform;
}
.ea-hs-panel {
  flex: 0 0 auto;
  width: min(44vw, 660px); /* 7 面板 × 660 + 6×16 间隙 + 2×48 内边距 = 4812 ≈ 3.18 倍视口宽，对齐实测 3.20 */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ea-hs-panel .ea-hs-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #d6d4ce;
}
.ea-hs-panel .ea-hs-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 节内标签排版 —— 实测参考站 .l1：700 / uppercase / +0.048em */
.ea-hs-idx,
.era-align [data-ea-label] {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ea-label-ls);
  font-size: var(--ea-label-size);
  opacity: .6;
}
.ea-hs-panel h3 { margin: 0; }
.ea-hs-panel p  { margin: 0; opacity: .7; }

/* 节首大字：与参考站一致，作为轨道里的第一屏一起横向推进（不是固定浮层）
   字号上限 181px = 实测参考站同位大字 181.44px @1512 */
.ea-hs-head {
  flex: 0 0 auto;
  align-self: center;
  padding-right: calc(var(--ea-offset) * 2);
  white-space: nowrap;
}
.ea-hs-head .ea-hs-title {
  margin: 0;
  font-size: clamp(48px, 12vw, 181px);
  line-height: .87;                    /* 实测 --h1--line-height 87.5% */
  letter-spacing: -0.024em;            /* 实测 --h1--letter-spacing */
}
.ea-hs-panel { justify-content: center; }

/* 窄屏：对齐参考站 390 行为 —— 取消钉住，改纵向堆叠 */
@media (max-width: 767.98px) {
  .ea-hs { height: auto; }
  .ea-hs-screen { position: static; height: auto; overflow: visible; display: block; }
  .ea-hs-track {
    flex-direction: column;
    width: 100%;
    transform: none !important;
    padding-inline: 0;
    gap: 32px;
  }
  .ea-hs-panel { width: 100%; }
  .ea-hs-head { padding: 0 0 24px; white-space: normal; }
}

/* ========================================================================
   3 · 占位内容的可见标记
       约定：凡是待替换的真实数据，外层带 data-ph="<字段名>"，视觉上加虚线下划线，
       将来批量替换时用 document.querySelectorAll('[data-ph]') 即可全量定位。
   ======================================================================== */
.era-align [data-ph] {
  text-decoration: underline dotted currentColor 1px;
  text-underline-offset: 3px;
}

/* ========================================================================
   4 · 修 bug：窄屏横向缩略图轨被压扁，拖拽永远不触发
       共享 CSS（arch-drag-scroll-cwLtVsBC.css）在 ≤767px 给 .gal-t 写了
       flex:none / max-width:70rem，但 .gal-l 的直接 flex 子元素是 JS 生成的 <li>，
       不是 .gal-t。<li> 仍是 flex:0 1 auto，8 个一起收缩到 35.8px，
       于是 scrollWidth 永远等于 clientWidth，f() 里的
       `scrollWidth-clientWidth>2` 判定拿不到 'x'，拖拽轨静默。
       390×844 实测：li 35.8px / 缩略图 img 仅 11px 宽 / scrollW=clientW=359。
       这里只在本页把 flex 基准还原到设计值 70rem（=72.8px @390，与 .gal-t 的
       max-width 实测值一致），不改共享文件。
       ⚠️ 根因在共享 CSS，建议之后在那边把选择器改成 .gal-l>li —— 需先跟你确认。
   ======================================================================== */
@media (max-width: 767.98px) {
  .era-align .gal-l > li { flex: 0 0 70rem; max-width: none; }
  .era-align .gal-l > li > .gal-t { width: 100%; max-width: none; }
}

/* ========================================================================
   5 · 【严重】触摸设备整页无法滚动 —— 局部修复
   ------------------------------------------------------------------------
   根因（在共享 assets/arch-drag-scroll-AqD7hNpj.js 的 Lenis 工厂 oe() 里）：
       s = () => !( !o || B.motionOff || (!n.enableOnTouch && B.coarsePointer) || re() )
       function u(e,t){ if(!s()){ a.isStopped || a.stop(); return; } ... }
   默认配置 ie = {lambda:8, multiplier:1, enableOnTouch:false}，
   所以任何 (pointer: coarse) 设备上 s() 恒为 false，每帧 RAF 都把 Lenis stop 掉。
   而 Lenis 自带的 lenis-fOJvfYOR.css 里有：
       .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip }
   于是 <html> 被 clip，原生触摸滚动也一起死掉 —— 整页在手机上完全滑不动。

   原意显然是「触摸设备不跑平滑滚动，交还给原生滚动」，
   但实现用了 stop() 而不是 destroy()／不摘 .lenis 类，才误伤了原生滚动。

   实测证据（390×844，Playwright 触摸模拟，CDP 真实 touch 事件）：
     - touchstart / touchmove 的 defaultPrevented 全为 false —— 不是 scrolldrag 吃掉的
       （且 Jn() 与 Vn() 本来就已经 `matchMedia('(pointer: coarse)').matches` 直接 return null）
     - data-im-modal 不存在、body 无内联 overflow、无 dialog[open] —— re() 不成立
     - lenis.isStopped = true，html 计算 overflow = clip
     - 手工调用 lenis.start() → overflow 立刻变回 visible（确认就是这条链）
     - 同一视口改用桌面 UA（pointer:fine）→ 不 stopped、overflow visible、可正常滚动
   参考站 era-residence.com 在 390 触摸下的行为：原生滚动、无平滑，html overflow 为 visible。
   本修复即对齐该行为。

   修法：只在 coarse 指针下，把「非人为锁定」时的 clip 解除，交还原生滚动。
   :not([data-im-modal]) 是为了保留开场门帘/弹窗那类**有意**的滚动锁定
   （arch-portal 会在 <html> 上加 data-im-modal，结束时移除）。
   ⚠️ 这是本页作用域的临时修复。根因在共享包，影响面见下：
      实测 tech / industrial / graphic / arch 四个站的 index 在 390 触摸下
      全部 yAfter3Swipes=0、htmlOvf=clip、lenis-stopped=true，即 13 个页面同病。
      是否推到全站，等 owner 拍板。
   ======================================================================== */
@media (pointer: coarse) {
  html.lenis.lenis-stopped:not([data-im-modal]) {
    overflow: visible !important;
  }
}