/* ============================================================
   解决方案 · 汇总总览页 专属样式（v2 · CATL 版式）
   文件：public/static/sany/css/solution-summary.css
   作用域：.sy-page .so-page（solution-summary.css 只在 /news/4 引入）
   ------------------------------------------------------------
   版式基准全部照抄 CATL /solution/commercialEV/ 的浏览器实测值
   （视口 1264 / html font-size 9px 的 rem 体系换算后）：
     · 区块标题 36px / 700 / 居中 / mb30        · 区块上距 80px
     · 卡片标题 28px / 700 / lh46 / 品牌色       · 卡片底 #f8f8f8
     · 卡片阵列 行距 40px / 列距 12px            · 卡片内边距 8px
     · 正文 16px / lh28 / #666                  · 次要说明 14px / #999
     · 图文块 图 546 : 文 417（61:47）           · 块内上下留白 70px
     · 胶囊按钮 h52 / radius30 / fs14 / padding 15 20
     · 灰阶 #333 / #666 / #999 / #d0d0d0 / #f8f8f8
     · 字间距一律 normal（CATL 全站均未加字距）
   ** 唯一的改动：品牌色由 CATL 蓝 rgb(0,40,170) 换为亿恩凯红 #ed6a18 **
   ============================================================ */

/* ============================================================
   一、Hero：全幅大图 + 底部左对齐白字 + 面包屑（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.jpg') 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;
  }

/* ============================================================
   二、区块与分节标题（CATL：留白 80px、标题 36/700 居中）
   ============================================================ */
/* 内容容器：CATL 在 1264 视口下正文容器为 1070px（视口的 84.6%），
   这里取 max-width 1140（内容 1100），与之接近，避免 1920 屏上过于铺满 */
.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 分节标题下方没有装饰短线，去掉 sany.css 的 48×4 橙条 */
.sy-page .so-page .section-head::after{
  display:none;
  }

/* ============================================================
   三、汇总区：引导语 / 关键数据 / 9 格矩阵 / 交付流程
   ============================================================ */
.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;
  }
/* ---------- 本组方案全量清单（SEO / GEO 友好：一行给出本组全部方案名与链接） ---------- */
.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;
  }

/* ---------- 关键数据：CATL 浅灰卡（#f8f8f8 / 28px 品牌色标题 / 细分割线） ---------- */
.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 格矩阵（CATL 列距 12 / 浅灰卡 / 品牌色编号） ---------- */
.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;
  }

/* ---------- 统一交付流程（去掉箭头，改为 CATL 式浅灰块） ---------- */
.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;
  }

/* ============================================================
   四、方案明细：筛选胶囊 + 9 个 CATL 式图文案例块
   ============================================================ */
.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;
  }

/* ============================================================
   方案卡阵列 · 2026-09-20 改版
   原版是 CATL 式「一行一个大图文块」（文 417 : 图 546 / 上下留 70px），
   19 个方案 → 整页约 1 万像素高，一屏看不到两个方案。
   现改为「一行 3 个紧凑卡」：图 148px、标题 17px、简介限 2 行、
   标签改胶囊，整页高度约降至 1/4，且标题本身是链接（利于 SEO/GEO 抓取）。
   ============================================================ */
.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);
  }
/* 分组标签在紧凑卡里冗余（卡片已在对应分组下），收起但仍保留在 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;
  /* 中文长标题：只在「 / 」等空格处换行，避免把「铣床」这类词拆开 */
  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);
  }
/* 简介限 2 行 —— 卡片等高、版面整齐，首屏能露出下一行 */
.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);
  }

/* ============================================================
   五、底部 CTA（与解决方案详情页 .ssol-cta 同一套规格）
   ============================================================ */
.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);
  }

/* ============================================================
   六、响应式（CATL 在 1264 视口为满规格，故断点压低到 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;
    }
  /* 方案卡：窄屏降为 2 列 */
  .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));
    }
  /* 手机：方案卡回到 1 列（图在上），卡内文字再收一档 */
  .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;
    }
  }

/* ---------- 方案卡 · CATL 式大号数字 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;}
  }