/* ==========================================
   共用元件：圖片檢視燈箱（js/lightbox.js 的樣式）
   ------------------------------------------
   由活動相簿、首頁相簿輪播、公會組織圖共用。
   ⚠️ 不併進 style.css：style.css 是並行施工的熱點檔，而燈箱自成一格。
   🔴 尺寸用 rem，跟著文字大小切換一起長（工具列按鈕是操作用的目標）。
      唯一的例外是 z-index 與 1px 邊框。
   ========================================== */

/* 燈箱開啟時鎖住背景捲動。
   ⚠️ 用 overflow: hidden 而不是 position: fixed：fixed 會讓頁面跳回頂端，
      關閉燈箱後使用者得重新找回原本看到哪裡。 */
body.lb-open {
  overflow: hidden;
}

.lb {
  position: fixed;
  inset: 0;
  /* 比 header 的 50 高，也要高過 SweetAlert2 的 1060 */
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.92);
  padding: 4rem 1rem 5rem;
}

/* ── 工具列（右上）── */
.lb-toolbar {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  z-index: 1;
}

.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 2.75rem ＝ 49.5px，高於 44px 的觸控下限（使用者以長輩為主） */
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  background-color: rgba(0, 0, 0, 0.45);
  color: #FFFFFF;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}

.lb-btn-text {
  font-size: 0.9375rem;
}

.lb-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* hover 沿用全站標準：金色漸層 ＋ 深字（見 style.css 七之二節）。
   ⚠️ 白字配金底只有 2.11:1，一定要用 --color-on-gold。 */
.lb-btn:hover,
.lb-btn:focus-visible {
  background-image: linear-gradient(135deg, var(--gold-from), var(--gold-to));
  border-color: var(--gold-from);
  color: var(--color-on-gold);
}

.lb-scale {
  /* 等寬數字：100% → 150% 時寬度不變，兩顆按鈕不會左右跳動 */
  font-variant-numeric: tabular-nums;
  min-width: 3.5rem;
  text-align: center;
  color: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ── 上一張／下一張 ── */
.lb-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.45);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}

.lb-prev {
  left: 0.75rem;
}

.lb-next {
  right: 0.75rem;
}

.lb-nav svg {
  width: 1.5rem;
  height: 1.5rem;
}

.lb-nav:hover,
.lb-nav:focus-visible {
  background-image: linear-gradient(135deg, var(--gold-from), var(--gold-to));
  border-color: var(--gold-from);
  color: var(--color-on-gold);
}

/* ── 圖片舞台 ── */
/* 🔴 **`align-self: stretch` ＋ `min-height: 0` 不可省，少了就會裁圖**
   （客戶 2026-08-25：「燈箱應該完整呈現照片比例，不應該固定比例讓多數照片被裁切」）。

   原本只寫 `max-height: 100%`，症狀是**橫幅照片上下被切掉一大塊**
   （實測 `newhero-06` 在 1920 視窗下：舞台 1884×716，而 `<img>` 是 1884×**1060**
   ——超出的 344px 被下面那行 `overflow: hidden` 吃掉了）。

   🔴 根因不是 `object-fit`，而是**百分比的 `max-height` 沒有解析**：
   `.lb-stage` 自己沒有明確高度（只有 `max-height`，實際高度由內容決定），
   於是子元素的 `max-height: 100%` 形成循環依賴、被當成 `none`，
   `<img>` 就照原生比例撐到全寬、高度爆出舞台。
   ⚠️ **`object-fit: contain` 在這種情況下幫不上忙**：contain 是「在已知的框裡怎麼擺」，
      而這裡框本身就被撐大了——**框跟圖一樣大，contain 沒有東西可以做**。
      這也是為什麼「CSS 看起來完全正確」卻還是裁圖。

   ✅ `align-self: stretch` 讓舞台取得**這條 flex 線的完整高度**（＝ `.lb` 的內容高，
      是明確值），`max-height: 100%` 才有東西可以解析。
   ⚠️ `min-height: 0` 是 flex 項目的老坑：預設 `min-height: auto` 不允許縮到內容以下，
      沒有它的話高度仍會被圖片頂開。
   🔴 **驗收要量數字，不要只看畫面**：`.lb-img` 的 `getBoundingClientRect().height`
      必須 ≤ `.lb-stage` 的高度，且寬高比等於 `naturalWidth/naturalHeight`。
      直式照片、超寬照片各驗一張——**橫幅照片在寬螢幕上剛好不會裁，只看那一種會以為好了。** */
.lb-stage {
  /* overflow: hidden 讓放大後超出的部分被裁掉，而不是把 overlay 撐出捲軸 */
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
  align-self: stretch;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-img {
  max-width: 100%;
  max-height: 100%;
  /* object-fit: contain 保持比例，整張看得到（燈箱的目的就是看完整的圖） */
  object-fit: contain;
  /* 縮放與位移由 JS 寫進 style.transform，這裡只給過場 */
  transition: transform 0.18s ease-out;
  /* 未放大時不接手拖曳手勢，讓「點背景關閉」還能作用 */
  touch-action: none;
  user-select: none;
}

.lb.is-zoomed .lb-img {
  cursor: grab;
  /* 拖曳時不要有過場，否則跟手會有延遲感 */
  transition: none;
}

.lb.is-zoomed .lb-img:active {
  cursor: grabbing;
}

/* ── 說明與頁數 ── */
.lb-caption,
.lb-counter {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  max-width: min(90%, 40rem);
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.lb-caption {
  bottom: 2.75rem;
}

.lb-counter {
  bottom: 1rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.7);
}

/* 窄螢幕：左右箭頭移到底部並排，不要壓在圖片上
   （與首頁 hero 輪播在手機的處理一致） */
@media (max-width: 639px) {
  .lb {
    padding: 4rem 0.5rem 7rem;
  }

  .lb-nav {
    top: auto;
    bottom: 3.5rem;
    transform: none;
  }

  .lb-prev {
    left: calc(50% - 3.5rem);
  }

  .lb-next {
    right: calc(50% - 3.5rem);
  }

  .lb-caption {
    bottom: 7.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lb-img {
    transition: none;
  }
}