/* ==========================================
   gallery.html 專屬樣式
   ------------------------------------------
   活動花絮是兩層結構，兩層都在同一頁（見 gallery.html <main> 開頭的說明）：
     第一層 #gallery-albums-view  相簿列表（.album-*）
     第二層 #gallery-photos-view  相簿內頁的照片牆（.gallery-grid / .gallery-photo）
   ========================================== */
/* ==========================================
   內頁標頭
   ------------------------------------------
   背景圖寫在 CSS 而不是 inline style（2026-08-18 從 inline style 收進來；
   全站 11 個 .page-hero 現在一律走 CSS，沒有例外）。
   只寫 background-image：background-size: cover ＋ 置中由 .page-hero 提供，
   構圖靠上傳前裁好，不在 CSS 寫死縮放與位移。
   ⚠️ 本頁已於 2026-08-18 換成專屬照片 `gallery-hero.jpg`（PM 指定），
      所以 S10（2026-08-26）換通用圖時**本頁刻意不受影響**；
      共用 `page-hero.jpg` 的是 contact／downloads／links／member-center／privacy／sitemap
      **六頁**（舊註解寫「四頁」是漏了 downloads 與 privacy）。
   ========================================== */
.gallery-hero {
  background-image: url('../../images/hero/gallery-hero.jpg');
}

.gallery-section {
  padding: 64px var(--page-gutter) 96px;
  /* 分頁連結帶 #gallery-albums-view／#gallery-photos-view 跳頁後停在列表，要讓出 sticky header 的高度 */
  scroll-margin-top: var(--header-stack);
}

/* ⚠️ 原本這裡有一條 `.gallery-section[hidden] { display: none }`，2026-08-13 刪除：
   已由 `style.css` Base Reset 的全站 `[hidden][hidden]` 涵蓋（見 CLAUDE.md 五節 2-2）。 */

.gallery-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.gallery-breadcrumb {
  margin-bottom: 24px;
}

/* 相簿名稱可能很長，麵包屑的最後一段要能斷行，不然會把整列推到溢出 */
.gallery-breadcrumb .breadcrumb-current {
  overflow-wrap: anywhere;
}

/* ==========================================
   AA1（客戶 2026-09-03）：分類頁籤 ＋ 搜尋 ＋ 日期區間
   ------------------------------------------
   全部沿用共用元件，這裡只放「本頁必要的覆寫」，不重做樣式。
   ⚠️ `.filter-date*` 那一組樣式在 **`style.css` 的「共用元件：日期區間篩選」**
      （AA1 收工時由 `news.css` 搬過去的，本頁與 `news.html` 共用同一份）。
      🔴 **不要在這裡複製一份**——那組值是實測對齊 `.filter-search input` 出來的。
   ========================================== */

/* 分類按鈕靠左，不置中（與 news.html 一致）。
   `.pill-tabs` 共用元件預設 justify-content: center，用本頁 id 覆寫、不動共用元件。

   🔴 `margin-bottom: 40px` 是**與 `news.html` 對齊的值**（`news.css` 的
      `.news-list-inner .pill-tabs` 就是 40px）——AA1 剛做完時這裡是 0，
      **頁籤與下方搜尋／日期列直接貼在一起**（PM 2026-09-03 回報）。
   ⚠️ 這個間距**刻意放在頁面層、不放進 `.pill-tabs` 共用元件**：
      同一個元件在關於本會、首頁本會會務、首頁最新課程也有消費端，
      那幾處下方接的不是篩選列，加共用的下邊距會一次動到四個地方。 */
#gallery-tabs {
  justify-content: flex-start;
  margin-bottom: 40px;
}

/* 🔴 小尺寸要橫向滑動，但**只掛 `.scroll-tabs` 沒有用**：
      `.pill-tabs`（style.css）自己宣告了 `flex-wrap: wrap`，
      而 `.scroll-tabs` **根本沒有宣告 flex-wrap**（它靠預設的 nowrap）。
      兩者特異性相同 (0,1,0)、`.pill-tabs` 排在後面 → wrap 贏，
      **掛了 `.scroll-tabs` 也不會橫捲，只會多一個誤導的 class**。
      這與 news.css 的 #news-tabs 是同一個坑的第二個實例。 */
#gallery-tabs {
  flex-wrap: nowrap;
}

/* ≥1280 還原成不捲（四個分類排得下，不需要橫捲），
   否則桌機會多出捲軸留白。
   🔴 用 `overflow: visible`（**兩軸**）不是只寫 `overflow-x: visible`：
      `.scroll-tabs` 另外有 `overflow-y: hidden`，依 CSS 規範
      **一軸 visible 搭另一軸非 visible 時，visible 會被算成 auto**
      ——只改 x 的話算出值仍是 `auto`（實測過）。 */
@media (min-width: 1280px) {
  #gallery-tabs {
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
  }
}

/* 🔴 共用元件 .filter-bar-inner 在 768px 起是 flex-direction: row 且沒有 flex-wrap，
      日期組會被硬塞進搜尋框旁邊、把搜尋框壓到只剩一百多 px。
      只在本頁容器上補 wrap，讓日期組在 768–1023 自己換到下一列（1024 起才並排）。
      ⚠️ 是覆寫本頁容器，不是改 style.css。（做法與 news.css 相同。） */
.gallery-inner .filter-bar-inner {
  flex-wrap: wrap;
}

/* 篩選後 0 筆的空狀態與相簿格線之間留白（.course-list-empty 本身不帶外距）。
   ⚠️ 格線本身有 margin-bottom: 40px，這裡只補上方距離為 0 的情況不必處理。 */
.gallery-inner .course-list-empty {
  margin-bottom: 40px;
}

/* ==========================================
   第一層：相簿列表
   ------------------------------------------
   🔴 grid 軌道用 minmax(0, 1fr)，不可以只寫 1fr。
      1fr ＝ minmax(auto, 1fr)，auto 的下限是項目的 min-content；
      卡片內有長串不可斷的相簿名稱時，軌道會撐得比容器寬，整頁橫向溢出。
      （同一個坑在 style.css 的 .courses-grid 上有完整記錄。）
   ========================================== */
.album-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.album-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out, transform 0.25s ease-out;
}

.album-card:hover,
.album-card:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* 🔴 封面統一 **16:9**（PM 2026-09-03：「相簿封面照比例可參考首頁的成為專屬夥伴輪播」）
   ——與 `index.css` 的 `.gallery-item` 同一個值，全站相簿類的照片框現在是一致的。
   ⚠️ 原本是 `4 / 3`。構圖靠上傳前裁切（只用 `object-fit: cover` ＋ 預設置中，
   不寫死 `scale()` ＋ `object-position`——那是針對某一張圖算出來的值，換圖就錯）。
   ✅ **這一改是零裁切，而且比原本更好**（2026-09-03 實測，不是推測）：
   相簿用的就是 `images/hero/newhero-01〜06.jpg`，**六張全是 16:9**
   （1465×824／1052×592／2000×1125 ×4，比值 1.777–1.778）。
   🔴 **原本的 `4 / 3` 框才是在裁**：框比 1.333 < 圖比 1.778，`cover` 會把**左右兩側各裁掉一截**。
   改成 16/9 之後框比 ＝ 圖比，**一邊都不裁**。
   ⚠️ 判準與 `.gallery-item` 相同：**換圖後量一次 `naturalWidth/naturalHeight`，
   不等於 1.778 就會開始裁，而且不會報錯、只是默默少一塊**
   ——依「構圖在上傳前裁好」的規矩，優先把新圖裁成 16:9，不要回頭改這個框。 */
.album-card-cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

/* 後台還沒放封面也沒放照片的相簿：同尺寸的灰底佔位，放一個圖示，版面不會塌 */
.album-card-cover.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-alt);
  color: var(--color-muted);
}

.album-card-cover.is-empty svg {
  width: 40px;
  height: 40px;
}

.album-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-out;
}

.album-card:hover .album-card-cover img {
  transform: scale(1.05);
}

.album-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px 20px;
}

/* AA2（客戶 2026-09-03）：分類標籤。
   🔴 外觀完全沿用消息列的共用元件 `.news-badge`（四色循環 is-tone-0〜3 也在 style.css），
      這裡只補「在直向排列的卡片內文裡不要被拉滿整列」這一件事。
   ⚠️ `.album-card-body` 是 flex column，span 預設會被 stretch 成整列寬，
      看起來像一條色帶而不是標籤——align-self 才是這條規則存在的理由。
   🔴 標籤刻意放在卡片內文（名稱上方），**不壓在封面照上**：
      封面是客戶的活動照，壓字會擋到人（PM 2026-09-03 定案）。
   ⚠️ tone class 由 js/gallery.js 依 ALBUM_CATEGORIES 的位置算出來後補上；
      JS 沒跑時標籤仍在，只是退回 `.news-badge` 的主色紫底白字（不會變成無色標籤）。 */
.album-card-badge {
  align-self: flex-start;
}

/* 超長相簿名稱：最多兩行，超出裁切。
   overflow-wrap 是必要的——沒有空格的長字串（英文全名、連續數字）
   line-clamp 也擋不住，會直接推寬卡片。 */
.album-card-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-heading);
}

.album-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.album-card-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* 圖示用 em 而不是 px：文字放大模式（fs-md／fs-lg）下要跟著字一起變大，
   否則放大後圖示會相對縮小、看起來歪掉 */
.album-card-meta svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .album-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .album-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================
   空狀態
   ========================================== */
.gallery-empty {
  margin: 0;
  padding: 48px 24px;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-alt);
  font-size: 1rem;
  color: var(--color-muted);
  text-align: center;
}

/* 相簿 0 本：用 :has() 判斷「相簿格線裡沒有任何卡片」，不靠 JS。
   ⚠️ 不用 :empty——格線裡有換行與註解，:empty 永遠不成立。
   ⚠️ 不支援 :has() 的舊瀏覽器會維持隱藏（少一句提示，不會破版）。 */
.album-empty {
  display: none;
}

.album-grid:not(:has(.album-card)) ~ .album-empty {
  display: block;
}

/* ==========================================
   第二層：相簿內頁（照片牆）
   ========================================== */
.album-detail-head {
  margin-bottom: 24px;
}

.album-detail-title {
  margin-bottom: 8px;
  font-size: 1.75rem;
  line-height: 1.4;
  color: var(--color-heading);
  overflow-wrap: anywhere;
}

.album-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.album-detail-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.album-detail-meta svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

/* ⚠️ 原本這裡有一條 `.gallery-grid[hidden] { display: none }`，2026-08-13 刪除：
   已由 `style.css` Base Reset 的全站 `[hidden][hidden]` 涵蓋（見 CLAUDE.md 五節 2-2）。 */

/* 🔴 相簿內頁的照片也是 **16:9**（PM 2026-09-03，與封面同一次指示）
   ——原本是 `4 / 3`。理由與注意事項同上方 `.album-card-cover`。 */
.gallery-photo {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: none;
  padding: 0;
  background: none;
}

.gallery-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-out;
}

.gallery-photo:hover img {
  transform: scale(1.05);
}

.album-detail-back {
  margin: 32px 0 0;
  text-align: center;
}

.album-detail-back .btn {
  gap: 8px;
}

.album-detail-back svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .album-detail-title {
    font-size: 2rem;
  }
}

@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}