/* ============================================================
   解决方案 · 详情页 —— 版式骨架 1:1 对齐 CATL，仅替换品牌色
   命名空间：.sy-page .ssol-*   避免影响后台与其它页面
   与 template/sany/solution/detail-solution.html 配套
   ------------------------------------------------------------
   对齐基准（CATL commercialEV 页实测计算值 @1264 视口）：
     字   距   全部 normal —— CATL 全站无任何 letter-spacing
     区块标题  36px / 700 / 居中 / line-height 36px / margin-bottom 30px
     区块上距  80px
     卡片标题  28px / 700 / line-height 46px / 居中 / 品牌色
     卡片正文  16px / line-height 28px / 居中 / #666
     卡片底色  #f8f8f8，卡片下距 60px
     正   文  16px / line-height 28px / #666
     次要说明  14px / #999
     图文分栏  61% : 39%（CATL 653 : 417，总宽 1070）
     图   片  16 : 9
     Banner    高≈423px；主标 30px/700/#fff；副标 28px/#d0d0d0
     按   钮  胶囊 border-radius 30px / 14px / padding 15px 20px / 描边品牌色
     文字色阶  #333 / #666 / #999 / #d0d0d0
   颜色替换：CATL rgb(0,40,170) → 本站 --sany-red #ed6a18
   ============================================================ */

/* ---------- 1. 深色 Banner（图上叠字，文案贴底） ---------- */
.sy-page .ssol-hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  padding:116px 0 68px;
  background-color:#101010;
  background-image:
    linear-gradient(100deg,rgba(12,12,12,.94) 0%,rgba(12,12,12,.84) 46%,rgba(12,12,12,.6) 100%),
    url('../images/ai/02-robot-inline-station.jpg');
  background-position:center,center;
  background-size:cover,cover;
  background-repeat:no-repeat;
  }
.sy-page .ssol-hero::after{
  content:"";
  position:absolute;
  right:-140px;top:-160px;
  width:560px;height:560px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(237,106,24,.3),rgba(237,106,24,0) 62%);
  pointer-events:none;
  }
.sy-page .ssol-hero .container{position:relative;z-index:1;}
.sy-page .ssol-hero .ssol-crumb{
  font-size:14px;
  line-height:28px;
  color:rgba(255,255,255,.62);
  margin-bottom:22px;
  }
.sy-page .ssol-hero .ssol-crumb a{color:rgba(255,255,255,.62);}
.sy-page .ssol-hero .ssol-crumb a:hover{color:#fff;}
.sy-page .ssol-hero .ssol-crumb span{margin:0 8px;color:rgba(255,255,255,.3);}
.sy-page .ssol-hero h1{
  font-size:36px;
  font-weight:700;
  line-height:1.3;
  max-width:1000px;
  }
.sy-page .ssol-hero .ssol-sub{
  margin-top:16px;
  font-size:28px;
  font-weight:400;
  line-height:1.4;
  color:#d0d0d0;
  }
.sy-page .ssol-hero .ssol-lead{
  margin-top:18px;
  max-width:900px;
  font-size:16px;
  line-height:28px;
  color:rgba(255,255,255,.78);
  }
.sy-page .ssol-actions{
  margin-top:36px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  }
.sy-page .ssol-btn{
  display:inline-block;
  padding:15px 30px;
  font-size:14px;
  line-height:1.4;
  border-radius:30px;
  border:1px solid var(--sany-red);
  background:var(--sany-red);
  color:#fff;
  transition:.25s;
  }
.sy-page .ssol-btn:hover{background:#d45c10;border-color:#d45c10;color:#fff;}
.sy-page .ssol-btn.ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff;}
.sy-page .ssol-btn.ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff;}

/* ---------- 2. 左侧竖排锚点 + 右侧正文 ---------- */
.sy-page .ssol-wrap{
  display:grid;
  grid-template-columns:148px minmax(0,1fr);
  gap:40px;
  align-items:start;
  padding-top:80px;
  padding-bottom:0;
  }
.sy-page .ssol-rail{position:sticky;top:96px;}
.sy-page .ssol-rail .rl-t{
  font-size:12px;
  line-height:22px;
  color:var(--sany-gray-l);
  padding-bottom:14px;
  border-bottom:1px solid var(--sany-border);
  margin-bottom:8px;
  }
/* 目录项较多的大类页（如曲面件 20 项）需要滚动，避免吸顶目录溢出视口；
   项少的页面不会触发滚动，表现不变 */
.sy-page .ssol-rail ul{
  border-left:1px solid var(--sany-border);
  max-height:calc(100vh - 300px);
  overflow-y:auto;
  scrollbar-width:thin;
  }
.sy-page .ssol-rail li a{
  display:block;
  padding:10px 0 10px 16px;
  margin-left:-1px;
  border-left:1px solid transparent;
  font-size:14px;
  line-height:24px;
  color:var(--sany-gray);
  transition:.2s;
  }
.sy-page .ssol-rail li a:hover{color:var(--sany-dark);}
.sy-page .ssol-rail li a.active{color:var(--sany-red);border-left-color:var(--sany-red);font-weight:700;}
.sy-page .ssol-rail .rl-cta{
  margin-top:28px;
  display:block;
  padding:14px 16px;
  border-radius:30px;
  background:var(--sany-red);
  color:#fff;
  text-align:center;
  font-size:14px;
  line-height:1.4;
  transition:.2s;
  }
.sy-page .ssol-rail .rl-cta:hover{background:#d45c10;color:#fff;}
.sy-page .ssol-rail .rl-tel{
  display:block;
  margin-top:14px;
  text-align:center;
  font-size:14px;
  line-height:24px;
  color:var(--sany-gray-l);
  }

/* ---------- 3. 分节标题（居中大字，下距 30px） ---------- */
.sy-page .ssol-body > section{padding-bottom:80px;scroll-margin-top:110px;}
.sy-page .ssol-h2{
  font-size:36px;
  font-weight:700;
  line-height:1.3;
  color:var(--sany-dark);
  text-align:center;
  }
.sy-page .ssol-h2 em{font-style:normal;color:var(--sany-red);}
.sy-page .ssol-h2-sub{
  text-align:center;
  font-size:16px;
  line-height:28px;
  color:var(--sany-gray);
  margin-top:14px;
  margin-bottom:30px;
  }

/* ---------- 4. 全宽 Banner + 蒙层文案 ---------- */
.sy-page .ssol-banner{position:relative;overflow:hidden;margin-bottom:30px;}
.sy-page .ssol-banner img{width:100%;height:340px;object-fit:cover;display:block;}
.sy-page .ssol-banner .bn-txt{
  position:absolute;
  left:0;top:0;
  height:100%;
  width:56%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 48px;
  color:#fff;
  background:linear-gradient(90deg,rgba(16,16,16,.9) 0%,rgba(16,16,16,.55) 62%,rgba(16,16,16,0) 100%);
  }
.sy-page .ssol-banner .bn-txt strong{font-size:30px;font-weight:700;line-height:1.35;}
.sy-page .ssol-banner .bn-txt span{
  margin-top:14px;
  font-size:16px;
  line-height:28px;
  color:#d0d0d0;
  }

/* ---------- 5. 正文段落（16/28 #666） ---------- */
.sy-page .ssol-p{
  font-size:16px;
  line-height:28px;
  color:var(--sany-gray);
  }
.sy-page .ssol-p + .ssol-p{margin-top:16px;}
.sy-page .ssol-p b{color:var(--sany-dark);}

/* ---------- 6. 卡片阵列（浅灰底 / 居中 / 标题 28px 品牌色）
   CATL 卡片是「窄列距 + 宽行距」：列间 12px、行间 60px —— 浅灰卡几乎连成一条带子 ---------- */
.sy-page .ssol-cards{display:grid;gap:56px 16px;}
.sy-page .ssol-cards.c2{grid-template-columns:repeat(2,minmax(0,1fr));}
.sy-page .ssol-cards.c3{grid-template-columns:repeat(3,minmax(0,1fr));}
.sy-page .ssol-cards.c4{grid-template-columns:repeat(4,minmax(0,1fr));}
.sy-page .ssol-card{
  background:#f8f8f8;
  padding:44px 30px;
  text-align:center;
  }
.sy-page .ssol-card h3{
  font-size:28px;
  font-weight:700;
  line-height:46px;
  color:var(--sany-red);
  }
.sy-page .ssol-card p{
  margin-top:14px;
  font-size:16px;
  line-height:28px;
  color:var(--sany-gray);
  }
.sy-page .ssol-card ul{margin-top:12px;}
.sy-page .ssol-card li{font-size:16px;line-height:28px;color:var(--sany-gray);}

/* ---------- 7. 大号数字 KPI（同卡片规格，数字用品牌色） ---------- */
.sy-page .ssol-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:56px 16px;
  margin-top:30px;
  }
.sy-page .ssol-kpi{
  background:#f8f8f8;
  padding:38px 22px;
  text-align:center;
  }
.sy-page .ssol-kpi b{
  display:block;
  font-size:28px;
  font-weight:700;
  line-height:46px;
  color:var(--sany-red);
  }
.sy-page .ssol-kpi em{
  display:block;
  font-style:normal;
  font-size:16px;
  line-height:28px;
  color:var(--sany-dark);
  font-weight:700;
  }
.sy-page .ssol-kpi span{
  display:block;
  margin-top:6px;
  font-size:14px;
  line-height:24px;
  color:var(--sany-gray-l);
  }

/* ---------- 8. 工艺流程步骤条 ---------- */
.sy-page .ssol-flow{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.sy-page .ssol-flow li{
  position:relative;
  padding:13px 22px 13px 44px;
  background:#f8f8f8;
  font-size:16px;
  line-height:28px;
  color:var(--sany-dark);
  }
.sy-page .ssol-flow li i{
  position:absolute;
  left:16px;top:50%;
  transform:translateY(-50%);
  font-style:normal;
  font-size:14px;
  font-weight:700;
  color:var(--sany-red);
  }

/* ---------- 9. 左右图文交替（61 : 39） ---------- */
.sy-page .ssol-split{
  display:grid;
  grid-template-columns:1.55fr minmax(0,1fr);
  gap:60px;
  align-items:center;
  }
.sy-page .ssol-split + .ssol-split{margin-top:60px;}
.sy-page .ssol-split img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
/* 图文交替：.rev 把图片换到右侧，同时交换列宽，保证图片仍是宽列
   （原实现只设 order 而未交换列宽，导致 rev 与默认版式视觉相同） */
.sy-page .ssol-split.rev{grid-template-columns:minmax(0,1fr) 1.55fr;}
.sy-page .ssol-split.rev .sp-txt{order:1;}
.sy-page .ssol-split.rev img{order:2;}
.sy-page .ssol-split h3{font-size:28px;font-weight:700;line-height:46px;color:var(--sany-dark);}
.sy-page .ssol-split p{margin-top:14px;font-size:16px;line-height:28px;color:var(--sany-gray);}
.sy-page .ssol-dots{margin-top:14px;}
.sy-page .ssol-dots li{
  position:relative;
  padding-left:20px;
  font-size:16px;
  line-height:28px;
  color:var(--sany-gray);
  }
.sy-page .ssol-dots li::before{
  content:"";
  position:absolute;
  left:0;top:11px;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--sany-red);
  }

/* ---------- 10. 左竖排 Tab + 右大图 ---------- */
.sy-page .ssol-tabs{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:60px;
  align-items:start;
  }
.sy-page .ssol-tablist .tab-btn{
  display:block;
  width:100%;
  text-align:left;
  font-family:inherit;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--sany-border);
  padding:18px 4px;
  font-size:20px;
  font-weight:700;
  line-height:1.4;
  color:var(--sany-gray);
  cursor:pointer;
  transition:.2s;
  }
.sy-page .ssol-tablist .tab-btn span{
  display:block;
  margin-top:6px;
  font-size:14px;
  font-weight:400;
  line-height:24px;
  color:var(--sany-gray-l);
  }
.sy-page .ssol-tablist .tab-btn.active{
  color:var(--sany-red);
  border-bottom-color:var(--sany-red);
  }
.sy-page .ssol-tabbody .tab-panel{display:none;}
.sy-page .ssol-tabbody .tab-panel.active{display:block;}
.sy-page .ssol-tabbody img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.sy-page .ssol-tabbody .cap{
  margin-top:20px;
  font-size:16px;
  line-height:28px;
  color:var(--sany-gray);
  }
.sy-page .ssol-tabbody .cap b{color:var(--sany-dark);}

/* ---------- 11. 底部 CTA ---------- */
.sy-page .ssol-cta{
  background:#141414;
  color:#fff;
  padding:56px 56px;
  margin-bottom:80px;
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  align-items:center;
  justify-content:space-between;
  scroll-margin-top:110px;
  }
.sy-page .ssol-cta h3{font-size:28px;font-weight:700;line-height:46px;}
.sy-page .ssol-cta p{margin-top:10px;font-size:16px;line-height:28px;color:#d0d0d0;max-width:640px;}
.sy-page .ssol-cta .ct-actions{display:flex;gap:14px;flex-wrap:wrap;}
.sy-page .ssol-cta .ssol-btn.ghost{border-color:rgba(255,255,255,.5);}
.sy-page .ssol-cta .ssol-btn.ghost:hover{background:#fff;border-color:#fff;color:#141414;}

/* ---------- 12. 响应式 ---------- */
/* 断点刻意压低：1264 视口下仍保持 36 / 28 的满规格（CATL 同视口实测值） */
@media (max-width:1100px){
  .sy-page .ssol-wrap{grid-template-columns:140px minmax(0,1fr);gap:34px;}
  .sy-page .ssol-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sy-page .ssol-cards.c4{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
@media (max-width:900px){
  .sy-page .ssol-hero h1{font-size:32px;}
  .sy-page .ssol-hero .ssol-sub{font-size:24px;}
  .sy-page .ssol-h2{font-size:32px;}
  .sy-page .ssol-card h3,
  .sy-page .ssol-split h3,
  .sy-page .ssol-cta h3{font-size:24px;line-height:40px;}
  }
@media (max-width:1024px){
  .sy-page .ssol-wrap{grid-template-columns:minmax(0,1fr);gap:0;}
  .sy-page .ssol-rail{position:static;margin-bottom:40px;}
  .sy-page .ssol-rail ul{border-left:0;display:flex;flex-wrap:wrap;gap:10px;max-height:none;overflow:visible;}
  .sy-page .ssol-rail li a{border:1px solid var(--sany-border);padding:9px 16px;margin-left:0;}
  .sy-page .ssol-rail li a.active{border-color:var(--sany-red);}
  .sy-page .ssol-split,
  .sy-page .ssol-split.rev,
  .sy-page .ssol-tabs{grid-template-columns:minmax(0,1fr);gap:32px;}
  .sy-page .ssol-split.rev .sp-txt,
  .sy-page .ssol-split.rev img{order:0;}
  .sy-page .ssol-banner .bn-txt{position:static;width:100%;padding:28px 26px;background:rgba(16,16,16,.88);}
  .sy-page .ssol-banner img{height:260px;}
  }
@media (max-width:640px){
  .sy-page .ssol-hero{padding:96px 0 56px;}
  .sy-page .ssol-hero h1{font-size:26px;}
  .sy-page .ssol-hero .ssol-sub{font-size:20px;}
  .sy-page .ssol-h2{font-size:24px;}
  .sy-page .ssol-card h3,
  .sy-page .ssol-split h3,
  .sy-page .ssol-cta h3{font-size:21px;line-height:34px;}
  .sy-page .ssol-card{padding:34px 22px;}
  .sy-page .ssol-cards.c2,
  .sy-page .ssol-cards.c3,
  .sy-page .ssol-cards.c4,
  .sy-page .ssol-kpis{grid-template-columns:minmax(0,1fr);}
  .sy-page .ssol-cta{padding:36px 26px;}
  }

/* 节内小标题（正文分节内部的二级小节，2026-09-21 汽车座椅页新增） */
.sy-page .ssol-h3{ margin:30px 0 0; font-size:20px; font-weight:700; color:var(--sany-dark,#22303a); }