/* 场景大卡与小卡（全站同一份：assets/scn/cards.css）。首页把下面「子页」那行以上的部分内联进 index.html（sitegen/home.py），
   方案总页等子页链接整个文件（common.page() 见到 data-lds 自动加）。改这里，首页 build 一下就同步。
   焦点轮播（首页第二屏、方案总页，common.scn_carousel）：大卡 = 画面（场景引擎 assets/scn/：现场 + 数据层 + 标签 / 图例 / 字幕叠层）+ 文字栏
   （序号、方案名、展开说明、价值预期、适用现场、「了解更多 →」按钮）；小卡 = 缩略图（assets/scn/thumbs/）+ 名称，当前那张蓝边 + 底部进度线（= 这一轮放到哪），其余去色。
   电脑（≥1100）左画面右文字约 1.9fr:1fr，画面 16:10（文字栏更高时画面跟着拉高，引擎按比例补齐）；761–1099 上下排、画面 16:10，小卡在下。
   十张叠在同一格里，高度取最高的一张，轮换时页面不跳。价值预期：画面演到「结果」那一拍，引擎回调，对应那条加 is-lit（浅蓝底从左扫过、箭头变实）。
   2026-10-04 晚 Leon：「首页场景屏，移动端不太方便浏览，场景切换也不方便，不要点击整个卡片就跳转，给个了解更多的按钮……尽量让切换内容不超过一屏，
   或者切换的小卡片在大卡片的上面」——大卡不再整卡链接（点画面不跳转），文字栏放「了解更多 →」；手机（≤760）小卡条压成一行（缩略图 + 名字）放在大卡上面、
   当前小卡滚到中间，大卡左右滑动切换，文字栏收紧（不显示序号和适用现场，展开说明最多 3 行，价值预期一行），画面高度按视口收，
   小卡条 + 大卡在导航下面一屏放下（390×844 起；矮屏画面再收、不裁主体）。?scxm=old 是旧手机版式（对比用：小卡在下、画面 4:5、不滑动）。 */
.scx{padding:0 var(--gut)}
.scx-stage{display:grid}
.scx-panel{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s,transform .45s cubic-bezier(.2,.7,.2,1)}
.scx-panel.is-on{opacity:1;visibility:visible;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.scx-card{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);height:100%;border:1px solid var(--line);border-radius:16px;background:#fff;color:inherit;overflow:hidden}
.scx-fig{position:relative;min-width:0;aspect-ratio:16/10;background:#F4F7FA;border-right:1px solid var(--line-2);overflow:hidden;-webkit-touch-callout:none}
.scx-scn{position:absolute;inset:0}
.scx-old{display:flex;align-items:center;background:linear-gradient(180deg,#F8FAFC,#F1F5F9)}
.scx-old .scn-art{display:block;width:100%;height:100%}
.scx-todo{position:absolute;left:12px;top:12px;padding:3px 9px;border:1px dashed #F59E0B;border-radius:5px;background:#FFFBEB;font-size:11px;line-height:1.4;color:#B45309}
.scx-txt{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:30px clamp(22px,2.6vw,40px)}
.scx-idx{display:block;font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--ink-3)}
.scx-txt h3{margin:14px 0 0;font-size:clamp(24px,2.3vw,30px);line-height:1.2;font-weight:600;color:var(--ink);white-space:nowrap}
.scx-lead{margin:12px 0 0;font-size:15px;line-height:1.75;color:var(--ink-2);text-wrap:pretty}
.scx .scn-kpi{margin:20px 0 0;padding:14px 0 0;border-top:1px solid var(--line-2)}
.scx .scn-kpi span,.scx-where>span{display:block;padding:0;border:0;font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.scx .scn-kpi ul{gap:4px;margin-top:8px}
.scx .scn-kpi li{position:relative;isolation:isolate;align-items:center;gap:8px;margin-left:-8px;padding:3px 8px;border-radius:6px;font-size:15px}
.scx .scn-kpi li::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--blue-soft);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s ease}
.scx .scn-kpi li.is-lit::before{transform:scaleX(1);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.scx .scn-kpi i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:5px;line-height:1;transition:background .3s,color .3s}
.scx .scn-kpi li.is-lit i{background:var(--blue);color:#fff}
.scx-where{margin-top:16px}
.scx-where .chip-row{height:28px;margin-top:10px;overflow:hidden}   /* 一行：放不下的 chip 折到第二行被裁掉（工地类排在最后） */
.scx-where .chip{line-height:18px}
.scx-txt>.scx-go,.scx-txt>.beam-wrap{align-self:flex-start;margin-top:22px}   /* 「了解更多 →」：站上的 .btn（悬停 border-beam，site.js 会包一层 .beam-wrap） */
.scx-go{white-space:nowrap}
.scx-tabs{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(122px,1fr);gap:6px;margin-top:12px;padding:2px 0 4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scx-tabs::-webkit-scrollbar{display:none}
@media (pointer:fine){.scx-tabs{scrollbar-width:thin;scrollbar-color:var(--line) transparent}}
.scx-tab{position:relative;display:flex;flex-direction:column;gap:7px;margin:0;padding:4px 4px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink-2);font:inherit;text-align:left;text-decoration:none;cursor:pointer;scroll-snap-align:start;overflow:hidden;transition:border-color .25s,color .25s}
.scx-thumb{display:block;border-radius:6px;background:linear-gradient(180deg,#F8FAFC,#F1F5F9);overflow:hidden}
.scx-thumb .scn-thumb{display:block;width:100%;height:auto;aspect-ratio:16/10;filter:grayscale(1) contrast(1.05);opacity:.85;transition:filter .3s,opacity .3s}
.scx-name{display:block;padding:0 2px;font-size:12px;line-height:1.3;white-space:nowrap}
.scx-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:0 50%;visibility:hidden}
.scx-tab:hover{border-color:var(--blue-100);color:var(--ink)}
.scx-tab:hover .scn-thumb{filter:none;opacity:1}
.scx-tab.is-on{border-color:var(--blue);color:var(--ink);font-weight:600}
.scx-tab.is-on .scn-thumb{filter:none;opacity:1}
.scx-tab.is-on .scx-bar{visibility:visible}
.scx-tab:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}
.scx6 .scx-stage{touch-action:pan-y pinch-zoom}   /* 大卡左右滑动由脚本接（carousel.js），竖向照常滚页面、双指照常缩放 */
@media (max-width:1099px){
  .scx-card{grid-template-columns:1fr}
  .scx-fig{border-right:0;border-bottom:1px solid var(--line-2)}
  .scx-txt{justify-content:flex-start;padding:22px 24px 24px}
  .scx-txt>.scx-go,.scx-txt>.beam-wrap{margin-top:auto;padding-top:0}
  .scx-main{margin-bottom:20px}
  .scx-tabs{margin:10px calc(-1 * var(--gut)) 0;padding:2px var(--gut) 4px;scroll-padding:0 var(--gut);grid-auto-columns:126px}
}
@media (max-width:640px){.scx-card{border-radius:12px}.scx-tab{border-radius:9px}}
/* 手机新版式（≤760）：小卡条一行在上、大卡在下，一屏放下 */
@media (max-width:760px){
  .scx6:not(.scxm-old){display:flex;flex-direction:column;--scx-rest:270px}   /* 小卡条 + 文字栏 + 边框的高度：画面 = 一屏减去它（下面 .scx-fig） */
  main:has(>.subnav) .scx6:not(.scxm-old){--scx-rest:318px}   /* 有页内小导航（吸在主导航下面，约 48px）的页 */
  .scx6:not(.scxm-old) .scx-tabs{order:-1;grid-auto-columns:max-content;gap:6px;margin:0 calc(-1 * var(--gut)) 10px;padding:2px var(--gut) 3px;scroll-snap-type:x proximity;scroll-padding:0 var(--gut)}
  .scx6:not(.scxm-old) .scx-tab{flex-direction:row;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:9px;scroll-snap-align:center}
  .scx6:not(.scxm-old) .scx-thumb{flex:none;width:80px;border-radius:5px}
  .scx6:not(.scxm-old) .scx-name{padding:0;font-size:13px}
  .scx6:not(.scxm-old) .scx-card{border-radius:12px}
  /* 画面高度：4:5（同首页旧版）；一屏放不下整张卡就按视口高度收（引擎按容器比例取景，主体不裁），但不低于宽度的 0.96 倍（仍是竖构图）；
     再矮的屏（如 320×568）保证「小卡条 + 画面 + 名字 + 了解更多」在一屏里（140px = 小卡条 + 名字那一行），展开说明和价值预期往下接 */
  .scx6:not(.scxm-old) .scx-fig{--w:calc(100vw - 2 * var(--gut) - 2px);aspect-ratio:auto;height:calc(var(--w) * 1.25);
    height:min(calc(var(--w) * 1.25),max(calc(100vh - 57px - var(--scx-rest)),min(calc(var(--w) * .96),calc(100vh - 57px - 140px))));
    height:min(calc(var(--w) * 1.25),max(calc(100svh - 57px - var(--scx-rest)),min(calc(var(--w) * .96),calc(100svh - 57px - 140px))))}
  .scx6:not(.scxm-old) .scx-txt{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;padding:12px 14px 14px}
  .scx6:not(.scxm-old) .scx-main{display:contents}
  .scx6:not(.scxm-old) .scx-idx,.scx6:not(.scxm-old) .scx-where{display:none}
  .scx6:not(.scxm-old) .scx-txt h3{grid-column:1;grid-row:1;margin:0;font-size:20px;line-height:1.3}
  .scx6:not(.scxm-old) .scx-txt>.scx-go,.scx6:not(.scxm-old) .scx-txt>.beam-wrap{grid-column:2;grid-row:1;align-self:center;margin:0}
  .scx6:not(.scxm-old) .scx-go{height:34px;padding:0 12px;font-size:13px}
  .scx6:not(.scxm-old) .scx-lead{grid-column:1/-1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:8px 0 0;font-size:14px;line-height:1.7}
  .scx6:not(.scxm-old) .scn-kpi{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:10px 0 0}
  .scx6:not(.scxm-old) .scn-kpi span{flex:none}
  .scx6:not(.scxm-old) .scn-kpi ul{display:flex;flex-wrap:nowrap;gap:6px;margin:0;min-width:0}
  .scx6:not(.scxm-old) .scn-kpi li{gap:6px;margin-left:0;padding:3px 7px;font-size:14px}
  .scx6:not(.scxm-old) .scn-kpi li:first-child{margin-left:-7px}
  .scx6:not(.scxm-old) .scn-kpi i{width:17px;height:17px}
}
@media (max-width:374px){.scx6:not(.scxm-old) .scn-kpi span{display:none}.scx6:not(.scxm-old) .scn-kpi li{font-size:13px;padding:3px 6px}}   /* 窄屏：价值预期两项一行，标签让位 */
/* 旧手机版式（?scxm=old，2026-10-04 改前的样子，给 Leon 对比）：小卡在下、画面 4:5、「了解更多」在序号那一行的右边 */
@media (max-width:640px){
  .scxm-old .scx-fig{aspect-ratio:4/5}
  .scxm-old .scx-txt{position:relative;padding:16px 16px 18px}
  .scxm-old .scx-main{margin-bottom:0}
  .scxm-old .scx-txt>.scx-go,.scxm-old .scx-txt>.beam-wrap{position:absolute;top:10px;right:16px;margin:0}
  .scxm-old .scx-go{height:30px;padding:0 10px;font-size:12px}
  .scxm-old .scx-txt h3{margin-top:10px;font-size:22px}
  .scxm-old .scx-lead{margin-top:8px;font-size:14px;line-height:1.7}
  .scxm-old .scn-kpi{margin-top:14px;padding-top:12px}
  .scxm-old .scn-kpi li{font-size:14px}
  .scxm-old .scx-where{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){.scx-panel,.scx-panel.is-on,.scx .scn-kpi li::before,.scx .scn-kpi li.is-lit::before{transition:none}}
/* —— 以上首页内联；以下只给子页（单张大卡 scn_stage、小卡一排 scn_tabs）—— */
/* 单张大卡（方案页「场景」一节，common.scn_stage）：同上面首页的大卡（.scx-card / .scx-fig / .scx-txt / 价值预期），只有这一张、自己循环，
   没有序号和「了解更多」；引擎挂上之前画面里是定格图（.scx-poster，assets/scn/stills/），挂上以后（mount.js 给根元素加 .is-live）藏掉。 */
.scx-poster,.scx-poster img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.is-live .scx-poster{display:none}
.scx-solo .scx-main>:first-child{margin-top:0}
.scx-solo .scx-txt h3{margin-bottom:12px}
@media (max-width:1099px){.scx-solo .scx-main{margin-bottom:0}}
@media (max-width:760px){
  .scx-solo .scx-card{border-radius:12px}
  .scx-solo .scx-fig{aspect-ratio:4/5}
  .scx-solo .scx-txt{padding:16px 16px 18px}
  .scx-solo .scx-txt h3{font-size:22px}
  .scx-solo .scx-lead{font-size:14px;line-height:1.7}
  .scx-solo .scn-kpi{margin-top:14px;padding-top:12px}
  .scx-solo .scn-kpi li{font-size:14px}
  .scx-solo .scx-where{margin-top:14px}
}
/* 页首大画面里的引擎场景（common.hero_scene，hero(…, big=True)）：铺满画面框，没有边框和文字栏 */
.hero-scn .scx-fig{position:absolute;inset:0;aspect-ratio:auto;border:0;background:#F4F7FA}
/* 小卡一排（相关方案、洞察，common.scn_tabs）：首页的小卡（缩略图 + 名字），每张链到方案页；彩色（首页去色的是「不是当前」的那几张，这里没有当前）。
   电脑自动排列（每张约 200–230px），手机一行一张（缩略图在左、名字在右，同首页手机上的小卡条）。 */
.scx-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:10px;padding:0 var(--gut) 8px}
.scx-row .scx-tab{gap:8px;padding:4px 4px 10px;transition:border-color .25s,box-shadow .25s,color .25s}
.scx-row .scn-thumb{filter:none;opacity:1}
.scx-row .scx-name{padding:0 4px;font-size:13px;font-weight:500;color:var(--ink);transition:color .25s}
.scx-row .scx-tab:hover,.scx-row .scx-tab:focus-visible{border-color:var(--blue-100);box-shadow:0 12px 30px -20px rgba(29,78,216,.5);outline:none}
.scx-row .scx-tab:hover .scx-name,.scx-row .scx-tab:focus-visible .scx-name{color:var(--blue)}
@media (max-width:640px){
  .scx-row{grid-template-columns:1fr;gap:6px}
  .scx-row .scx-tab{flex-direction:row;align-items:center;gap:10px;padding:5px 12px 5px 5px;border-radius:9px}
  .scx-row .scx-thumb{flex:none;width:80px;border-radius:5px}
  .scx-row .scx-name{padding:0;font-size:14px}
}
/* scn_tabs(…, cols=3 / 4)：电脑上固定几等分（相关方案一排三张）；手机仍一行一张 */
@media (min-width:641px){.scx-row.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.scx-row.c4{grid-template-columns:repeat(4,minmax(0,1fr))}}