@charset "utf-8";

html {
    scroll-behavior: smooth;
}

/*Resources Detail Font size*/
.ui-article h1 {
    font-size: 44px;
    line-height: 1.2;
}

.ui-article h2, #material-content h2 {
    font-size: 36px;
    line-height: 1.2;
}

.ui-article h3, #material-content h3 {
    font-size: 22px;
    line-height: 1.3;
}

.ui-article h4, #material-content h4 {
    font-size: 18px;
    line-height: 1.4;
}


/* ========== ui-article（閱讀寬版型，靠左，右側留白） ========== */
.ui-article {
    --ui-article-reading-w: 820px; /* 內文閱讀寬（固定，1024px 以上不壓縮） */
    /* 中間留白 : 右側 Outline = 168 : 372，共同分配 820 以外的剩餘寬度（等比例縮放） */
    --ui-article-gutter-fr: 168fr;
    --ui-article-outline-fr: 372fr;
    max-width: 1360px; /* 820 + 168 + 372 = 總寬 1360 */
}

.ui-article__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-inset-md);
    margin-bottom: var(--space-inset-xl);
}

.ui-article__layout {
    display: grid;
    grid-template-columns: var(--ui-article-reading-w) minmax(0, var(--ui-article-gutter-fr)) minmax(0, var(--ui-article-outline-fr));
    column-gap: 0;
    align-items: start;
}

.ui-article__body {
    grid-column: 1;
    min-width: 0;
    display: flex;
    gap: var(--space-grid);
    flex-direction: column;
}

/* .ui-toc（TOC/Related 側欄）沒有明確指定 grid-column 的話，CSS Grid 的自動排版
   （auto-placement）會把它塞進 .ui-article__body（column 1）後面「下一個空位」——
   也就是 --ui-article-gutter-fr 那個刻意留白的中間欄（168fr），不是它真正該去的
   --ui-article-outline-fr 第三欄（372fr）。結果是 TOC 被硬擠進一個只設計給留白用的
   窄欄，右邊真正該放 TOC 的寬欄反而整個空著——這不是 Overlay 專屬的問題，整頁
   Detail 頁跟 Overlay 共用同一份 CSS，兩邊都會踩到，只是這次盤點 Overlay 版面時
   才發現（2026-08-26）。 */
.ui-toc {
    grid-column: 3;
}

/* ========== ui-key-takeaway ========== */
.ui-key-takeaway {
    position: relative;
    background: var(--color-grey-100);
    border-radius: var(--radius-component);
    padding: var(--space-inset-md);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-inset-xs);
    overflow: hidden;
}

/* ========== Responsive ========== */
@media (max-width: 1024px) {
    .ui-article {
        max-width: none;
    }

    .ui-article__layout {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        row-gap: var(--space-inset-lg);
    }
    /* 單欄：取消多欄版才有的明確軌道指派。.ui-toc 這條一定要跟著重置——
       grid-template-columns 在這個斷點只剩一欄，如果 .ui-toc 還留著桌面版
       的 grid-column: 3，瀏覽器會為了滿足這個不存在的欄位編號，自動生出
       隱性的第 2/3 欄，單欄版面反而會被撐出多餘的空白欄位。 */
    .ui-article__body,
    .ui-toc {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .ui-article h1 {
        font-size: 36px;
    }

    .ui-article h2, #material-content h2 {
        font-size: 26px;
    }

    .ui-article__header {
        margin-bottom: var(--space-inset-md);
    }

        .ui-article__header h1 {
            font-size: 26px;
        }

    .ui-article__layout {
        row-gap: var(--space-inset-md);
    }
}

@media (max-width: 580px) {
    .ui-article__layout {
        row-gap: var(--space-inset-sm);
    }

    .ui-toc__inner {
        margin-bottom: var(--space-inset-sm);
    }
}

#material-content.article-content .is-text-block, #material-content.article-content h2, #material-content.article-content h3, #material-content.article-content h4, #material-content.article-content p, #material-content.article-content ul, #material-content.article-content ol {
    max-width: 636px;
}

/* 真實 CMS 內文用的粗體標籤（span.font-semibold） */
.font-semibold {
    font-weight: 600;
}

/* item__image--contain：16:9 框，圖片吃最長邊等比縮、水平垂直置中（卡片樣式，透明底） */
.item__image--contain {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-component) var(--radius-component) 0 0;
}

    .item__image--contain img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 0;
    }

/* 比照 2015 css/resources_center/advan-resources.css：影片播放器外層 .content-center
   讓 #vd-player 在寬版面時保持置中，不是死 class。 */
#material-content .content-center {
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 580px) {
    #material-content .content-center {
        display: block;
    }
}

/* 錨點跳轉 / scroll-spy 目標避開頂端 */
#material-content h2[id],
#related-product,
#related-stories {
    scroll-margin-top: var(--space-inset-lg);
}

#related-stories {
    margin-top: var(--space-inset-md);
}

    /* 等高：.ui-card-group 沒有加 --2/--3 modifier，卡片是單欄排列（各自獨立一個 grid row），
   CSS Grid/Flex 內建的「同列自動拉齊」在這裡幫不上忙。真正造成高度不一致的原因是部分
   related story 沒有 Featured Image，.ui-card__media 整個不會渲染（見 _DetailArticle.cshtml），
   缺圖的卡片就只剩內文高度，比有圖的卡片矮一截。用固定 min-height 對齊「有圖」卡片的視覺
   高度即可解決，不需要 JS 動態量測（實測值：>768px 為 183px、<=768px 為 135px，對應
   ui-kit.css 的 --ui-card-hr-media 16:9 比例換算，斷點沿用 ui-kit.css 同一組）。*/
    #related-stories .ui-card {
        min-height: 183px;
    }

@media screen and (max-width: 768px) {
    #related-stories .ui-card {
        min-height: 135px;
    }
}


/*CMS style*/
#material-content .row {
    gap: 20px;
}

#material-content ol li, #material-content ul li {
    font-size: var(--font-size-base);
    line-height: 1.5;
    margin: 0 0 5px 15px;
}

/* 影片播放器（16:9）：max-width 依視窗高度限制，讓載入時 H1 兩行也在首屏內
   420px = 播放器上方固定佔用(~240) + H1 兩行(~123) + 間距/呼吸空間 */
#vd-player {
    position: relative;
    width: 100%;
    max-width: min(100%, calc((100vh - 420px) * 16 / 9));
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    border-radius: var(--radius-component);
    overflow: hidden;
    background: var(--color-grey-900);
}

    #vd-player > img,
    #vd-player > iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    #vd-player > img {
        object-fit: cover;
    }

    #vd-player .vd-player__overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-inset-md);
        color: var(--color-white);
    }

/*overlay*/
html.resource-overlay-locked,
html.resource-overlay-locked body {
    overflow: hidden;
}

.resource-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-index-overlay);
    overflow: hidden;
    background: var(--bg-surface);
}

.resource-overlay__scroll {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

    .resource-overlay__scroll button.ui-textlink {
        padding: var(--space-inline-lg);
    }

.resource-overlay__back {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-4);
}

.resource-overlay__state {
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

#resources-app .is-loading--fullpage > .ui-loading__overlay {
    z-index: calc(var(--z-index-overlay) + 1);
}

/* Overlay 版面固定佔用比整頁版少（沒有麵包屑/H1，只有返回按鈕），所以用獨立的
   offset，不是照抄 #vd-player 的 420px。實測 .resource-overlay__back 到 #vd-player
   之間的硬骨架高度約 108px；300px 這個數字比實測值多出約 192px，是刻意留的呼吸
   空間（跟 #vd-player 420px 那條的算法一樣，不是單純的骨架高度總和），2026-08-31
   從 230px 微調成 300px，讓影片區塊不要塞滿整個首屏。 */
#resource-overlay #vd-player {
    max-width: min(100%, calc((100vh - 300px) * 16 / 9));
}

@media (max-width: 580px) {
    .resource-overlay__scroll button.ui-textlink {
        padding: var(--space-inline-md);
    }
}