/* WuThreat — E-ITDR 产品概述页（eitdr.html / en/eitdr.html）

   本页沿用内页旧主题：page-section + .container + Bootstrap 栅格，排版走
   section-caption-fancy / section-title / section-descr，卡片复用
   itdr-gateway-enhanced.css 与 core-capabilities.css 的既有组件，
   竖线走 grid-rails-2026.css 的挂载层。

   这个文件只补现有样式表没有的东西：行业研究带（三项带出处的报告数据，旧主题里没有对应
   组件）、Banner 下方的部署要点行、边界注记框，以及窄屏对比表的下限宽度。
   栅格交点的绿十字曾经定义在这里，已上移到 grid-rails-2026.css 供所有内页共用；
   本页照旧在紧随 Banner 分隔线的区块上加 .wt-grid-crossing 开启。
   其余一律不在这里重复定义。 */

/* ==========================================================================
   一、Banner 下方的一行部署要点

   放在 CTA 之下，用来交代平台、部署形态与共存关系。不是数据带，不摆数字。
   ========================================================================== */

.eitdr-banner-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 34px;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}

.eitdr-banner-meta li {
  position: relative;
  padding-left: 16px;
  color: rgba(255, 255, 255, .55);
  font-size: 13.5px;
  line-height: 1.7;
}

.eitdr-banner-meta li::before {
  position: absolute;
  top: .68em;
  left: 0;
  width: 7px;
  height: 1px;
  background: rgba(54, 201, 88, .75);
  content: "";
}

/* ==========================================================================
   二、行业研究带

   左边一段研究机构观点，右边三项带出处的报告数据。三个数字来自不同机构与不同年份，
   所以每一项都要把机构、年份与样本口径写在数字旁边，不能只留一个大数字。
   视觉语言对齐 .threat-card：同样的卡面、同样的绿色强调、同样的脚注分隔。
   ========================================================================== */

.eitdr-research {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: 48px;
  align-items: start;
  padding: 34px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.eitdr-research-view h4 {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .92);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.01em;
}

.eitdr-research-view p {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .58);
  font-size: 14px;
  line-height: 1.85;
}

/* 机构与年份的署名行：口径必须随文可见，不折叠进脚注。 */
.eitdr-research-by {
  color: rgba(255, 255, 255, .42) !important;
  font-size: 12.5px !important;
}

.eitdr-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.eitdr-stat {
  position: relative;
  padding: 0 24px;
}

.eitdr-stat:first-child { padding-left: 0; }
.eitdr-stat:last-child { padding-right: 0; }

.eitdr-stat + .eitdr-stat::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: rgba(255, 255, 255, .08);
  content: "";
}

.eitdr-stat-figure {
  display: block;
  margin-bottom: 12px;
  color: #36c958;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.eitdr-stat-text {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .58);
  font-size: 13.5px;
  line-height: 1.75;
}

.eitdr-stat-source {
  display: inline-block;
  color: rgba(255, 255, 255, .8);
  font-size: 12.5px;
  line-height: 1.6;
  border-bottom: 1px solid rgba(54, 201, 88, .45);
  transition: color .25s ease, border-color .25s ease;
}

.eitdr-stat-source:hover {
  color: #36c958;
  border-bottom-color: #36c958;
}

/* 样本口径：说明这个数字代表什么、不代表什么。 */
.eitdr-stat-scope {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: rgba(54, 201, 88, .7);
  font-size: 12px;
  font-style: italic;
  line-height: 1.6;
}

.eitdr-research-close {
  margin: 34px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .58);
  font-size: 14px;
  line-height: 1.85;
}

/* ==========================================================================
   三、边界与口径的行内注解

   能力边界、演示数据说明这类句子，视觉上要比正文轻，但不能藏起来。
   ========================================================================== */

.eitdr-note {
  margin: 26px 0 0;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-left: 3px solid rgba(54, 201, 88, .4);
  border-radius: 2px;
  background: rgba(255, 255, 255, .02);
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
  line-height: 1.8;
}

/* ==========================================================================
   四、响应式
   ========================================================================== */

@media (max-width: 991px) {
  .eitdr-research { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

@media (max-width: 767px) {
  .eitdr-stats { grid-template-columns: minmax(0, 1fr); }
  .eitdr-stat { padding: 22px 0; }
  .eitdr-stat:first-child { padding-top: 0; }
  /* 单列后分隔线由竖改横。 */
  .eitdr-stat + .eitdr-stat::before {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
  }
  .eitdr-banner-meta { gap: 8px 22px; }
  .eitdr-stat-figure { font-size: 30px; }
}

/* --- 窄屏下的对比表 --------------------------------------------------------

   `.compare-scroll-wrapper` 本来就是为手机端横向滚动写的（itdr-gateway-enhanced.css:126），
   但表格没有下限宽度，于是三列一路被压到 80px 上下 —— 参考页的首列是「支持／不支持」这类短
   标签，压得住；E-ITDR 这几页的首列是整句说明，390 档实测一行只剩四个字，读不下去。

   给表格一个下限，滚动条才真的接得上。620px 是按三列各留一个可读行宽反推的：在 390 档要横向
   滚一屏多一点，在 768 档以上不触发。本文件只被 E-ITDR 的十二个页面引用，不影响其他页面。 */
@media (max-width: 767px) {
  .compare-scroll-wrapper .itdr-compare-table {
    min-width: 620px;
  }
}