/*
 * perf.css — 第二階段「效能優化」（2026-10-29）
 * 放在 style.css 之後，只做效能相關的覆寫。
 */

/* 輪播：owl 初始化前整個 .owl-carousel 是 display:none，載入後突然撐開 → 版面大跳動（CLS），
   首張 Banner 也要等 JS 才出現（LCP 慢）。改成初始化前先顯示第一張。 */
.banner__carousel:not(.owl-loaded) {
  display: block;
}
.banner__carousel:not(.owl-loaded) > .banner__item:not(:first-child) {
  display: none;
}

/* 其他輪播（首頁新聞、影片、頁尾友站）：初始化前先排成跟 owl 設定相同的欄數與間距，
   初始化後高度不變，頁尾不會被往下推。欄數／間距對照 public_scripts.php 的 owlCarousel 設定。 */
.news__carousel:not(.owl-loaded),
.video__carousel:not(.owl-loaded),
.footer-website__carousel:not(.owl-loaded) {
  display: flex;
  overflow: hidden;
}
.news__carousel:not(.owl-loaded) > *,
.video__carousel:not(.owl-loaded) > * {
  flex: 0 0 100%;
  margin-right: 15px;
}
.footer-website__carousel:not(.owl-loaded) > * {
  flex: 0 0 calc((100% - 10px) / 2);
  margin-right: 10px;
}
@media (min-width: 768px) {
  .news__carousel:not(.owl-loaded) > *,
  .video__carousel:not(.owl-loaded) > * {
    flex-basis: calc((100% - 15px) / 2);
  }
  .footer-website__carousel:not(.owl-loaded) > * {
    flex-basis: calc((100% - 30px) / 4);
  }
}
@media (min-width: 1200px) {
  .news__carousel:not(.owl-loaded) > * {
    flex-basis: calc((100% - 30px) / 3);
  }
  .video__carousel:not(.owl-loaded) > * {
    flex-basis: calc((100% - 45px) / 4);
  }
  .footer-website__carousel:not(.owl-loaded) > * {
    flex-basis: calc((100% - 50px) / 6);
  }
}

/* 各單元首頁頁首大圖：手機用 828 寬、桌機用 1920 寬的 WebP（cover_bg() 產生變數） */
.section-cover[style*="--cover-s"] {
  background-image: var(--cover-s);
}
@media (min-width: 768px) {
  .section-cover[style*="--cover-s"] {
    background-image: var(--cover-l);
  }
}

/* 內文圖：lazy_images() 補了寬高（data-dim），用 CSS 讓它依容器縮放、維持比例 */
img[data-dim] {
  max-width: 100%;
  height: auto;
}

/* 有寫 width/height 屬性的圖，仍依 CSS 的 max-width 縮放、維持比例 */
.navbar-brand img,
.footer-contact__logo img,
.footer-app__link img {
  height: auto;
}

/* 導航選單縮圖：選單平常用 visibility:hidden 藏著，圖仍會在首屏下載（11 張約 300KB，跟首屏圖搶頻寬）。
   選單沒開、頁面也還沒載完（.nav-img-ready 由 public_scripts 在 load 後加上）就先不載縮圖。 */
.navbar-collapse:not(.is-open):not(.nav-img-ready) .nav-thumb__image {
  background-image: none !important;
}

/* 首頁影片區背景：原 JPG 295KB → WebP（手機 828、桌機 1920） */
.home-section.--video {
  background-image: url(../img/home/_w828/bg_video.jpg.webp);
}
@media (min-width: 768px) {
  .home-section.--video {
    background-image: url(../img/home/_w1920/bg_video.jpg.webp);
  }
}

/* Material Icons：字型還沒到時，chevron_right 這類名稱會先以一般文字顯示（很寬、會換行），
   字型到了才縮回圖示 → 下方區塊被推動（首頁 CLS 0.098 的來源）。先固定成 1 字寬。 */
.material-icons,
.material-icons-outlined {
  display: inline-block;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
}