/* ==========================================================================
   场景页首屏 · 图2「分类介绍」版式
   —— 白底、左图右文：左侧大图，右侧红色上线 + 大标题 + 两段说明 + 2×2 数据卡，
      下方一行 4 张子场景图块（底部白色标题）
   —— 只作用于 .sx-intro（107 个场景页），不引入新配色，全部复用站内 token
   —— 原深色标题带（.phead-c）与白底面包屑带（.phead-plain）已被该区块替代，
      面包屑保留在区块顶部一行小字，保持站内导航
   ========================================================================== */

.sx-intro{padding:clamp(96px,8.6vw,124px) 0 clamp(34px,3.6vw,54px);background:#fff}
/* 场景分类页恢复 page-banner 后：intro 不再需要为固定头预留 96–124px 顶部空白 */
.page-banner+.sx-intro{padding-top:clamp(44px,4.6vw,64px)}
/* intro 右栏的段落小标题 + 超长文案折叠（脚本注入 Read more） */
/* V19：字号统一走全站 H2 token（--h2：桌面 36px / 窄屏 22px），不再单独定义 */
.sx-intro-h{margin:0 0 16px;font-weight:800;line-height:1.25;letter-spacing:-.2px;color:var(--blue-dd,#012A56)}
.sx-intro-p.is-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.sx-intro-more{margin-top:10px;padding:0;border:0;background:none;color:var(--blue,#0352A2);font:600 13px var(--fh);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.sx-intro-more:hover{text-decoration:underline}
.sx-intro .wrap{max-width:var(--max,1460px)}

/* 顶部面包屑：浅色小字，不抢主视觉 */
.sx-intro .sx-crumb{margin-bottom:clamp(18px,2vw,28px);color:var(--ink3,#8695A8);font-size:13px}
.sx-intro .sx-crumb a{color:var(--ink2,#475467)}
.sx-intro .sx-crumb a:hover{color:var(--blue,#0352A2)}
.sx-intro .sx-crumb b{color:var(--blue,#0352A2);font-weight:600}

/* 左图右文（V19：两栏等高，左图底边与右栏内容底边齐平，不再固定 1:1） */
.sx-intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(30px,4.6vw,68px);align-items:stretch}
/* 左图画框跟随右栏高度（源图为竖图，居中裁切） */
.sx-intro-media{position:relative;border-radius:12px;overflow:hidden;background:var(--blue-l,#EAF2FB);min-height:clamp(300px,26vw,520px);box-shadow:0 18px 50px rgba(3,52,110,.10)}
.sx-intro-media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* 右侧文案 */
.sx-intro-copy .overline{justify-content:flex-start;margin-bottom:14px;color:#C80000;font-size:12.5px;letter-spacing:.18em}
.sx-intro-copy .overline:before{width:26px;height:2px;background:#C80000}
.sx-intro-copy h1{
  margin:0 0 20px;max-width:900px;
  font-size:clamp(28px,3.05vw,42px);line-height:1.16;letter-spacing:-.6px;
  text-transform:none;color:var(--ink,#0F1F33);
}
.sx-intro-p{margin:0 0 16px;font-size:clamp(15px,1.12vw,17px);line-height:1.9;color:var(--ink2,#475467)}
.sx-intro-p strong{font-weight:700;color:var(--ink,#0F1F33)}

/* 2×2 数据卡：浅蓝底、细描边、红色数字 */
.sx-intro-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:clamp(22px,2.6vw,34px)}
.sx-intro-stat{background:#EFF5FC;border:1px solid #E1EAF5;border-radius:10px;padding:clamp(20px,2.2vw,28px)}
.sx-intro-stat b{display:block;font:800 clamp(24px,2.45vw,34px)/1.12 var(--fh);letter-spacing:-.6px;color:#E03131}
.sx-intro-stat span{display:block;margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--ink2,#475467)}

/* 子场景图块：4 列，底部白色标题 */
/* 子场景图块：V19 起改为横向轮播（4 张一屏，左右箭头切换），取代页首的 .sx-nav 选项卡 */
.sx-tiles-w{position:relative;margin-top:clamp(34px,3.8vw,52px)}
.sx-intro-tiles{display:flex;gap:clamp(16px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding:2px 0}
.sx-intro-tiles::-webkit-scrollbar{display:none}
.sx-intro-tile{flex:0 0 calc((100% - clamp(16px,2vw,26px)*3)/4);scroll-snap-align:start;position:relative;display:block;border-radius:12px;overflow:hidden;background:var(--blue-l,#EAF2FB);aspect-ratio:16/9}
.sx-intro-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.sx-intro-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,11,26,.78) 0%,rgba(2,11,26,.28) 42%,rgba(2,11,26,0) 68%)}
.sx-intro-tile span{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 12px 14px;color:#fff;font:700 clamp(13px,1.05vw,15px)/1.3 var(--fh);text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.sx-intro-tile:hover img{transform:scale(1.05)}
/* 当前子场景：红色内描边 + 右上角 Current 角标 */
.sx-intro-tile.on{box-shadow:inset 0 0 0 3px #C80000}
.sx-intro-tile.on:before{content:"";position:absolute;inset:0;z-index:1;background:rgba(200,0,0,.10);pointer-events:none}
/* 轮播箭头 */
.sx-tile-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:40px;height:40px;border:0;border-radius:50%;background:#C80000;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 20px rgba(200,0,0,.28);transition:.25s var(--ease);opacity:.94}
.sx-tile-nav:hover{background:#A50000;opacity:1}
.sx-tile-nav:disabled{opacity:.35;cursor:default;box-shadow:none}
.sx-tile-nav svg{width:18px;height:18px}
.sx-tile-prev{left:-16px}
.sx-tile-next{right:-16px}
.sx-tiles-w.is-static .sx-tile-nav{display:none}


@media (max-width:1180px){
  .sx-intro-grid{grid-template-columns:1fr;gap:30px}
  .sx-intro-media{aspect-ratio:1/1}
  .sx-intro-copy h1{max-width:none}
  .sx-intro-tile{flex-basis:calc((100% - clamp(16px,2vw,26px))/2)}
  .sx-tile-prev{left:-8px}
  .sx-tile-next{right:-8px}
}
@media (max-width:640px){
  .sx-intro{padding-top:96px}
  .sx-intro-stats{grid-template-columns:1fr}
  .sx-intro-tile{flex-basis:86%}
  .sx-tile-nav{width:34px;height:34px}
  .sx-intro-stat{padding:18px 18px}
}