/* ============================================================
   Solutions · summary overview page dedicated styles (v2 · CATL layout)
   File: public/static/sany/css/solution-summary.css
   Scope: .sy-page .so-page (solution-summary.css is only loaded on /news/4)
   ------------------------------------------------------------
   Every layout baseline is copied from the values measured in the browser on CATL /solution/commercialEV/
   (after conversion into the rem system of viewport 1264 / html font-size 9px):
     · section heading 36px / 700 / centered / mb30      · section top spacing 80px
     · card title 28px / 700 / lh46 / brand color        · card background #f8f8f8
     · card array row gap 40px / column gap 12px         · card padding 8px
     · body copy 16px / lh28 / #666                      · secondary notes 14px / #999
     · text-image block image 546 : text 417 (61:47)     · 70px whitespace above and below inside the block
     · pill button h52 / radius30 / fs14 / padding 15 20
     · grey scale #333 / #666 / #999 / #d0d0d0 / #f8f8f8
     · letter-spacing all normal (CATL adds no letter-spacing anywhere on the site)
   ** The only change: the brand color goes from CATL blue rgb(0,40,170) to EEK red #ed6a18 **
   ============================================================ */

/* ============================================================
   1. Hero: full-width image + bottom left-aligned white text + breadcrumb (CATL .mc_banner_inner)
   ============================================================ */
.sy-page .so-page .page-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  height:298px;
  padding:0;
  color:#fff;
  background:#141414 url('../images/ai/02-robot-inline-station.webp') center/cover no-repeat;
  overflow:hidden;
  }
.sy-page .so-page .page-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width:auto;
  height:auto;
  border-radius:0;
  background:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.68) 62%,rgba(0,0,0,.80) 100%);
  }
.sy-page .so-page .page-hero .container{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1140px;
  padding-bottom:24px;
  }
.sy-page .so-page .page-hero h1{
  font-size:28px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:normal;
  color:#fff;
  }
.sy-page .so-page .page-hero h1 small{
  display:block;
  margin-top:4px;
  font-size:17px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:normal;
  color:#c8c8c8;
  }
.sy-page .so-page .page-hero p{
  margin-top:11px;
  max-width:900px;
  font-size:14px;
  line-height:24px;
  letter-spacing:normal;
  color:#c8c8c8;
  }
.sy-page .so-page .page-hero .breadcrumb{
  margin:16px 0 0;
  padding-top:13px;
  font-size:13px;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.22);
  }
.sy-page .so-page .page-hero .breadcrumb span{
  margin:0 8px;
  color:rgba(255,255,255,.5);
  }
.sy-page .so-page .page-hero .breadcrumb a:hover{
  color:#fff;
  }

/* ============================================================
   2. Sections and section headings (CATL: 80px whitespace, headings 36/700 centered)
   ============================================================ */
/* Content container: on CATL the body container is 1070px at a 1264 viewport (84.6% of the viewport); max-width 1140 (1100 of content)
   is used here to stay close to that and avoid the layout spreading too wide on 1920 screens */
.sy-page .so-page .container{
  max-width:1140px;
  }
.sy-page .so-page .section{
  padding:52px 0;
  }
.sy-page .so-page .section-gray{
  background:transparent;
  }
.sy-page .so-page .section-head{
  margin-bottom:20px;
  text-align:center;
  }
.sy-page .so-page .section-head h2{
  font-size:30px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:normal;
  color:#1d1d1f;
  }
.sy-page .so-page .section-head h2 em{
  font-style:normal;
  color:var(--sany-red);
  }
.sy-page .so-page .section-head p{
  margin-top:10px;
  font-size:15px;
  line-height:26px;
  letter-spacing:normal;
  color:#666;
  }
/* CATL has no decorative short rule below section headings, so the 48×4 orange bar from sany.css is removed */
.sy-page .so-page .section-head::after{
  display:none;
  }

/* ============================================================
   3. Summary area: intro copy / key data / 9-cell matrix / delivery process
   ============================================================ */
.sy-page .so-page .so-intro{
  max-width:1000px;
  margin:0 auto 26px;
  text-align:center;
  }
.sy-page .so-page .so-intro p{
  font-size:14px;
  line-height:25px;
  letter-spacing:normal;
  color:#666;
  }
.sy-page .so-page .so-intro p + p{
  margin-top:7px;
  }
/* ---------- Full list of solutions in this group (SEO / GEO friendly: every solution name and link for the group on one line) ---------- */
.sy-page .so-page .so-index{
  max-width:1000px;
  margin:0 auto 26px;
  padding:12px 16px;
  background:#f8f8f8;
  border-left:3px solid var(--sany-red);
  font-size:13px;
  line-height:24px;
  color:#888;
  }
.sy-page .so-page .so-index b{
  font-weight:700;
  color:#555;
  }
.sy-page .so-page .so-index a{
  color:#666;
  }
.sy-page .so-page .so-index a:hover{
  color:var(--sany-red);
  }
.sy-page .so-page .so-index em{
  margin:0 5px;
  font-style:normal;
  color:#c8c8c8;
  }
.sy-page .so-page .so-intro b{
  font-weight:700;
  color:#1d1d1f;
  }

/* ---------- Key data: CATL light grey cards (#f8f8f8 / 28px brand-color title / thin divider) ---------- */
.sy-page .so-page .so-stats{
  display:flex;
  gap:12px;
  margin-bottom:12px;
  }
.sy-page .so-page .so-stat{
  flex:1;
  padding:34px 20px 30px;
  background:#f8f8f8;
  border:0;
  border-top:0;
  text-align:center;
  transition:.25s;
  }
.sy-page .so-page .so-stat:hover{
  background:#f2f2f2;
  box-shadow:none;
  }
.sy-page .so-page .so-stat b{
  display:block;
  font-size:28px;
  font-weight:700;
  line-height:46px;
  letter-spacing:normal;
  color:var(--sany-red);
  }
.sy-page .so-page .so-stat b em{
  margin-left:3px;
  font-size:14px;
  font-style:normal;
  font-weight:400;
  letter-spacing:normal;
  color:var(--sany-red);
  }
.sy-page .so-page .so-stat span{
  display:block;
  margin-top:6px;
  padding-top:16px;
  font-size:16px;
  line-height:28px;
  color:#666;
  border-top:1px solid #e5e5e5;
  }
.sy-page .so-page .so-stat span i{
  display:block;
  margin-top:2px;
  font-size:14px;
  font-style:normal;
  line-height:24px;
  color:#999;
  }

/* ---------- 9-cell matrix (CATL 12px column gap / light grey cards / brand-color numbering) ---------- */
.sy-page .so-page .so-matrix{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  }
.sy-page .so-page .so-cell{
  position:relative;
  display:block;
  padding:26px 20px 26px 60px;
  background:#f8f8f8;
  border:0;
  transition:.25s;
  }
.sy-page .so-page .so-cell i{
  position:absolute;
  left:20px;
  top:25px;
  font-size:19px;
  font-style:normal;
  font-weight:700;
  line-height:1;
  color:var(--sany-red);
  opacity:.34;
  transition:.25s;
  }
.sy-page .so-page .so-cell b{
  display:block;
  font-size:15px;
  font-weight:700;
  line-height:26px;
  letter-spacing:normal;
  color:#333;
  word-break:keep-all;
  overflow-wrap:break-word;
  }
.sy-page .so-page .so-cell > span{
  display:block;
  margin-top:6px;
  font-size:14px;
  line-height:24px;
  color:#999;
  }
.sy-page .so-page .so-cell:hover{
  background:#f2f2f2;
  border-color:transparent;
  box-shadow:none;
  transform:none;
  }
.sy-page .so-page .so-cell:hover i{
  opacity:1;
  }

/* ---------- Unified delivery process (arrows removed, replaced with CATL-style light grey blocks) ---------- */
.sy-page .so-page .so-flow-head{
  margin:80px 0 30px;
  text-align:center;
  }
.sy-page .so-page .so-flow-head h3{
  font-size:28px;
  font-weight:700;
  letter-spacing:normal;
  color:#1d1d1f;
  }
.sy-page .so-page .so-flow-head p{
  margin-top:14px;
  font-size:16px;
  line-height:28px;
  color:#666;
  }
.sy-page .so-page .so-flow{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:12px;
  }
.sy-page .so-page .so-flow li{
  padding:26px 8px;
  background:#f8f8f8;
  text-align:center;
  transition:.25s;
  }
.sy-page .so-page .so-flow li i{
  display:block;
  width:auto;
  height:auto;
  margin:0 0 12px;
  border-radius:0;
  background:none;
  font-size:14px;
  font-style:normal;
  font-weight:700;
  line-height:1;
  color:var(--sany-red);
  }
.sy-page .so-page .so-flow li b{
  font-size:15px;
  font-weight:400;
  letter-spacing:normal;
  color:#333;
  }
.sy-page .so-page .so-flow li::after{
  display:none;
  }
.sy-page .so-page .so-flow li:hover{
  background:#f2f2f2;
  box-shadow:none;
  }

/* ============================================================
   4. Solution details: filter pills + 9 CATL-style text-image case blocks
   ============================================================ */
.sy-page .so-page .filter-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:64px;
  justify-content:center;
  }
.sy-page .so-page .filter-tabs button{
  height:48px;
  padding:0 26px;
  background:#fff;
  border:1px solid #d0d0d0;
  border-radius:30px;
  font-size:14px;
  line-height:46px;
  letter-spacing:normal;
  color:#666;
  cursor:pointer;
  transition:.25s;
  font-family:inherit;
  }
.sy-page .so-page .filter-tabs button.active,
.sy-page .so-page .filter-tabs button:hover{
  background:var(--sany-red);
  border-color:var(--sany-red);
  color:#fff;
  }

/* ============================================================
   Solution card array · revamped 2026-09-20
   The original was a CATL-style "one large text-image block per row" (text 417 : image 546 / 70px above and below),
   and with 19 solutions the page came to roughly 10,000px tall —— less than two solutions visible per screen.
   It is now "3 compact cards per row": image 148px, title 17px, intro capped at 2 lines,
   tags turned into pills; total page height drops to about 1/4, and the title itself is a link (good for SEO/GEO crawling).
   ============================================================ */
.sy-page .so-page .sol-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  }
.sy-page .so-page .sol-card{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:10px;
  overflow:hidden;
  transition:border-color .25s, box-shadow .25s, transform .25s;
  }
.sy-page .so-page .sol-card:hover{
  border-color:var(--sany-red);
  box-shadow:0 8px 20px rgba(0,0,0,.07);
  transform:translateY(-3px);
  }
.sy-page .so-page .sol-card .sc-thumb{
  order:0;
  flex:none;
  overflow:hidden;
  background:#f2f2f2;
  }
.sy-page .so-page .sol-card .sc-body{
  order:1;
  display:flex;
  flex-direction:column;
  flex:1;
  padding:13px 15px 15px;
  }
.sy-page .so-page .sol-card .sc-thumb img{
  display:block;
  width:100%;
  height:148px;
  object-fit:cover;
  transition:transform .7s ease;
  }
.sy-page .so-page .sol-card:hover .sc-thumb img{
  transform:scale(1.05);
  }
/* The group label is redundant inside a compact card (the card already sits under its group), so it is collapsed but kept in the DOM */
.sy-page .so-page .sol-card .cat{
  display:none;
  }
.sy-page .so-page .sol-card h3{
  font-size:17px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:normal;
  color:#1d1d1f;
  /* Long Chinese titles: wrap only at spaces such as " / " so words like "milling machine" are not split apart */
  word-break:keep-all;
  overflow-wrap:break-word;
  }
.sy-page .so-page .sol-card h3 a{
  color:inherit;
  }
.sy-page .so-page .sol-card h3 a:hover{
  color:var(--sany-red);
  }
/* Intro capped at 2 lines —— cards end up the same height and the layout stays tidy, with the next row showing in the first screen */
.sy-page .so-page .sol-card p,
.sy-page .so-page .sol-card .sc-sub{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top:7px;
  margin-bottom:0;
  font-size:13px;
  line-height:21px;
  letter-spacing:normal;
  color:#777;
  }
.sy-page .so-page .sol-card .sc-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:9px;
  }
.sy-page .so-page .sol-card .sc-tags span{
  padding:2px 8px;
  background:#f5f6f7;
  border-radius:4px;
  font-size:12px;
  line-height:18px;
  color:#8a8a8a;
  }
.sy-page .so-page .sol-card .sc-tags span:not(:last-child)::after{
  content:none;
  }
.sy-page .so-page .sol-card .sc-tags span:hover{
  background:#f5f6f7;
  color:#8a8a8a;
  }
.sy-page .so-page .sol-card .sc-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:auto;
  padding-top:13px;
  }
.sy-page .so-page .sol-card .btn{
  height:34px;
  padding:0 15px;
  border:1px solid var(--sany-red);
  border-radius:30px;
  background:transparent;
  font-size:13px;
  line-height:32px;
  letter-spacing:normal;
  color:var(--sany-red);
  transition:.25s;
  }
.sy-page .so-page .sol-card .btn-solid{
  background:var(--sany-red);
  border-color:var(--sany-red);
  color:#fff;
  }
.sy-page .so-page .sol-card .btn-solid:hover{
  background:#d95c10;
  border-color:#d95c10;
  color:#fff;
  filter:none;
  }
.sy-page .so-page .sol-card .btn-ghost{
  background:transparent;
  border-color:#d0d0d0;
  color:#666;
  }
.sy-page .so-page .sol-card .btn-ghost:hover{
  background:transparent;
  border-color:var(--sany-red);
  color:var(--sany-red);
  }

/* ============================================================
   5. Bottom CTA (same spec as .ssol-cta on the solution detail page)
   ============================================================ */
.sy-page .so-page .service{
  padding:80px 0;
  background:#141414;
  text-align:center;
  color:#fff;
  }
.sy-page .so-page .service-stats{
  display:flex;
  justify-content:center;
  gap:110px;
  }
.sy-page .so-page .stat-num{
  font-size:28px;
  font-weight:700;
  line-height:46px;
  letter-spacing:normal;
  color:var(--sany-red);
  }
.sy-page .so-page .stat-num small{
  font-size:14px;
  }
.sy-page .so-page .stat-label{
  margin-top:6px;
  font-size:16px;
  line-height:28px;
  letter-spacing:normal;
  color:#d0d0d0;
  }
.sy-page .so-page .service-desc{
  margin-top:26px;
  font-size:16px;
  line-height:28px;
  letter-spacing:normal;
  color:#999;
  }
.sy-page .so-page .service-actions{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:34px;
  }
.sy-page .so-page .service-actions a{
  height:52px;
  padding:0 30px;
  border:1px solid #d0d0d0;
  border-radius:30px;
  font-size:14px;
  line-height:50px;
  letter-spacing:normal;
  color:#fff;
  transition:.25s;
  }
.sy-page .so-page .service-actions a.solid{
  background:var(--sany-red);
  border-color:var(--sany-red);
  color:#fff;
  }
.sy-page .so-page .service-actions a:hover{
  background:transparent;
  border-color:#fff;
  color:#fff;
  }
.sy-page .so-page .service-actions a.solid:hover{
  background:#d95c10;
  border-color:#d95c10;
  color:#fff;
  }
.sy-page .so-page .service-hotline{
  margin-top:26px;
  font-size:14px;
  line-height:24px;
  color:#999;
  }
.sy-page .so-page .service-hotline b{
  font-size:16px;
  color:var(--sany-red);
  }

/* ============================================================
   6. Responsive (CATL keeps the full spec at a 1264 viewport, so breakpoints are pushed down to 1200 / 900)
   ============================================================ */
@media (max-width:1200px){
  .sy-page .so-page .sol-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    }
  .sy-page .so-page .sol-card h3{
    font-size:16px;
    }
  .sy-page .so-page .sol-card .sc-thumb img{
    height:134px;
    }
  .sy-page .so-page .page-hero h1{
    font-size:26px;
    }
  .sy-page .so-page .page-hero h1 small{
    font-size:16px;
    }
  .sy-page .so-page .section-head h2{
    font-size:27px;
    }
  .sy-page .so-page .so-flow{
    grid-template-columns:repeat(4,minmax(0,1fr));
    }
  }

@media (max-width:900px){
  .sy-page .so-page .page-hero{
    height:246px;
    }
  .sy-page .so-page .page-hero h1{
    font-size:22px;
    }
  .sy-page .so-page .page-hero h1 small{
    font-size:15px;
    }
  .sy-page .so-page .page-hero p{
    font-size:13px;
    line-height:22px;
    }
  .sy-page .so-page .section{
    padding:38px 0;
    }
  .sy-page .so-page .section-head{
    margin-bottom:18px;
    }
  .sy-page .so-page .section-head h2{
    font-size:23px;
    }
  .sy-page .so-page .so-stats{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    }
  .sy-page .so-page .so-matrix{
    grid-template-columns:repeat(2,minmax(0,1fr));
    }
  .sy-page .so-page .so-flow{
    grid-template-columns:repeat(3,minmax(0,1fr));
    }
  .sy-page .so-page .so-flow-head{
    margin-top:56px;
    }
  /* Solution cards: drop to 2 columns on narrow screens */
  .sy-page .so-page .sol-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    }
  .sy-page .so-page .sol-card .sc-thumb img{
    height:152px;
    }
  .sy-page .so-page .sol-card h3{
    font-size:16px;
    }
  .sy-page .so-page .filter-tabs{
    margin-bottom:32px;
    }
  }

@media (max-width:640px){
  .sy-page .so-page .so-matrix{
    grid-template-columns:minmax(0,1fr);
    }
  .sy-page .so-page .so-flow{
    grid-template-columns:repeat(2,minmax(0,1fr));
    }
  /* Mobile: solution cards return to 1 column (image on top) and the text inside the card drops one more step */
  .sy-page .so-page .sol-list{
    grid-template-columns:minmax(0,1fr);
    gap:14px;
    }
  .sy-page .so-page .sol-card .sc-thumb img{
    height:176px;
    }
  .sy-page .so-page .sol-card p,
  .sy-page .so-page .sol-card .sc-sub{
    -webkit-line-clamp:3;
    }
  .sy-page .so-page .service-stats{
    gap:40px;
    }
  .sy-page .so-page .service-actions{
    flex-wrap:wrap;
    }
  }

/* ---------- Solution cards · CATL-style large-number KPI (2×2) ---------- */
.sy-page .so-page .sol-card .sc-sub{
  font-size:16px;
  line-height:28px;
  color:#666;
  margin-bottom:20px;
  }
.sy-page .so-page .sol-card .sc-kpis{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  margin-bottom:22px;
  }
.sy-page .so-page .sol-card .sc-kpi{
  background:#f8f8f8;
  border-radius:8px;
  padding:14px 16px 12px;
  }
.sy-page .so-page .sol-card .sc-kpi b{
  display:block;
  font-size:24px;
  font-weight:700;
  line-height:1.3;
  color:#ed6a18;
  }
.sy-page .so-page .sol-card .sc-kpi em{
  display:block;
  font-style:normal;
  font-size:14px;
  font-weight:600;
  color:#1d1d1f;
  line-height:20px;
  margin-top:2px;
  }
.sy-page .so-page .sol-card .sc-kpi span{
  display:block;
  font-size:12px;
  line-height:18px;
  color:#999;
  margin-top:4px;
  }
@media (max-width:640px){
  .sy-page .so-page .sol-card .sc-kpis{gap:8px;}
  .sy-page .so-page .sol-card .sc-kpi{padding:10px 12px 9px;}
  .sy-page .so-page .sol-card .sc-kpi b{font-size:20px;}
  .sy-page .so-page .sol-card .sc-kpi em{font-size:13px;line-height:18px;}
  .sy-page .so-page .sol-card .sc-kpi span{font-size:11px;line-height:16px;}
  }