/* WuThreat — 身份安全云栏目（产品概况 / 身份认证 / 身份安全，中英各一份）

   这三页的栅格挂载本来就是对的：竖线在 45–1395，内容列 75–1365，线色按底色取值，六档
   几何与 docs/grid-system-2026.md 的实测表逐档一致。差的不是轨道，是**页面自身的视觉语汇**
   还停在旧站：卡片是裸的图标＋标题＋正文，图标是白色，配图是亮蓝色实拍，区块底色一路
   bg-dark-1 没有交替 —— 于是竖线画上去也没有东西可分隔。

   本文件只做一件事：把这三页里几个旧组件的外观，收到 itdr-gateway / web-itdr / eitdr
   那一套上去。**不动任何 HTML 结构，也不改文案** —— 两栏图文的构图本身是成立的，
   要换的只是卡片、图标与配图的处理。

   取值全部照 itdr-gateway-enhanced.css 的 .threat-card：
   底 rgba(255,255,255,.03)，描边 rgba(255,255,255,.08)，左侧 3px 绿，圆角 2px，
   内边距 28px 24px；图标 #36c958；标题 17px/700；正文 13.5px，行高 1.75。 */

/* ==========================================================================
   一、alt-features-item —— 旧的裸列表项，收成家族卡片

   原样式只有一条 margin-top:35px，没有底、没有边、没有内边距，四个一组排在左半栏里，
   看上去是四段文案而不是四张卡。 */

.alt-features-grid > [class*="col-"] {
  display: flex;
  align-items: stretch;
}

.light-content .alt-features-item {
  width: 100%;
  margin-top: 0;
  padding: 28px 24px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 3px solid rgba(54, 201, 88, .5);
  border-radius: 2px;
  background: rgba(255, 255, 255, .03);
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
}

.light-content .alt-features-item:hover {
  border-color: rgba(54, 201, 88, .5);
  border-left-color: #36c958;
  background: rgba(54, 201, 88, .04);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(54, 201, 88, .08);
}

/* 卡片自己带了内边距，行与行之间改用 gutter，不再靠 margin-top 撑开。 */
.alt-features-grid {
  --bs-gutter-y: 24px;
}

/* 图标：48px 的白色大图标收到 28px 的绿色。
   内联 SVG 的 fill 写死在 path 的表现属性上（fill="#F6F7F9"），
   表现属性的优先级低于任何 CSS 规则，所以这里可以直接盖掉。 */
.light-content .alt-features-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
  font-size: 28px;
  color: #36c958;
}

.light-content .alt-features-icon svg path,
.light-content .alt-features-icon svg circle,
.light-content .alt-features-icon svg rect {
  fill: #36c958;
}

.light-content .alt-features-title {
  margin-bottom: 10px;
  color: rgba(255, 255, 255, .92);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.light-content .alt-features-descr {
  color: rgba(255, 255, 255, .58);
  font-size: 13.5px;
  line-height: 1.75;
}

/* ==========================================================================
   二、配图 —— 保留实拍，压深色遮罩

   promo-*.jpg 是亮蓝底的科技感实拍，直接放在深底上会跳出整站的深色＋绿色体系。
   按「保留图片、压深色遮罩」处理：图片本身降饱和压暗，上面盖一层深色到透明的渐变，
   再给一圈极淡的绿描边，把它收进深色体系里。

   遮罩画在包裹层的 ::after 上而不是给 img 加滤镜，这样鼠标悬停时可以单独把遮罩收掉，
   想看清原图仍然看得清。 */

.call-action-3-image-1,
.call-action-3-image-2 {
  position: relative;
  border: 1px solid rgba(54, 201, 88, .14);
  border-radius: 2px;
}

.call-action-3-image-1 img,
.call-action-3-image-2 img {
  display: block;
  filter: saturate(.72) brightness(.78) contrast(1.04);
  transition: filter .45s cubic-bezier(.4, 0, .2, 1);
}

.call-action-3-image-1::after,
.call-action-3-image-2::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
    linear-gradient(160deg, rgba(5, 10, 8, .55) 0%, rgba(5, 10, 8, .1) 55%, rgba(5, 10, 8, .5) 100%);
  pointer-events: none;
  transition: opacity .45s cubic-bezier(.4, 0, .2, 1);
}

.call-action-3-image-1:hover img,
.call-action-3-image-2:hover img {
  filter: saturate(.95) brightness(.94) contrast(1);
}

.call-action-3-image-1:hover::after,
.call-action-3-image-2:hover::after {
  opacity: .35;
}

/* ==========================================================================
   三、work-img —— 身份安全页的十张截图位

   原来是裸图加一行标题，图与底色之间没有边界，图没加载出来时就是一个纯黑方块。
   同样收进深色体系：一圈淡绿描边 + 一层遮罩，并给一个底色，图缺失时不至于塌成黑洞。 */

.light-content .work-img {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 2px;
  background: rgba(255, 255, 255, .03);
  overflow: hidden;
}

.light-content .work-img img {
  display: block;
  width: 100%;
  filter: saturate(.8) brightness(.85);
  transition: filter .45s cubic-bezier(.4, 0, .2, 1);
}

.light-content .work-item:hover .work-img {
  border-color: rgba(54, 201, 88, .4);
}

.light-content .work-item:hover .work-img img {
  filter: saturate(1) brightness(1);
}

.light-content .work-title {
  margin-bottom: 6px;
  color: rgba(255, 255, 255, .92);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.light-content .work-descr {
  color: rgba(255, 255, 255, .58);
  font-size: 13.5px;
  line-height: 1.75;
}