/* 新版首頁（Task #46846）的「膠水」樣式。
 *
 * 版面本體來自設計端維護的 ui-kit.css（_Layout.cshtml 已全站載入）＋ swiper-bundle.min.css，
 * 這裡只放「ui-kit 沒有、而 2026 串接時才需要」的最小補丁。不要在這裡重寫或覆寫元件樣式——
 * 設計端改 ui-kit 時這裡會默默失效或跟它打架。
 *
 * 「Where Edge AI Runs」區塊沿用 2015 既有的 .homepage-solutions 版面（2026-09-01 需求方確認
 * 仿照 2015：只有標題 + 連結，沒有每張卡的圖與敘述），樣式仍在 home/homepage.css，不搬過來。
 */

/* ── KV Hero：Swiper 初始化前的防塌陷／防 CLS ────────────────────────────────
 * .home-hero-swiper 不在 ui-kit 骨架屏的名單裡（那份只涵蓋 .ui-carousel-card /
 * .ui-carousel-offset / .ui-carousel-focus / .kv-banner-swiper），初始化前不會被裁成 320px，
 * 而是靠 .ui-home-hero__slide 自己的 min-height 撐住——這正是我們要的：
 * 伺服器端只輸出「第一張」slide，未初始化的 .swiper-wrapper 就是普通 flex 容器，
 * 單一 slide 會正常滿版顯示，LCP 圖片在 HTML 裡就看得到，不必等 JS（見 home/index.js 註解）。
 *
 * 下面兩條是保險：JS 已經把其餘 slide 塞進來、但 Swiper 還沒 init 完的那一瞬間，
 * 不要讓多張 slide 同時堆疊出來造成 CLS。
 */
#homepage-2026 .home-hero-swiper:not(.swiper-initialized) {
    overflow: hidden;
}

#homepage-2026 .home-hero-swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none;
}

/* 只有一張 banner 時導覽列沒有意義（index.js 也會關掉 loop/drag） */
#homepage-2026 .ui-home-hero.is-single .ui-home-hero__navigation,
#homepage-2026 .ui-home-hero.is-single .controls-wrap {
    display: none;
}

/* ui-kit 只對 .ui-home-hero__media 底下的 img/video/iframe 設 width/height:100%。
 * 我們用 <picture> 包住 <img> 做 RWD 來源切換（新版三段式 1920/1080/580），
 * <picture> 本身是 inline 元素、高度會塌成 auto，裡面 img 的 height:100% 就沒有解析基準——
 * 補這一條讓 <picture> 撐滿 media 區塊，img 的 object-fit: cover 才會生效。 */
#homepage-2026 .ui-home-hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* 影片 slide 用 preload="none"（見 home/index.js 的「分段加載」說明），
 * 還沒開始下載前 <video> 會是透明/黑底，給一個跟舊版 banner 一致的灰底打底，
 * 搭配 poster（同一張 banner 圖）避免切到影片那張時閃一下黑。 */
#homepage-2026 .ui-home-hero__media video {
    background: #f2f2f2;
}

/* ── Case Study bento：沒有 Featured Image 的項目 ──────────────────────────
 * 設計稿 item-1 / item-2 有圖、item-3~5 純文字。實際 CMS 資料不保證第 1、2 篇就有
 * Featured Image，沒有圖時直接不輸出 .ui-bento-item__media（見 Index.cshtml），
 * 這條只是確保少了 media 區塊時內容區仍然撐滿整格，不會塌成一條。 */
#homepage-2026 .ui-bento-item:not(:has(.ui-bento-item__media)) .ui-bento-item__content {
    height: 100%;
}


/* ── Where Edge AI Runs：整張卡片可點擊（ui-kit 上游缺陷的暫時修補）──────────
 * 症狀：Solutions 的 10 張卡（1 張 overlay-bottom + 9 張 overlay-left）點下去沒反應。
 *
 * 成因：ui-kit.css 裡 .ui-card__link 與 overlay 卡的 .ui-card__content **同樣都是
 * z-index: 1**（都取 --z-index-base），而 content 在 DOM 順序上比 link 後面，
 * 於是永遠疊在 link 上層，整張卡的點擊都被 content 吃掉，link 形同虛設。
 * 2026-09-02 實測 elementFromPoint 落在 h3.item__title 而不是 a.ui-card__link。
 *
 * ⚠️ 這不是我們串接串壞的：設計稿 demo（design/ui-kit/develop/demo/project-homepage/
 * homepage.html）本身也是 contentZ=1 / linkZ=1，同樣點不動——屬 ui-kit 上游問題，
 * 已回報設計端。等 ui-kit 修好（讓 link 疊在 content 之上）後，整段可以直接刪掉。
 *
 * 為什麼用 pointer-events 而不是把 link 的 z-index 拉高：大卡 overlay-bottom 的
 * content 裡有「Discover More」按鈕，link 一旦蓋在上面，那顆按鈕就變成點不到。
 * 這裡讓 content 整片不吃點擊、再把它裡面真正要點的元素放行，兩者都能點。
 * 副作用：overlay 卡的文字無法用滑鼠選取——這類卡片本來就是整張當連結用，可接受。 */
#homepage-2026 .ui-card--overlay-top > .ui-card__content,
#homepage-2026 .ui-card--overlay-bottom > .ui-card__content,
#homepage-2026 .ui-card--overlay-left > .ui-card__content,
#homepage-2026 .ui-card--overlay-right > .ui-card__content {
    pointer-events: none;
}

#homepage-2026 .ui-card--overlay-top > .ui-card__content :is(a, button),
#homepage-2026 .ui-card--overlay-bottom > .ui-card__content :is(a, button),
#homepage-2026 .ui-card--overlay-left > .ui-card__content :is(a, button),
#homepage-2026 .ui-card--overlay-right > .ui-card__content :is(a, button) {
    pointer-events: auto;
}

#homepage-2026 [data-home-section][hidden],
#homepage-2026 .home-news--single-page .controls-wrap,
#homepage-2026 .home-news--single-page .swiper-pagination {
    display: none !important;
}