/* WuThreat 2026 栅格轨道（区块级复用层）

   规范见 docs/grid-system-2026.md：两条嵌套轨道，竖线走 --site-frame-width，
   可读内容走 --site-content-width，两者相差一个 --site-rail-inset。

   这一层只负责把仍在用 .container 的旧区块挂上这两条轨道。.container 的内容盒
   （max-width 1350 − 左右各 30px 内边距）本身就精确等于 --site-content-width，
   并已在各断点重述，所以内容列无需重写宽度。 */

/* --- 线的颜色 --------------------------------------------------------------

   用不透明的深灰，不用半透明白。半透明白会被身下的东西抬亮：同一个值在 #121212 上
   合成出 #2e2e2e，在 #181818 上就成了 #333，压在 Banner 底图的亮处还会更亮，所以
   看上去总有一段"跳"出来。改成不透明后，线的亮度只由自己决定。

   取值只有一条规矩：比脚下的底色高 10 出头，刚好看得出、不抢戏。
   实测底色——bg-dark-1 = #121212，bg-dark-2 = #181818，Banner 底图在竖线位置
   被压到亮度 21 上下（很平，所以当纯色处理），架构区块 = #05060a。 */
:root {
  --wt-grid-line: #1e1e1e;
}

.bg-dark-2 {
  --wt-grid-line: #242424;
}

/* 比 bg-dark-1 更黑的区块（架构区那种 #05060a），线也要跟着压下来。 */
.wt-grid-on-black {
  --wt-grid-line: #101217;
}

/* --- 导航卡下沿的横线 -----------------------------------------------------

   与首页同一处理：横线画在导航自身的下边框上，Banner 期间它是竖线的起跑线；
   一旦滚动（.body-scrolled），横线已无结构可交代，颜色转透明即淡出。 */
#navigation-container .main-nav {
  border-bottom: 1px solid var(--wt-grid-line);
  transition: border-bottom-color .3s ease;
}

#navigation-container .main-nav.body-scrolled {
  border-bottom-color: transparent;
}

/* --- 竖线 ----------------------------------------------------------------- */

.wt-grid-sec {
  position: relative;
}

.wt-grid-rails {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: var(--site-frame-width, min(1350px, 100vw));
  margin: 0 auto;
  pointer-events: none;
}

.wt-grid-rails span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--wt-grid-line);
}

.wt-grid-rails span:nth-child(1) { left: 0; }
.wt-grid-rails span:nth-child(2) { right: 0; }

/* Banner 的竖线从导航卡下沿起画，不与导航重合。--wt-nav-edge 由
   js/grid-rails-2026.js 按导航实际下沿实时同步，回退值是未滚动时的常见高度。 */
.wt-grid-sec[data-grid-hero] .wt-grid-rails {
  top: var(--wt-nav-edge, 86px);
}

/* 区块自带的视差／渐变背景是 z-index auto 的绝对定位层：竖线取 1 压在它们之上，
   内容列取 2 压在竖线之上，三层顺序在所有区块里一致。 */
.wt-grid-sec > .container,
.wt-grid-sec > .wt-grid-col {
  position: relative;
  z-index: 2;
}

/* --- 旧主题里比外框还宽的两种容器 ------------------------------------------

   .banner 是 1600px 的整幅容器，比外框宽，内容会压在竖线上。按它的用途收两种几何。 */

/* 一、区块之间的整幅插图：收到外框上，两端正好落在竖线上，自己带一段竖线，
   线才不会在这里断一截。挂载时会把它的 mb-* 换成 pb-*，让竖线覆盖到这段留白。 */
.wt-grid-figure {
  position: relative;
  width: var(--site-frame-width, min(1350px, 100vw));
  max-width: none;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}

.wt-grid-figure > div {
  position: relative;
  z-index: 2;
}

/* 二、直接拿 .banner 当内容容器的区块：收成与 .container 相同的几何——
   外框宽 + 一个间距的内边距，内容盒于是正好是内容列。 */
.wt-grid-col {
  width: var(--site-frame-width, min(1350px, 100vw));
  max-width: none;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--site-rail-inset, 30px);
  padding-left: var(--site-rail-inset, 30px);
}

/* --- 交点的绿十字 ---------------------------------------------------------

   规范见 docs/design-system-2026.md §2.4：横线与竖线相交处画一个 11×11 的绿色「+」。

   交点只出现在内容区域，Banner 不画 —— Banner 顶部那条线是导航卡的下沿，属于导航而不是
   内容分隔，画上去会让首屏多出两个无所指的标记。所以这条规则不是自动生效的：要在紧随
   hr.wt-grid-divider 的那个区块上加 .wt-grid-crossing 手动开启。画在下一个区块的顶部而不是
   上一个区块的底部，是因为区块背景不透明，画在上面会被盖住。

   两个轴的偏移不一样，分别算：
   横向 -5px —— 本层的竖线是 width:1px + background 的实心线，中心像素就是 span 自己，
   所以 -(11-1)/2 = -5 正好让十字的中心列压在线上。（首页那套用 border-left，定位基准差一个
   边框，取 -6px，两套不能互抄。）
   纵向 -6px —— 轨道顶边是区块的上沿，而 hr 是区块之前的那 1px，位置比区块顶再高一行，
   所以要多退一格，十字的中心行才落在横线上。 */
.wt-grid-crossing > .wt-grid-rails span::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -5px;
  width: 11px;
  height: 11px;
  background:
    linear-gradient(#67d8ad 0 0) center / 11px 1px no-repeat,
    linear-gradient(#67d8ad 0 0) center / 1px 11px no-repeat;
}

/* --- 骑外框的整幅带 --------------------------------------------------------

   表格类模块（数据概览、对比表）铺到外框：上下各一条横线封口，左右两端不画自己的
   边，直接由竖线接上，于是外框成为表格自身的边框。
   父级（.container 或 col-12）的内容盒就是内容列，所以 50% − 外框/2 正好把带子
   左右各外推一个 --site-rail-inset，落在竖线上。 */
.wt-grid-band {
  position: relative;
  width: var(--site-frame-width, min(1350px, 100vw));
  margin-right: 0;
  margin-left: calc(50% - var(--site-frame-width, min(1350px, 100vw)) / 2);
  border-top: 1px solid var(--wt-grid-line);
  border-bottom: 1px solid var(--wt-grid-line);
}

/* 骑外框的横向分隔线：宽度取外框，正好给竖线封口。 */
hr.wt-grid-divider {
  width: var(--site-frame-width, min(1350px, 100vw));
  max-width: none;
  height: 1px;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
  border: 0;
  background-color: var(--wt-grid-line);
  opacity: 1;
}

/* --- 数据概览带 ------------------------------------------------------------ */

.wt-grid-band-stats {
  /* 原来是 mt-80 + pt-60；内边距会把上横线推离数字，所以全部并入外边距。 */
  margin-top: 140px;
}

.wt-grid-band-stats .stats-card {
  border-right-color: var(--wt-grid-line);
}

/* 每行最后一格不画右边，右侧竖线来接。断点按各自的列数换位置。 */
@media (min-width: 992px) {
  .wt-grid-band-stats > [class*="col-"]:nth-child(6n) .stats-card { border-right: 0; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .wt-grid-band-stats > [class*="col-"]:nth-child(3n) .stats-card { border-right: 0; }
  /* 三列两行时补一条中缝，否则上下两行糊在一起。 */
  .wt-grid-band-stats > [class*="col-"]:nth-child(-n+3) .stats-card {
    border-bottom: 1px solid var(--wt-grid-line);
  }
}

@media (max-width: 767px) {
  .wt-grid-band-stats { margin-top: 100px; }
  .wt-grid-band-stats > [class*="col-"]:nth-child(odd) .stats-card {
    border-right: 1px solid var(--wt-grid-line);
  }
  .wt-grid-band-stats > [class*="col-"]:nth-child(-n+4) .stats-card {
    border-bottom: 1px solid var(--wt-grid-line);
  }
}

/* --- 表格带 ---------------------------------------------------------------- */

/* 表格自己的圆角边框会和外框打架：交给竖线和带子的上下横线。 */
.wt-grid-band-table .compare-table-wrapper {
  border: 0;
  border-radius: 0;
}

/* 首末列的文字退回内容列，别贴在竖线上。 */
.wt-grid-band-table .itdr-compare-table th:first-child,
.wt-grid-band-table .itdr-compare-table td:first-child {
  padding-left: var(--site-rail-inset, 30px);
}

.wt-grid-band-table .itdr-compare-table th:last-child,
.wt-grid-band-table .itdr-compare-table td:last-child {
  padding-right: var(--site-rail-inset, 30px);
}