/* ============================================================
   Solutions · detail page —— layout skeleton aligned 1:1 with CATL, only the brand color is swapped
   Namespace: .sy-page .ssol-*   so the admin and other pages are untouched
   Pairs with template/sany/solution/detail-solution.html
   ------------------------------------------------------------
   Alignment baseline (computed values measured on the CATL commercialEV page @1264 viewport):
     letter-spacing  all normal —— CATL carries no letter-spacing anywhere on the site
     section heading  36px / 700 / centered / line-height 36px / margin-bottom 30px
     section top spacing  80px
     card title       28px / 700 / line-height 46px / centered / brand color
     card body copy   16px / line-height 28px / centered / #666
     card background  #f8f8f8, card bottom spacing 60px
     body copy        16px / line-height 28px / #666
     secondary notes  14px / #999
     text-image split 61% : 39% (CATL 653 : 417, total width 1070)
     images           16 : 9
     Banner           height ≈423px; main title 30px/700/#fff; sub title 28px/#d0d0d0
     buttons          pill border-radius 30px / 14px / padding 15px 20px / brand-color outline
     text color scale #333 / #666 / #999 / #d0d0d0
   Color swap: CATL rgb(0,40,170) → this site's --sany-red #ed6a18
   ============================================================ */

/* ---------- 1. Dark banner (text over the image, copy anchored to the bottom) ---------- */
.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.webp');
  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. Left vertical anchor rail + right body copy ---------- */
.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;
  }
/* Category pages with many contents entries (e.g. 20 items for curved parts) need to scroll, so the sticky
   contents do not overflow the viewport; pages with few entries never scroll and render as before */
.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. Section heading (large centered text, 30px bottom spacing) ---------- */
.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. Full-width banner + overlay copy ---------- */
.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. Body paragraphs (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. Card array (light grey background / centered / 28px brand-color title)
   CATL cards use a "narrow column gap + wide row gap" rhythm: 12px between columns, 60px between rows —— the light grey cards almost form one continuous band ---------- */
.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. Large-number KPI (same card spec, numbers in the brand color) ---------- */
.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. Process flow step bar ---------- */
.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. Alternating text and image (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;}
/* Alternating text and image: .rev moves the image to the right and swaps the column widths at the same time, so the image still occupies the wide column
   (the first implementation only set order without swapping widths, which made rev look identical to the default layout) */
.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. Left vertical tabs + large image on the right ---------- */
.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. Bottom 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. Responsive ---------- */
/* Breakpoints are deliberately pushed down: 1264 viewports still get the full 36 / 28 spec (values measured at the same viewport on 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;}
  }

/* In-section subheading (second-level subsection inside a body section, added for the automotive seat page on 2026-09-21) */
.sy-page .ssol-h3{ margin:30px 0 0; font-size:20px; font-weight:700; color:var(--sany-dark,#22303a); }