/* ================================================================
   PRODUCTS — 产品页专属样式
     · 产品类目 hex 阵的字号调小（产品类目文字比首页应用领域长 5+ 倍）
     · 产品类目区背景 = about-culture 同款浅绿 + 分子图
     · 产品搜索区背景 = 同色衔接
   依赖：tokens.css、base.css、pages/home.css（复用 .apps/.hex/.search 样式）
   ================================================================ */

/* 产品类目和产品搜索都包在 .products-bg 内，复用首页 .appbg 同款
   背景：白底 + 分子背景part.jpg */
.products-bg {
  position: relative;
  background: #fff url('https://v.sh-original.com/image/default/4D78FCFD92244F099332B02A832189DA-6-2.jpg') no-repeat center center / cover;  /* 分子背景part.jpg → 阿里云 VOD */
  padding: 80px 0 60px;
}

/* 产品类目区头 — 左对齐（不像首页 apps__title 在右下） */
.products__head {
  max-width: 1280px;
  margin: 0 auto 30px;
  padding: 0 clamp(24px, 5vw, 60px);
}
.products__head .triangle {
  display: block;
  width: 38px; aspect-ratio: 54 / 33;
  background: url('../../../images/half-green-logo.svg') no-repeat center / contain;
  margin-bottom: 14px;
  margin-left: -30px;
}
.products__head .cn {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 36px);
  color: var(--red);
  font-weight: 900;
  letter-spacing: .15em;
  line-height: 1;
}
.products__head .en {
  margin-top: 8px;
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: .25em;
  color: var(--green);
  font-weight: 600;
}

/* 产品页 hex 字号调小 —— 文字 hex 的产品类目名称比首页"电网系统"长 5 倍以上，
   需要小字号 + 紧凑行高才能在 hex 形内放下。
   覆盖 home.css 中 .hex--text .cn 的字号。 */
.products .apps .hex--text .cn {
  /* 六边形里是较长的产品名，不用优设标题黑（笔画重、长句难认）→ 系统默认无衬线：
     苹果苹方 / Windows 微软雅黑（system-first；Noto 仅作末位兜底） */
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, system-ui, "Noto Sans SC", sans-serif;
  font-size: clamp(12px, 1.05vw, 15px);
  letter-spacing: .05em;
  line-height: 1.4;
  font-weight: 600;
}
.products .apps .hex--text .en {
  display: none;        /* 产品页只显示中文名称，无英文副标 */
}
/* 文字 hex 内文字居中，去掉首页 padding 50px（太大塞不下长文字） */
.products .apps .hex--text {
  padding: 18px;
  text-align: center;
  justify-content: center;
  align-items: center;
}
/* 取消首页 t1-t5 各自的 margin-top/bottom 调整（针对短文字的） */
.products .apps .hex.t1 div,
.products .apps .hex.t2 div,
.products .apps .hex.t3 div,
.products .apps .hex.t4 div,
.products .apps .hex.t5 div,
.products .apps .hex.t6 div {
  margin: 0;
}
/* hex--text 的对齐属性 reset（首页配色规则把它们设成 flex-start 等） */
.products .apps .hex--aero,
.products .apps .hex--optical,
.products .apps .hex--newenergy,
.products .apps .hex--nuke,
.products .apps .hex--semi,
.products .apps .hex--ai {
  justify-content: center;
  align-items: center;
}
.products .apps .hex--aero .cn,
.products .apps .hex--optical .cn,
.products .apps .hex--newenergy .cn,
.products .apps .hex--nuke .cn,
.products .apps .hex--semi .cn,
.products .apps .hex--ai .cn {
  text-align: center;
}
/* 英文产品页：六边形产品描述改用英文（desc_en）→ Barlow、字号略缩、行高紧凑，容纳较长英文。 */
html[lang^="en"] .products .apps .hex--text .cn {
  font-family: var(--font-en);
  font-size: clamp(10px, 0.85vw, 13px);
  letter-spacing: 0;
  line-height: 1.3;
}

/* search 区在 products-bg 内，背景透明 */
.products .search {
  padding: 40px 0 20px;
  background: transparent;
}
.products .search__title {
  margin-bottom: 30px;
  text-align: center;
  max-width: 312px;
}
/* search 标题样式跟 products__head 一致：三角 + 红中文 + 绿英文 */
.products .search__title .triangle {
  display: block;
  width: 38px; aspect-ratio: 54 / 33;
  background: url('../../../images/half-green-logo.svg') no-repeat center / contain;
  margin: 0 auto 14px; 
  margin-left: -30px; 
}
.products .search__title .cn {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 42px);
  color: var(--red) !important;        /* override home.css 的 green */
  font-weight: 900;
  letter-spacing: .15em;
  line-height: 1;
}
.products .search__title .en {
  margin-top: 8px;
  font-family: var(--font-en);
  font-size: clamp(13px, 2vw, 23px);
  letter-spacing: .25em;
  color: var(--green) !important;
  font-weight: 600;
}

@media (max-width: 980px) {
  .products .apps .hex--text .cn {
    font-size: 11px;
  }
  /* 移动端：产品类目标题居中（覆盖 section-head 的左移 padding 与三角外挑）。
     左内边距对称回右侧值 → 内容盒对称、真正水平居中。 */
  .products__head { text-align: center; padding-left: clamp(24px, 5vw, 60px) !important; }
  .products__head .triangle { margin-left: auto !important; margin-right: auto !important; }
}

/* footer-cta V mask 颜色匹配 products-bg 白底 —
   products 页上方是 .products-bg 白色 + 分子图，V mask 应该用白色衔接 */
section.vision::before {
  background: #fff;
}