/* =====================================================================
   永續映像 · VIDEOS · css/videos.css
   ▸ 所有選擇器以 #videos 開頭（lightbox 被 JS 搬到 body，id 為 #videos-lightbox）
   ▸ 版式：IRON Figma「iron to claude」永續映像 10769:17343（2026-09-14 改版，規格 _spec/videos_redesign.md）
     標題列 1360 寬左右分散、底對齊 → 32px → 1px 分隔線 → 48px → 600×337.4 曲面輪播 → 32px → 說明列（寬 600、對齊卡片左緣）
   ▸ 共用 token／元件在 css/base.css（.ctrl .sr-only）
   ▸ 卡片尺寸由 videos.js 依舞台寬度寫入 --vid-card-w／--vid-card-h／--vid-pad-t／--vid-pad-b
     （舞台上下各留 pad，給曲面側卡的下沉與旋轉角，不讓卡角被裁；外距再用負值扣回，視覺距離維持 48／32）
   ▸ 底色：--paper；RWD 斷點：≤1100px、≤640px；尊重 prefers-reduced-motion
   ===================================================================== */

#videos{
  --vid-x:40px;                 /* Figma 內容區 left 40 */
  --vid-ink:#15251A;
  --vid-ink-2:rgba(21,37,26,.66);
  --vid-en:"Lexend Exa","Noto Sans TC",system-ui,sans-serif;   /* Lexend Exa 400／500 由 index.html head 載入 */
  overflow:clip;
  /* ?jump=videos 時 section 頂端貼視窗頂：上內距要讓標題避開 fixed nav */
  padding-block:calc(var(--nav-h) + 40px) 120px;
  padding-inline:var(--vid-x);
}

/* ---------- 標題列 ---------- */
#videos .vid-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(21,37,26,.12);
}
#videos .vid-title{display:flex;flex-direction:column;align-items:flex-start;margin:0;color:var(--vid-ink)}
#videos .vid-title__en{
  font-family:var(--vid-en);font-size:14px;line-height:32px;font-weight:500;letter-spacing:0;opacity:.5;
}
#videos .vid-title__tc{
  font-family:var(--font-tc);font-size:56px;line-height:normal;font-weight:500;letter-spacing:-1.44px;white-space:nowrap;
}
#videos .vid-aside{display:flex;align-items:center;gap:20px;flex:0 0 auto}

/* 張數：01 / 05（Figma：01 Lexend Exa 500、/ 與 05 Lexend Exa 400 .66，12／32，gap 8） */
#videos .vid-count{
  display:flex;align-items:center;gap:8px;margin:0;
  font-family:var(--vid-en);font-size:12px;line-height:32px;font-weight:400;letter-spacing:0;
  color:var(--vid-ink-2);font-variant-numeric:tabular-nums;
}
#videos .vid-count__cur{color:var(--vid-ink);font-weight:500}

/* 左右鈕：40×40 圓、1px 框、14px 箭頭（同共好行動改版樣式），gap 16 */
#videos .vid-ctrls{display:flex;gap:16px}
#videos .vid-ctrl{width:40px;height:40px;border-radius:50%;border-color:var(--vid-ink);color:var(--vid-ink)}
#videos .vid-ctrl svg{width:14px;height:14px}
#videos .vid-prev svg{transform:scaleX(-1)}
#videos .vid-ctrl svg path{stroke-width:1.3125px}
#videos .vid-ctrl:focus-visible{outline:var(--focus-ring);outline-offset:3px}

/* 手機控制列：≤640 由 videos.js 把 .vid-count 與 .ctrls 搬到輪播下方 */
#videos .vid-mctrl{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;margin-top:calc(20px - var(--vid-pad-b, 0px))}
#videos .vid-mctrl[hidden]{display:none}

/* ---------- 曲面輪播 ---------- */
#videos .vid-stage[hidden],
#videos .vid-caption[hidden]{display:none}
#videos .vid-stage{
  position:relative;
  /* 分隔線 → 卡片頂 48px：扣掉舞台上方預留的 pad */
  margin:calc(48px - var(--vid-pad-t, 16px)) calc(var(--vid-x) * -1) 0;
  height:calc(var(--vid-pad-t, 16px) + var(--vid-card-h, 337.5px) + var(--vid-pad-b, 90px));
}
#videos .vid-gallery{
  position:absolute;inset:0;
  /* 只在最外緣 4% 羽化，讓左右側卡盡量完整露出 */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
#videos .vid-gallery:focus{outline:none}
#videos .vid-gallery:focus-visible{
  -webkit-mask-image:none;mask-image:none;
  outline:var(--focus-ring);outline-offset:-6px;
}
#videos .vid-gallery .rb-cg-media img{filter:saturate(.92)}
/* 全站卡片圓角 12（IRON 2026-09-13）：DOM renderer 的卡片圓角由 circular-gallery.js 以 inline 5% 寫入，這裡覆寫 */
#videos .vid-gallery .rb-cg-media{border-radius:12px !important}

/* 中央卡的播放鈕：40px #CFE6A6 圓，位於影像 left 20／bottom 20（切換時淡出） */
#videos .vid-play{
  position:absolute;z-index:2;
  left:calc(50% - var(--vid-card-w, 600px) / 2 + 20px);
  top:calc(var(--vid-pad-t, 16px) + var(--vid-card-h, 337.5px) - 20px - 40px);
  width:40px;height:40px;margin:0;border-radius:50%;
  display:grid;place-items:center;pointer-events:none;
  color:var(--vid-ink);
  background:#CFE6A6;
  box-shadow:0 1.667px 5.833px rgba(15,31,16,.14);
  transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
#videos .vid-play svg{width:20px;height:20px}
#videos .vid-stage.is-moving .vid-play{opacity:0;transform:scale(.9)}

/* ---------- 目前影片說明（卡片下方 32px，寬＝卡寬，對齊卡片左緣） ---------- */
#videos .vid-caption{
  position:relative;z-index:3;   /* 與舞台下方預留 pad 重疊，疊在上面 */
  width:min(var(--vid-card-w, 600px), 100%);
  margin:calc(32px - var(--vid-pad-b, 90px)) auto 0;
}
#videos .vid-caption__text{display:flex;flex-direction:column;gap:13px}
#videos .vid-caption__meta{
  margin:0;min-height:16.8px;
  font-family:var(--font-tc);font-size:12px;line-height:16.8px;font-weight:400;letter-spacing:0;text-transform:uppercase;
  color:var(--vid-ink-2);
}
#videos .vid-caption__title{
  margin:0;
  font-family:var(--font-tc);font-size:30px;line-height:38.4px;font-weight:500;letter-spacing:-.3px;color:var(--vid-ink);
  text-wrap:balance;
}
#videos .vid-caption__desc{
  margin:0;
  font-family:var(--font-tc);font-size:17px;line-height:29.24px;font-weight:400;color:var(--vid-ink-2);
  text-wrap:pretty;
}
/* 文字播放鈕：Figma 沒有，視覺隱藏；鍵盤聚焦時浮現在說明列右上 */
#videos .vid-caption__play{
  position:absolute;right:0;top:0;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  font-family:var(--font-tc);font-size:14px;line-height:20px;color:var(--vid-ink);cursor:pointer;
}
#videos .vid-caption__play:focus-visible{
  width:auto;height:auto;margin:0;padding:6px 12px;overflow:visible;clip:auto;
  background:var(--paper);border-radius:12px;outline:var(--focus-ring);outline-offset:2px;
}

/* ---------- 無 JS 的後備清單（JS 啟用後隱藏） ---------- */
#videos .vid-list{
  margin-top:64px;
  display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:40px 24px;
}
#videos.is-enhanced .vid-list{display:none}
#videos .vid-item__link{display:flex;flex-direction:column;gap:10px}
#videos .vid-item__img{
  width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;
  border-radius:var(--radius-img);background:var(--paper-2);margin-bottom:6px;
}
#videos .vid-item__meta{font-size:var(--fs-mono);line-height:var(--lh-mono);color:var(--ink-2)}
#videos .vid-item__title{font-family:var(--font-tc);font-size:var(--fs-h4);line-height:1.25;font-weight:500}
#videos .vid-item__desc{font-family:var(--font-tc);font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-2)}
#videos .vid-item__link:focus-visible{outline:var(--focus-ring);outline-offset:4px}

/* ---------- Lightbox ---------- */
#videos-lightbox{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:center;padding:24px;
  opacity:0;transition:opacity var(--dur-1) var(--ease-out);
}
#videos-lightbox[hidden]{display:none}
#videos-lightbox.is-open{opacity:1}
#videos-lightbox .vlb__backdrop{
  position:absolute;inset:0;background:rgba(15,31,16,.9);cursor:pointer;
}
#videos-lightbox .vlb__sentinel{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}
#videos-lightbox .vlb__panel{
  position:relative;
  width:min(1120px, 100%, calc((100vh - 200px) * 16 / 9));
  color:var(--on-dark);
  transform:translateY(16px) scale(.985);
  transition:transform var(--dur-2) var(--ease-out);
}
#videos-lightbox.is-open .vlb__panel{transform:none}
#videos-lightbox .vlb__bar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:16px;
}
#videos-lightbox .vlb__meta{font-size:13px;color:var(--on-dark-2);margin-right:auto}
#videos-lightbox .vlb__ext{color:var(--on-dark-2);font-size:13px}
#videos-lightbox .vlb__ext{transition:color var(--dur-1) var(--ease-out)}
@media (hover:hover) and (pointer:fine){#videos-lightbox .vlb__ext:hover{color:var(--on-dark)}}
#videos-lightbox .vlb__ext svg{width:14px;height:14px}

#videos-lightbox .vlb__ext:focus-visible svg{transform:translate(var(--nudge),calc(var(--nudge) * -1))}
@media (hover:hover) and (pointer:fine){#videos-lightbox .vlb__ext:hover svg{transform:translate(var(--nudge),calc(var(--nudge) * -1))}}
#videos-lightbox .vlb__ext:focus-visible{outline:2px solid var(--accent-on-dark);outline-offset:3px}
#videos-lightbox .vlb__close{
  flex:0 0 44px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;color:var(--on-dark);
  box-shadow:inset 0 0 0 1px rgba(244,239,230,.32);
  transition:background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
#videos-lightbox .vlb__close svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){#videos-lightbox .vlb__close:hover{background:var(--accent-on-dark);color:var(--forest);box-shadow:none}}
#videos-lightbox .vlb__close:active{transform:scale(.94);transition-duration:.08s}
#videos-lightbox .vlb__close:focus-visible{outline:2px solid var(--accent-on-dark);outline-offset:3px}
#videos-lightbox .vlb__frame{
  position:relative;aspect-ratio:16 / 9;width:100%;
  background:#000;border-radius:var(--radius-img);overflow:hidden;
}
#videos-lightbox .vlb__frame iframe,
#videos-lightbox .vlb__frame video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
#videos-lightbox .vlb__frame iframe:focus-visible,
#videos-lightbox .vlb__frame video:focus-visible{outline:2px solid var(--accent-on-dark);outline-offset:-2px}
#videos-lightbox .vlb__title{
  margin-top:18px;
  font-family:var(--font-tc);font-size:var(--fs-h4);line-height:1.25;font-weight:500;color:var(--on-dark);
}

/* ---------- RWD ---------- */
@media (max-width:1100px){
  /* 卡寬約 52vw、平面 swipe（videos.js） */
  #videos{--vid-x:var(--gutter);padding-block:calc(var(--nav-h) + 32px) 96px}
  #videos .vid-title__tc{font-size:48px;letter-spacing:-1.2px}
}
@media (max-width:640px){
  /* 卡寬約 84vw；張數與左右鈕由 videos.js 搬到輪播下方（.vid-mctrl），標題列只留標題 */
  #videos{padding-block:calc(var(--nav-h) + 24px) 72px}
  #videos .vid-head{padding-bottom:24px}
  #videos .vid-aside{display:none}
  #videos .vid-title__en{font-size:12px;line-height:24px}
  #videos .vid-title__tc{font-size:36px;letter-spacing:-.8px}
  #videos .vid-stage{margin-top:calc(32px - var(--vid-pad-t, 8px))}
  #videos .vid-play{left:calc(50% - var(--vid-card-w, 328px) / 2 + 12px);top:calc(var(--vid-pad-t, 8px) + var(--vid-card-h, 184px) - 12px - 40px)}
  #videos .vid-caption{margin-top:24px;width:var(--vid-card-w, 100%);max-width:100%}
  #videos .vid-caption__text{gap:10px}
  #videos .vid-caption__title{font-size:24px;line-height:32px;letter-spacing:-.24px}
  #videos .vid-caption__desc{font-size:15px;line-height:25.5px}
  #videos-lightbox{padding:16px}
  #videos-lightbox .vlb__panel{width:100%}
}

@media (max-height:500px){
  #videos-lightbox{padding:8px 16px}
  #videos-lightbox .vlb__panel{width:min(100%,calc((100vh - 76px) * 16 / 9))}
  #videos-lightbox .vlb__bar{margin-bottom:8px}
  #videos-lightbox .vlb__title{display:none}
}

@media (prefers-reduced-motion:reduce){
  #videos .vid-play,
  #videos-lightbox,
  #videos-lightbox .vlb__panel,
  #videos-lightbox .vlb__close{transition:none}
  #videos-lightbox .vlb__close:active{transform:none}
  #videos-lightbox .vlb__panel{transform:none}
}

/* IRON 2026-09-14：左右箭頭 hover 時底變深色、箭頭本身要變白 */
@media (hover:hover) and (pointer:fine){
  #videos .vid-ctrl:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
  #videos .vid-ctrl:hover :is(svg,svg *){stroke:var(--white)}
}