/* ============================================================================
   assets/pages-worker-6.css — ems-pdu / IDCPDU · industries 子页包（worker-6）
   覆盖四页：/industries/data-hall/ · /industries/server-room/ ·
             /industries/colocation/ · /industries/lab-rack/

   规则（任务书 §3.7）：**本文件所有选择器都带 .w6- 前缀**。对 site.css 既有类
   （.split__body / .overlay / .overlay__media / .overlay__frame 等）的覆盖一律写成
   `.w6-xxx .split__body > * + *` 这种**作用域收窄**形式（既提高特异性、也避免跨包
   选择器冲突 —— check-css-conflicts.py 的 FAIL 判据是「选择器字符串相等」）。

   ⛔ CSP：style-src 'self'。本文件无 @import、无第三方 URL、无 data-URI。
   ⛔ 图文同高（用户铁律 1）：`.w6-split` 的网格项用 align-self:stretch，
       图片框 1:1 + object-fit:cover 铺满列高，不出现「图比字矮」。
   ⛔ aspect-ratio 白名单：只用 3/2（hero 背景图 1536x1024）与
       1/1（b2/b5/b6 实体文件 1024x1024）。不用 4/3、16/10（工具不支持）。
   ========================================================================= */

/* ============================ 0 · 页级底座 ================================ */
.w6-main { display: block; }

/* 网格子项 min-width:0 —— 内部有 nowrap 的表格/长串时该列才肯收缩，
   否则 390px 下横向溢出（worker-2 实测 +113px 的同一坑）。 */
.w6-hero__grid > *,
.w6-split > *,
.w6-overlay__grid > *,
.w6-cta__grid > * { min-width: 0; }

/* ============================ 1 · hero（全幅影像 + 遮罩版式）=============
   影像 1536x1024（3:2），绝对定位铺满整条 band —— 版式是「全幅遮罩」，
   不是「左文右图」。文字放在影像的留白侧：data-hall / colocation 用
   layout=text-left-media-right（主体右偏，object-position 74%），
   server-room / lab-rack 用 layout=text-right-media-left（主体左偏，26%），
   靠 .w6-hero--mirror 把文案列翻到右侧，DOM 顺序不变。 */
.w6-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--ink-void);
  border-bottom: 1px solid var(--rule);
  padding-top: 80px;
}
/* 顶沿 2px 橙色光条（宽 38%，向右淡出）—— 全站唯一的光源符号 */
.w6-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 38%; height: 2px;
  background-image: var(--grad-brand);
  z-index: 3;
}
/* 全出血纹理铺底：只在暗部加一点钢板颗粒，不承载信息 */
.w6-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("/generated/texture-bg.webp");
  background-size: cover;
  background-position: 50% 50%;
  opacity: .10;
  mix-blend-mode: screen;
  pointer-events: none;
}
.w6-hero__bg { position: absolute; inset: 0; z-index: 0; }
/* ⛔ 铺底影像必须**按宽度定尺寸**，不能 height:100%（跟着容器长高）。
   窄屏 390x844 下正文列把 hero 撑到 992–1244px，height:100% 会让影像盒
   渲染到视口高的 115%–129%（check-layout-edges.js「过大图」实测命中）。
   这里改用：width:100% + height:auto（盒高由 1536x1024 的比例给出）+ max-height 收口，
   超出部分由 object-fit:cover 裁切 —— 铺满是 cover 的职责，不是盒高的职责。 */
.w6-hero__bg img {
  width: 100%; height: auto;
  max-height: 92svh;
  object-fit: cover;
  object-position: 74% 48%;
  filter: saturate(.5) brightness(.58) contrast(1.06);
}
.w6-hero--mirror .w6-hero__bg img { object-position: 26% 48%; }
/* hero 影像处理变体（只改影像与遮罩权重，版式不动）：
   server-room 的简报选 workbench-spot —— 光从台面上来，比斜射光更软、更近。
     · object-position: 50% 42% + 左偏主体 to 本页用 30% 42%（主体保留在左三分） */
.w6-hero.is-workbench-spot .w6-hero__bg img {
  object-position: 30% 42%;
  filter: saturate(.44) brightness(.62) contrast(1.04);
}
.w6-hero.is-open-rack-edge .w6-hero__bg img {
  object-position: 68% 52%;
  filter: saturate(.55) brightness(.56) contrast(1.08);
}
.w6-hero.is-raking-light .w6-hero__bg img {
  object-position: 74% 48%;
  filter: saturate(.5) brightness(.58) contrast(1.06);
}
/* lab-rack 同时是 --mirror 与 is-raking-light（主体在左）：
   两个修饰符的选择器特异性相同，靠这条**复合选择器**（0,3,0）取胜，
   不与上一条比出现顺序 —— 否则主体会被推到右侧留白外侧。 */
.w6-hero--mirror.is-raking-light .w6-hero__bg img { object-position: 26% 48%; }
.w6-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background-image: var(--scrim-h), var(--scrim-v);
}
.w6-hero__inner {
  position: relative; z-index: 4;
  padding-block: var(--s-2xl) var(--s-xl);
}
.w6-hero__grid {
  display: grid;
  grid-template-columns: var(--split);
  gap: var(--gap-split);
  align-items: center;
}
.w6-hero__copy > * + * { margin-top: var(--s-md); }
.w6-hero__copy .h1 { margin-top: var(--s-md); text-shadow: var(--text-shadow-hero); }
.w6-hero__copy .lead { color: var(--text-2); text-shadow: var(--text-shadow-data); }
.w6-hero__copy .btn-row { margin-top: var(--s-lg); }
.w6-hero--mirror .w6-hero__copy { order: 2; }
.w6-hero--mirror .w6-hero__spec { order: 1; }

/* 参数栏：右下角常驻 dl —— 不是卡片、不是按钮组（设计语言 §四） */
.w6-hero__spec {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--hair-2);
}
.w6-hero__spec > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-sm);
  padding: 10px 0;
  border-bottom: 1px solid var(--hair-1);
}
.w6-hero__spec dt {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.w6-hero__spec dd {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 13.5px;
  color: var(--fg-1);
  text-align: right;
}

/* 面包屑（mono 小字，链接带下划线暗示可点） */
.w6-crumbs { margin: 0; }
.w6-crumbs a {
  color: var(--fg-label);
  border-bottom: 1px solid var(--rule-strong);
  transition: var(--transition-ctl);
}
.w6-crumbs a:hover { color: var(--brand-ink); border-bottom-color: var(--brand-ink); }
.w6-crumbs > span { padding-inline: 6px; color: var(--rule-strong); }

/* ============================ 2 · 分屏 feature-split =====================
   .w6-split 复用 site.css 的 .split 基础（1.55fr : 1fr / gap 56px），
   只加「网格项拉伸」与「图框 1:1」。左右互换复用 .split.is-image-left /
   .split.is-image-right（site.css 用 CSS order 实现，不用 direction:rtl）。 */
.w6-split { align-items: stretch; }
.w6-split > * { align-self: stretch; }
.w6-split > .w6-split__body > * + * { margin-top: var(--s-md); }
.w6-split__body .h2 { margin-top: var(--s-xs); }
.w6-split__body .btn-row { margin-top: var(--s-lg); }

/* 图框：容器 1:1 + 图片 cover 铺满 —— 与 1024x1024 实体文件比例一致，不硬裁 */
.w6-figure { margin: 0; }
.w6-frame {
  display: block;
  height: 100%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--rule);
  background-color: var(--surface);
  box-shadow: var(--e-1);
}
.w6-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(.55) brightness(.78);
}
.w6-figure figcaption {
  display: block;
  margin-top: var(--s-xs);
  padding-block: 3px;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: .05em;
  line-height: var(--lh-body);
  color: var(--fg-label);
}

/* 参数行（分屏正文里的窄参数集） */
.w6-dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-lg);
  margin: 0;
  border-top: 1px solid var(--hair-2);
}
.w6-dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-sm);
  padding: 10px 0;
  border-bottom: 1px solid var(--hair-1);
}
.w6-dl dt {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-label);
}
.w6-dl dd {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--fs-data);
  color: var(--fg-1);
  text-align: right;
}

/* 图标格见 §7 .w6-mediagrid —— 本包不另起一套图标网格类（避免同名双定义）。 */

/* 分屏里的辅助数据行（每行都带数字，不留空话位） */
.w6-facts { margin: 0; padding: 0; list-style: none; }
.w6-facts li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-md);
  padding: 9px 0;
  border-bottom: 1px solid var(--hair-1);
  font-size: var(--fs-body-s);
  color: var(--fg-3);
}
.w6-facts li b {
  font-family: var(--f-mono);
  font-size: var(--fs-data);
  color: var(--fg-1);
  font-weight: var(--w-regular);
  white-space: nowrap;
}

/* 一行小注（mono，弱化） */
.w6-note {
  display: block;
  margin-top: var(--s-sm);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: .05em;
  line-height: var(--lh-body);
  color: var(--fg-label);
}

/* ============================ 3 · 参数表 spec-band ======================
   0px 直角参数表（签名动作）+ 右侧 6 格图标列（图示 = graphic:diagram）。
   表格桌面端不滚动；窄屏用 .table-scroll 兜底（site.css §17）。 */
.w6-plate {
  display: grid;
  grid-template-columns: var(--spec);
  gap: var(--gap-spec);
  align-items: start;
}
.w6-table { width: 100%; border-collapse: collapse; margin-top: var(--s-sm); }
.w6-table caption {
  text-align: left;
  padding-bottom: 12px;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-label);
}
.w6-table th {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-label);
  text-align: left;
  font-weight: var(--w-regular);
  padding: 0 14px 9px 0;
  border-bottom: 1px solid var(--rule-strong);
}
.w6-table td {
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--fg-2);
  font-size: var(--fs-body-s);
  vertical-align: top;
}
.w6-table td:first-child { color: var(--fg-1); font-weight: var(--w-regular); }
.w6-table td.n {
  font-family: var(--f-mono);
  font-size: var(--fs-data);
  color: var(--fg-1);
  white-space: nowrap;
}
.w6-table tbody tr:hover td { background-color: rgba(255, 255, 255, .022); }
.w6-plate__side > * + * { margin-top: var(--s-lg); }

/* ============================ 4 · 读数墙 readout-wall ==================
   register-grid：6 格固定 6 列（1440）/ 3 列（1080 以下）/ 2 列（768 以下）
   —— 6 能被 6、3、2 整除，任何断点都不留孤行。 */
.w6-wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--s-lg);
  border-top: 1px solid var(--hair-2);
}
.w6-wall__cell {
  padding: var(--s-md) 18px var(--s-md) 0;
  border-bottom: 1px solid var(--hair-1);
  transition: var(--transition-ctl);
}
.w6-wall__cell:hover { transform: var(--hover-lift); }
.w6-wall__cell b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-label);
  font-weight: var(--w-regular);
}
.w6-wall__cell b img {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: invert(1) sepia(.32) saturate(3.4) hue-rotate(340deg) brightness(.92);
  opacity: .92;
}
.w6-wall__cell strong {
  display: block;
  margin-top: 8px;
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: .5px;
  line-height: 1;
  color: var(--fg-1);
}
.w6-wall__cell span {
  display: block;
  margin-top: 9px;
  font-size: var(--fs-body-s);
  line-height: var(--lh-ui);
  color: var(--fg-3);
}

/* ============================ 5 · 认证账册 cert-wall ==================
   is-ledger（表格式账册）：只写证名 + 持证主体 + 口径，**编号不落文字**。
   版式：左栏 = 3:2 横幅影像（b5）+ 1:1 影像（b6 前的过渡实拍）；右栏 = 账册。
   宽度比收成 1.28 : 1 —— 账册只有「证名 / 范围」两列，窄栏不会挤成竖排。 */
.w6-overlay__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  gap: var(--gap-split);
  align-items: start;
}
.w6-overlay__media { margin: 0; }
.w6-overlay__media .w6-frame { aspect-ratio: 1 / 1; height: auto; }
.w6-overlay__stack { display: grid; gap: var(--s-sm); }
.w6-overlay__stack .w6-frame { height: auto; aspect-ratio: 3 / 2; }

/* 账册：线性行式（不是 .w6-table —— 表格形态留给 B3 参数块，避免一页同形） */
.w6-ledger {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-strong);
}
.w6-ledger > li {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--s-sm);
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}
.w6-ledger b {
  display: block;
  font-size: var(--fs-body-s);
  line-height: 1.35;
  color: var(--fg-1);
  font-weight: var(--w-regular);
}
.w6-ledger span {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  line-height: 1.5;
  letter-spacing: .05em;
  color: var(--fg-label);
}

/* ============================ 6 · 收口段 cta-band =====================
   全幅 cta-bg 铺底（合法共享组件）+ 左文右图（b6，1:1）。同页唯一转化动作。 */
.w6-cta {
  position: relative;
  overflow: hidden;
  background-color: var(--ink-void);
  color: var(--fg-3);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-section);
}
.w6-cta__bg { position: absolute; inset: 0; z-index: 0; }
/* 同 hero：按宽度定尺寸 + max-height 收口，避免窄屏渲染盒高超过视口高 */
.w6-cta__bg img {
  width: 100%; height: auto;
  max-height: 92svh;
  object-fit: cover;
  object-position: 62% 46%;
  filter: saturate(.34) brightness(.34) contrast(1.04);
}
.w6-cta__scrim {
  position: absolute; inset: 0; z-index: 1;
  background-image: var(--scrim-h), var(--scrim-v);
}
.w6-cta__inner { position: relative; z-index: 2; }
.w6-cta__grid {
  display: grid;
  grid-template-columns: var(--split);
  gap: var(--gap-split);
  align-items: stretch;
}
.w6-cta__body > * + * { margin-top: var(--s-md); }
.w6-cta__body .btn-row { margin-top: var(--s-lg); }
.w6-cta__body .lead { color: var(--text-2); text-shadow: var(--text-shadow-data); }
.w6-cta__body .h2 { text-shadow: var(--text-shadow-hero); }

/* ============================ 7 · 图片网格（标签位铺量）===============
   每个信息型板块都要有图 / 图示 / 图表之一，标签位密度靠固定列数的多图网格铺。
   本包只用站点既有的 /assets/icons/*.svg（全站 >=80% 页面都在用的合法组件），
   **不引入任何新的内容图** —— 内容图每页唯一，跨页复用会触发 scan-reusable-images.py。 */
.w6-mediagrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-xs);
  margin-top: var(--s-sm);
}
.w6-mediagrid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 6px;
  border: 1px solid var(--rule);
  background-color: var(--surface);
  transition: var(--transition-ctl);
}
.w6-mediagrid__item:hover { border-color: var(--rule-strong); transform: var(--hover-lift); }
.w6-mediagrid__item img {
  width: 24px; height: 24px;
  object-fit: contain;
  filter: invert(1) sepia(.32) saturate(3.4) hue-rotate(340deg) brightness(.92);
  opacity: .92;
}
.w6-mediagrid__item b {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-label);
  font-weight: var(--w-regular);
  text-align: center;
}

/* ============================ 8 · 断点 ================================= */
@media (max-width: 1080px) {
  .w6-hero__grid,
  .w6-cta__grid { grid-template-columns: 1fr; }
  .w6-hero--mirror .w6-hero__copy,
  .w6-hero--mirror .w6-hero__spec { order: 0; }
  .w6-plate { grid-template-columns: 1fr; gap: var(--s-lg); }
  .w6-overlay__grid { grid-template-columns: 1fr; gap: var(--s-lg); }
  .w6-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .w6-mediagrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .w6-hero__spec > div { padding: 9px 0; }
}

@media (max-width: 768px) {
  .w6-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w6-dl { grid-template-columns: 1fr; }
  .w6-ledger > li { grid-template-columns: 1fr; gap: 4px; padding-block: 12px; }
}

@media (max-width: 560px) {
  .w6-mediagrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w6-hero__inner { padding-block: var(--s-xl) var(--s-lg); }
}