/* =========================================================
   Appar 擴充樣式
   原則：盡量空 — 所有樣式優先使用 appar 原切版的 *.css。
   只放真正必要的 wagtail-specific bug fix。
   ========================================================= */

/* Wagtail Image 模板標籤 ({% image %}) 一律輸出 <img width="X" height="Y">；
   pure-html 沒寫這兩個屬性，所以 CSS 設 height 或 width 時瀏覽器會用 intrinsic
   ratio 計算另一邊。Wagtail 因為 HTML 屬性鎖死，會把圖壓扁/拉長變形。

   全站強制 width: auto + height: auto，瀏覽器忽略 HTML 屬性、用 intrinsic ratio
   或更高 specificity 的 CSS 規則決定。 */
img { width: auto; height: auto; }

/* cta-btn 在 EN 的長 cta_title 文字下被 flex 擠扁成橢圓（從 200×200 變 155×200）。
   pure 的中文 cta_title 較短不會觸發；補一條防 shrink 規則，讓圓形保持。 */
.cta-btn { flex-shrink: 0; }

/* 往下捲動時隱藏 fixed navbar，往上捲動或接近頂部時再顯示。
   不用 transform：navbar 有 Animate.css slideInDown，animation-fill-mode 會鎖住 transform。 */
.navbar {
  transition: top 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease;
}
.navbar.navbar--hidden {
  top: -7.5rem !important;
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
}
@media (max-width: 992px) {
  .navbar.navbar--hidden {
    top: -6.5rem !important;
  }
}

/* service.css `.service-core-section::after` 是底部 200px 高的 SVG 波浪裝飾，
   position:absolute 蓋住下半部 → 攔截 banner2 下排兩張 service-card 的 hover 事件，
   結果上排 2 張卡 cn-title 有底線動畫、下排 2 張完全沒反應。
   pure 也有這 bug，這裡補一條 pointer-events: none 讓 hover 穿透。 */
.service-core-section::after { pointer-events: none; }

/* CasePage video-preview 改成貼網址（0015 migration）後支援 iframe / <video>。
   case-details.css 原本只寫 `.video-preview img`；補一條讓 YouTube iframe 跟 mp4 video 也撐滿 + 16:9。
   iframe 沒有 intrinsic dimension，aspect-ratio + width:100% 在寬螢幕會撐到 1100×620+ 太大，
   限 max-width 720px 對齊原本圖片版視覺尺寸。 */
.video-preview {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.video-preview iframe,
.video-preview video {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border: 0;
}