/* ---------- 全熱外牆開孔與外氣罩動畫（index/theme/vents.js，捲到附近才載入） ---------- */
.vents-sec{padding:clamp(56px,8vw,112px) var(--gut,clamp(16px,4vw,48px)) 0;background:var(--cream,#FAF7EF);color:var(--ink,#1D2A36)}
.vents-head{max-width:1180px;margin:0 auto}
.vents-label{display:flex;align-items:center;gap:12px;margin:0;font:500 14px/1.5 var(--f-mono,'IBM Plex Mono',monospace);letter-spacing:.06em;color:var(--sky,#2C6AA8)}
.vents-label::before{content:"";width:28px;height:1px;background:currentColor}
.vents-h2{font:700 clamp(28px,3.2vw,46px)/1.3 var(--f-serif,'Noto Serif TC',serif);margin:14px 0 0;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.vents-lead{margin:18px 0 0;max-width:40em;font-size:16px;line-height:1.9;color:var(--ink-2,#45525E)}
.vents-note{margin:10px 0 0;font-size:14px;line-height:1.7;color:#7A8590}

.vents{position:relative;height:420vh;margin:clamp(32px,5vw,56px) calc(-1*var(--gut,clamp(16px,4vw,48px))) 0;--vents-dock:0px}
.vents-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--cream,#FAF7EF);display:flex;align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(24px,4vh,48px) var(--gut,clamp(16px,4vw,48px)) calc(clamp(24px,4vh,48px) + var(--vents-dock));border-top:1px solid #E6DFC9;border-bottom:1px solid #E6DFC9}
.vents-caps{flex:0 0 min(400px,34%);display:grid}
.vents-cap{grid-area:1/1;opacity:0;visibility:hidden}
.vents-cap:first-child{opacity:1;visibility:visible}
.vents-n{font:500 14px/1.5 var(--f-mono,'IBM Plex Mono',monospace);letter-spacing:.06em;color:var(--sky,#2C6AA8);margin:0}
.vents-cap h3{font:700 clamp(22px,2.2vw,30px)/1.4 var(--f-serif,'Noto Serif TC',serif);margin:10px 0 0;color:var(--ink,#1D2A36);word-break:keep-all;overflow-wrap:anywhere}
.vents-cap p:not(.vents-n){margin:12px 0 0;font-size:16px;line-height:1.8;color:var(--ink-2,#45525E)}
.vents-cap .vents-badge{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:8px 14px;border:1px solid currentColor;border-radius:4px;background:#fff;font:600 16px/1.5 var(--f-serif,'Noto Serif TC',serif);opacity:0}
.vents-badge.bad{color:#B23A2E!important}.vents-badge.good{color:#2F7A4F!important}
.vents-badge i{font-style:normal;flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px;line-height:1}
.vents-badge.bad i{background:#B23A2E}.vents-badge.good i{background:#2F7A4F}
.vents-art{flex:1;align-self:stretch;position:relative;min-width:0;min-height:0}
.vents-art svg,.vents-fig svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.vents text{font-family:var(--f-sans,'Noto Sans TC',sans-serif)}
html.vents-pin #nav{transform:translateY(-100%)!important}
html.vents-pin .float-btns{opacity:0;pointer-events:none}
@media (max-width:768px){
  html.has-dock .vents,html:has(.fx-dock) .vents{--vents-dock:calc(66px + env(safe-area-inset-bottom,0px))}
  .vents-stage{flex-direction:column;align-items:stretch;gap:12px;padding-top:calc(16px + env(safe-area-inset-top,0px))}
  .vents-caps{flex:none}
  .vents-cap h3{font-size:21px}
  .vents-cap p:not(.vents-n){font-size:15px;margin-top:8px;line-height:1.7}
  .vents-cap .vents-badge{margin-top:10px;font-size:15px;padding:6px 12px}
}
/* 減少動態／沒有 JS：六段直接排開，每段前面一張靜態圖 */
.vents.vents-rm,html.rm .vents{height:auto}
.vents.vents-rm .vents-stage,html.rm .vents-stage{position:static;height:auto;display:block;padding-top:clamp(32px,5vw,56px);padding-bottom:clamp(32px,5vw,56px);border-bottom:0}
.vents.vents-rm .vents-art,html.rm .vents-art{display:none}
.vents.vents-rm .vents-caps,html.rm .vents-caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:48px 40px;max-width:1180px;margin:0 auto}
.vents.vents-rm .vents-cap,html.rm .vents-cap{grid-area:auto;opacity:1!important;visibility:visible!important;transform:none!important}
.vents.vents-rm .vents-badge,html.rm .vents-badge{opacity:1!important}
.vents-fig{position:relative;aspect-ratio:640/560;margin-top:20px;border:1px solid #E6DFC9;background:#fff;overflow:hidden}

/* 手機：圖照實際比例，標題＋圖整組垂直置中（評審 11-03：圖下方空 500～700px） */
@media (max-width:768px){.vents-stage{justify-content:center}.vents-art{flex:0 1 auto;width:100%;aspect-ratio:640/560}}