/* ============================================================================
   assets/pages-worker-8.css — ems-pdu / IDCPDU · blog 包（worker-8）
   覆盖五页：/blog/ · /blog/one-percent-metering-accuracy/ ·
             /blog/snmp-vs-modbus/ · /blog/c13-vs-c19-socket-selection/ ·
             /blog/three-phase-pdu-load-balancing/

   规则（任务书 §3.7）：**本文件所有选择器都带 .w8- 前缀**；对 site.css 既有类
   （.h1 / .h2 / .rail / .lead / .eyebrow / .speclist / .is-light …）的覆盖一律写成
   `.w8-hero .h1` 这种**作用域收窄**形式 —— 既提高特异性，也不与 site.css 产生
   「同名字符串重复定义」（check-css-conflicts.py 的 FAIL 判据）。

   ⛔ CSP：style-src 'self'。本文件无 @import、无第三方 URL、无 data-URI。
   ⛔ aspect-ratio 白名单：只用 1/1（b2/b3/b4/b5 实体文件 1024x1024）。
        hero 影像 1536x1024 (3/2) 是**绝对定位铺底**，铺满是 object-fit:cover 的职责。
   ⛔ 大图收口（任务书铁律）：每张内容图的渲染盒都带
        `max-height: min(100svh, <上限>)`；hero 铺底图另加 `100svh` 上限，
        两条断点（1440x900 / 390x844）下盒高都不超过视口高的 101%。
   &#9940; 图文同高（用户铁律 1）：.w8-split / .w8-index / .w8-close 的网格项
        align-self:stretch，图框 height:100% + 图片 absolute cover 铺满列高，
        不出现「图比字矮」。
   &#9940; 间距与居中（硬约束 50）：section 间距由 site.css `.sec` 的
        `--s-section`(80px) 给，本文件所有内容块自带 12px 以上的内边距 —— 竖线/横线
        两侧的净距都不小于 8px（check-layout-edges.js 判据 ②③④）。
   ========================================================================= */

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

/* 网格子项 min-width:0 —— 列里有 mono 长串（0.1 kWh / 10/100M）时该列才肯收缩，
   否则 390px 下横向溢出。 */
.w8-hero__grid > *,
.w8-band > *,
.w8-split > *,
.w8-index > *,
.w8-close > * { min-width: 0; }

/* ============================ 1 · 图标 ==================================
   /assets/icons/*.svg 以 <img> 落地：SVG 内的 stroke="currentColor" 在
   <img> 语境里解析成黑色，所以颜色只能靠 filter 压 —— 与全站图标同一套手法。 */
.w8-ico { display: block; width: 24px; height: 24px; flex: 0 0 auto; }
.w8-ico--sm { width: 18px; height: 18px; }
.w8-ico--brand { filter: invert(45%) sepia(72%) saturate(2436%) hue-rotate(348deg) brightness(93%) contrast(92%); }
.w8-ico--steel { filter: invert(58%) sepia(7%) saturate(316%) hue-rotate(155deg) brightness(94%) contrast(88%); }
.w8-ico--head { margin-bottom: var(--s-sm); }
.is-light .w8-ico--brand { filter: invert(38%) sepia(58%) saturate(2400%) hue-rotate(348deg) brightness(88%) contrast(95%); }
.is-light .w8-ico--steel { filter: invert(22%) sepia(8%) saturate(220%) hue-rotate(155deg) brightness(95%) contrast(92%); }

/* ============================ 2 · 面包屑 ================================= */
.w8-crumbs { margin: 0 0 var(--s-sm); }
.w8-crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 8px; margin: 0; padding: 0; list-style: none;
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-4);
}
/* 触控目标 >=44px：面包屑链接整行可点，不是 12px 高的细字 */
.w8-crumbs a {
  display: inline-flex; align-items: center; min-height: var(--s-touch);
  color: var(--fg-4); transition: var(--transition-ctl);
}
.w8-crumbs a:hover { color: var(--brand-ink); }
.w8-crumbs .w8-sep { color: var(--rule-strong); }
.w8-crumbs [aria-current="page"] { color: var(--fg-1); }

/* ============================ 3 · hero（全幅影像 + 遮罩）=================
   版式按每页 image-strategy.json 的 layout 字段：
     text-left-media-right  —— 文案列在左，主体右偏（object-position 72%）
     text-right-media-left  —— 文案列在右（.is-flip），主体左偏（28%）
   铺底影像 1536x1024；盒高两条收口：width:100%（比例给高）+ max-height。 */
.w8-hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: var(--hero-min); overflow: hidden;
  background-color: var(--ink-void);
  border-bottom: 1px solid var(--rule);
  padding-top: 80px;
}
.w8-hero__bg { position: absolute; inset: 0; overflow: hidden; }
.w8-hero__bg img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  max-height: min(100svh, 860px);
  object-fit: cover; object-position: 72% 46%;
  filter: saturate(.5) brightness(.62) contrast(1.06);
}
.w8-hero.is-flip .w8-hero__bg img { object-position: 28% 46%; }
.w8-hero__scrim {
  position: absolute; inset: 0;
  background-image: var(--scrim-h), var(--scrim-v);
}
.w8-hero.is-flip .w8-hero__scrim {
  background-image:
    linear-gradient(270deg,
      rgba(var(--scrim-base), .95) 0%,
      rgba(var(--scrim-base), .86) 34%,
      rgba(var(--scrim-base), .32) 62%,
      rgba(var(--scrim-base), .62) 100%),
    var(--scrim-v);
}
.w8-hero__lightbar {
  position: absolute; top: 0; left: 0;
  width: var(--lightbar-w); height: var(--lightbar-h);
  background-image: var(--grad-brand); z-index: 2;
}
.w8-hero__inner { position: relative; z-index: 3; width: 100%; padding-block: var(--s-xl); }
.w8-hero__grid {
  display: grid; grid-template-columns: var(--split);
  gap: var(--gap-split); align-items: end;
}
.w8-hero.is-flip .w8-hero__grid { grid-template-columns: 1fr 1.55fr; }
.w8-hero.is-flip .w8-hero__copy { order: 2; }
.w8-hero__copy > * + * { margin-top: var(--s-md); }
.w8-hero .h1 { max-width: 19ch; text-shadow: var(--text-shadow-hero); }
.w8-hero .lead { color: #C3CACD; text-shadow: var(--text-shadow-data); }
.w8-hero .eyebrow { display: block; text-shadow: var(--text-shadow-data); }
.w8-hero__copy .btn-row { margin-top: var(--s-lg); }
.w8-hero .rail { padding-top: 18px; }

@media (max-width: 900px) {
  .w8-hero__grid,
  .w8-hero.is-flip .w8-hero__grid { grid-template-columns: 1fr; gap: var(--s-lg); align-items: start; }
  .w8-hero.is-flip .w8-hero__copy { order: 0; }
}
@media (max-width: 560px) {
  .w8-hero { min-height: 0; }
  .w8-hero__inner { padding-block: var(--s-lg); }
  .w8-crumbs { margin-bottom: 0; }
}

/* ============================ 4 · 小节头 ================================= */
.w8-head { max-width: 820px; }
.w8-head .eyebrow { display: block; }
.w8-head .h2 { margin-top: var(--s-xs); }
.w8-head .lede { margin-top: var(--s-sm); }

/* ============================ 5 · 参数行（dl）============================ */
.w8-dl {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--s-lg); margin: var(--s-md) 0 0;
  padding: 0; border-top: 1px solid var(--hair-2);
}
.w8-dl.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w8-dl > div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-sm); padding: 11px 0;
  border-bottom: 1px solid var(--hair-1);
}
.w8-dl dt {
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-label);
}
.w8-dl dd {
  margin: 0; font-family: var(--f-mono); font-size: var(--fs-data);
  color: var(--fg-1); text-align: right;
}
.is-light .w8-dl { border-top-color: var(--hair-light); }
.is-light .w8-dl > div { border-bottom-color: var(--hair-light-soft); }
.is-light .w8-dl dt { color: var(--steel-cap); }
.is-light .w8-dl dd { color: var(--on-light); }
@media (max-width: 768px) {
  .w8-dl, .w8-dl.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .w8-dl, .w8-dl.is-2 { grid-template-columns: 1fr; }
}

/* ============================ 6 · spec-band（参数表 + 侧栏）=============
   0px 直角参数表（签名动作）：左列宽表、右列一格说明板。
   桌面端不出现横向滚动条 —— `min-width` 只在移动端媒体查询里出现（铁律 4）。 */
.w8-band {
  display: grid; grid-template-columns: 1.7fr 1fr;
  gap: var(--gap-spec); align-items: start;
  margin-top: var(--s-xl);
}
.w8-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.w8-tablewrap > table { width: 100%; }
.w8-side {
  border: 1px solid var(--rule); background-color: var(--surface-strong);
  padding: var(--s-md); box-shadow: var(--e-1);
}
.w8-side .label { display: block; margin-top: var(--s-sm); }
.w8-side h3 { font-size: var(--fs-h4); margin-top: var(--s-xs); }
.w8-side ul { margin: var(--s-md) 0 0; padding: 0; list-style: none; }
.w8-side li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-md); padding: 12px 0;
  border-top: 1px solid var(--hair-1);
  font-size: var(--fs-body-s); color: var(--fg-3);
}
.w8-side li b {
  font-family: var(--f-mono); font-size: var(--fs-data);
  color: var(--fg-1); font-weight: var(--w-regular);
  text-align: right; white-space: nowrap;
}
@media (max-width: 900px) {
  .w8-band { grid-template-columns: 1fr; gap: var(--s-lg); }
}
@media (max-width: 620px) {
  .w8-tablewrap > table { min-width: 560px; }
}

/* ============================ 7 · feature-split（图文同高）============= */
.w8-split {
  display: grid; grid-template-columns: 1.55fr 1fr;
  gap: var(--gap-split); align-items: stretch;
  margin-top: var(--s-xl);
}
.w8-split.is-media-left { grid-template-columns: 1fr 1.55fr; }
.w8-split.is-media-left .w8-split__media { order: 1; }
.w8-split.is-media-left .w8-split__body { order: 2; }
.w8-split__body > * + * { margin-top: var(--s-md); }
.w8-split__body .eyebrow { display: block; }
.w8-split__body .h2 { margin-top: var(--s-xs); }
/* 图框：网格项拉伸到整行高，图片 absolute cover 铺满列高 —— 图文同高 */
.w8-split__media {
  position: relative; margin: 0; overflow: hidden;
  height: 100%; min-height: 320px;
  border: 1px solid var(--rule); background-color: var(--ink-void);
}
.w8-split__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-height: min(100svh, 760px);
  object-fit: cover; object-position: 62% 50%;
  filter: saturate(.6) brightness(.84);
}
.w8-split__tag {
  position: absolute; left: var(--s-sm); bottom: var(--s-sm); z-index: 2;
  margin: 0; padding: 9px 12px;
  background-color: rgba(8, 10, 11, .88);
  border: 1px solid var(--rule-strong);
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2);
}
@media (max-width: 900px) {
  .w8-split,
  .w8-split.is-media-left { grid-template-columns: 1fr; gap: var(--s-lg); }
  .w8-split.is-media-left .w8-split__media { order: 0; }
  .w8-split.is-media-left .w8-split__body { order: 0; }
  .w8-split__media { aspect-ratio: 1 / 1; height: auto; min-height: 0; }
}

/* ============================ 8 · 读数墙（register grid）===============
   固定列数、卡片数=列数整倍数（8 格 / 4 列 = 2 行）—— 不用 auto-fit，
   窄屏 2 列、<=560px 1 列，都是整倍数，不留孤行。 */
.w8-reg {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--s-lg); margin-top: var(--s-lg);
  border-top: 1px solid var(--hair-2);
}
.w8-reg__cell { padding: var(--s-md) 0 var(--s-lg); border-bottom: 1px solid var(--hair-1); }
.w8-reg__cell .w8-ico { margin-bottom: 10px; }
.w8-reg__cell b {
  display: block; 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);
}
.w8-reg__cell strong {
  display: block; margin-top: 8px;
  font-family: var(--f-display); font-weight: var(--w-display);
  font-size: clamp(26px, 2.6vw, 40px); line-height: 1; color: var(--fg-1);
}
.w8-reg__cell span {
  display: block; margin-top: 8px; max-width: 34ch;
  font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--fg-3);
}
.is-light .w8-reg { border-top-color: var(--hair-light); }
.is-light .w8-reg__cell { border-bottom-color: var(--hair-light-soft); }
.is-light .w8-reg__cell b { color: var(--steel-cap); }
.is-light .w8-reg__cell strong { color: var(--on-light); }
.is-light .w8-reg__cell span { color: var(--steel-ink); }
@media (max-width: 900px) { .w8-reg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .w8-reg { grid-template-columns: 1fr; } }

/* ============================ 9 · 笔记名录（/blog/ 的正文列表）=========
   文书型行式名录：每行 = 编号 + 标题链接 + 一行摘要 + 主题标签 + 一个数据行。
   行内**不带图**（图只在右侧一格 figure 里），所以不存在横竖混排。 */
.w8-index {
  display: grid; grid-template-columns: 1.55fr 1fr;
  gap: var(--gap-split); align-items: stretch;
  margin-top: var(--s-xl);
}
.w8-notes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair-2); }
.w8-notes__row {
  display: grid; grid-template-columns: 78px minmax(0, 1fr);
  gap: var(--s-md); padding: var(--s-md) 0;
  border-bottom: 1px solid var(--hair-1);
}
.w8-notes__no {
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand-ink);
}
.w8-notes__row h3 { font-size: var(--fs-h4); }
.w8-notes__row h3 a { transition: var(--transition-ctl); }
.w8-notes__row h3 a:hover { color: var(--brand-ink); }
.w8-notes__row p {
  margin: var(--s-xs) 0 0; max-width: 62ch;
  font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--fg-3);
}
.w8-notes__meta {
  display: flex; flex-wrap: wrap; gap: 0 var(--s-md);
  margin: var(--s-sm) 0 0; padding: 0; list-style: none;
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: .05em; text-transform: uppercase; color: var(--fg-label);
}
.w8-notes__meta li { padding: 3px 0; }
.w8-notes__meta b { color: var(--fg-2); font-weight: var(--w-regular); }
.w8-index__media {
  position: relative; margin: 0; overflow: hidden;
  height: 100%; min-height: 320px;
  border: 1px solid var(--rule); background-color: var(--ink-void);
}
.w8-index__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-height: min(100svh, 760px);
  object-fit: cover; object-position: 60% 50%;
  filter: saturate(.6) brightness(.84);
}
@media (max-width: 900px) {
  .w8-index { grid-template-columns: 1fr; gap: var(--s-lg); }
  .w8-index__media { aspect-ratio: 1 / 1; height: auto; min-height: 0; }
}
@media (max-width: 620px) {
  .w8-notes__row { grid-template-columns: 1fr; gap: var(--s-xs); }
}

/* ============================ 10 · cta-band（页尾收口）================= */
.w8-close {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: var(--gap-split); align-items: stretch;
}
.w8-close__body > * + * { margin-top: var(--s-md); }
.w8-close__body .eyebrow { display: block; }
.w8-close__body .h2 { margin-top: var(--s-xs); }
.w8-close__body .btn-row { margin-top: var(--s-lg); }
.w8-close__media {
  position: relative; order: 2; margin: 0; overflow: hidden;
  height: 100%; min-height: 320px;
  border: 1px solid var(--rule); background-color: var(--ink-void);
}
.w8-close__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-height: min(100svh, 720px);
  object-fit: cover; object-position: 62% 50%;
  filter: saturate(.6) brightness(.84);
}
.w8-close__tag {
  position: absolute; left: var(--s-sm); bottom: var(--s-sm); z-index: 2;
  margin: 0; padding: 9px 12px;
  background-color: rgba(8, 10, 11, .88);
  border: 1px solid var(--rule-strong);
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2);
}
@media (max-width: 900px) {
  .w8-close { grid-template-columns: 1fr; gap: var(--s-lg); }
  .w8-close__media { order: 0; aspect-ratio: 1 / 1; height: auto; min-height: 0; }
}

/* 一行小注（回复承诺 / 口径声明）—— 与页脚同样只做声明 */
.w8-note {
  display: block; margin-top: var(--s-md);
  font-size: 11.5px; line-height: var(--lh-body); color: var(--fg-label);
}
.w8-note b { color: var(--fg-1); font-weight: var(--w-regular); }

/* 相关内链：两列，链接行 >=44px 可点 */
.w8-also {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-lg); margin: var(--s-xl) 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--hair-1);
}
.w8-also li { border-bottom: 1px solid var(--hair-1); }
.w8-also a {
  display: flex; align-items: center; min-height: var(--s-touch);
  font-family: var(--f-mono); font-size: var(--fs-data);
  letter-spacing: .04em; color: var(--brand-ink);
  transition: var(--transition-ctl);
}
.w8-also a:hover { color: var(--fg-1); }
@media (max-width: 620px) { .w8-also { grid-template-columns: 1fr; } }

/* ============================ 11 · 文章正文小件 ========================
   文章体裁需要「结论前置」的一段与几个可核对的短列表；
   全部保持 <=110 词的段落与列表形态，不出现整屏纯段落。 */
.w8-lede-lead {
  margin: 0 0 var(--s-lg);
  padding: var(--s-md) 0 0;
  border-top: 2px solid var(--brand);
  max-width: 74ch;
  color: var(--fg-2); font-size: var(--fs-lead); line-height: var(--lh-copy);
}
.is-light .w8-lede-lead { color: var(--ink); }
.w8-points { margin: var(--s-md) 0 0; padding: 0; list-style: none; }
.w8-points li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--s-sm); padding: 12px 0;
  border-top: 1px solid var(--hair-1);
  font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--fg-3);
}
.w8-points li b { color: var(--fg-1); font-weight: var(--w-regular); }
.is-light .w8-points li { border-top-color: var(--hair-light-soft); color: var(--steel-ink); }
.is-light .w8-points li b { color: var(--on-light); }
.w8-points .w8-ico { margin-top: 2px; }
.w8-kvline {
  display: flex; flex-wrap: wrap; gap: 0 var(--s-md);
  margin: var(--s-md) 0 0; padding: var(--s-sm) 0 0;
  border-top: 1px solid var(--hair-2);
  font-family: var(--f-mono); font-size: var(--fs-data); color: var(--fg-2);
}
.w8-kvline span { color: var(--fg-label); }
.is-light .w8-kvline { border-top-color: var(--hair-light); color: var(--steel-ink); }
.is-light .w8-kvline span { color: var(--steel-cap); }