/* ============================================================
   Logo Rotator — 三個 logo 輪播（橫式版面）

   2026-11-04 重製說明：
     使用者提供 3 張品牌圖（JPEG，997×566，深藍底 #1c264a）。
     處理原則：**只裁切、不去背、不變形**。

     原圖為「圖示在上＋文字在下」的直式堆疊（第1、2張）與
     「純文字」橫式單行（第3張）。為塞進原本 64px 的 navbar 且
     維持原本視覺大小，預處理階段重組為**橫式版面**：

       · 裁掉多餘深藍邊（去背 = 破壞原圖外觀，需求明講不要）
       · 依「主文字帶高度」縮放，三張中文字高統一為 28px
         （＝舊版 logo-*-full.png 的文字高度，維持原本視覺大小）
       · 重組為「圖示（左）＋主文字（右上）＋副標語（右下）」
         第3張原圖無圖示 → 沿用第1張的圖示（同品牌），維持版面一致
       · 統一畫布 179×46，內容水平置中 → 輪播切換時完全不跳動

     輸出：public/img/logo-rot-1/2/3.png（179×46，各約 12–23KB）

   渲染：
     · object-fit: contain —— 保持原始比例，不拉伸不裁切
     · 容器尺寸 = 圖片原始尺寸 → 三張皆為 179×46，無跳動
   ============================================================ */

.logo-rotator {
  position: relative;
  display: block;
  width: 179px;               /* = logo-rot-*.png 原始寬度 */
  height: 46px;               /* = logo-rot-*.png 原始高度 */
  overflow: hidden;
  flex: 0 0 auto;             /* 關鍵：不被 flex 容器壓扁 */
  max-width: 100%;
}

/* 圖檔本身為「白色圖案 + 透明底」，因此不論容器底色為何都能融色。
   預設不設底色（navbar / 頁尾 / 後台側欄皆為深藍，透明即可完美融合）。
   只有淺色容器才需要補一塊深藍底，見下方 .login-card 規則。 */


.logo-rotator .logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;        /* 保持原比例，不拉伸不裁切 */
  object-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  display: block;
}

.logo-rotator .logo-img.is-active {
  opacity: 1;
}

/* 頁尾版本
   注意：style.css 另有 `footer .footer-logo-mark`（特異性 0,2,0），
   會壓過這裡的 `.footer-logo-mark`（0,1,0），所以選擇器必須同樣
   帶 footer 前綴才能贏。 */
footer .footer-logo-mark {
  width: 179px;
  height: 46px;
  flex: 0 0 auto;
  max-width: 100%;
}

/* 後台側邊欄 / 登入頁 */
.admin-sidebar .logo-rotator,
.login-card .logo-rotator {
  width: 156px;
  height: 40px;
  flex: 0 0 auto;
}

/* 登入卡片是白底（--card），logo 為白色圖案，必須補一塊深藍底才看得見。
   底色取 var(--navy)，與後台側欄、頁尾、navbar 完全一致。 */
.login-card .logo-rotator {
  background: var(--navy);
  border-radius: 8px;
}

/* 頁首 logo 連結已不再承載文字，靠圖片 */
.navbar .logo {
  gap: 0;
}

/* 行動版 navbar 較矮，logo 等比縮小但仍等高不跳動 */
@media (max-width: 768px) {
  .logo-rotator {
    width: 143px;
    height: 37px;
  }
  footer .footer-logo-mark {
    width: 143px;
    height: 37px;
  }
  .admin-sidebar .logo-rotator,
  .login-card .logo-rotator {
    width: 130px;
    height: 33px;
  }
}

/* 尊重「減少動態效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  .logo-rotator .logo-img {
    transition: none;
  }
}