@charset "UTF-8";
/*
 * 智慧學習中心 — 首頁課程推廣氣泡
 *
 * 從右上角的學習中心跳轉點垂下、帶尖角指向該跳轉點的推廣氣泡，僅於各系統「首頁」出現。
 *
 * 本檔為共用資產，由 ICampus csproj 的 PostBuildEvent 散播至各站台（與 icon_learning_center.svg 同一份清單）。
 * 刻意不 inline 進各站 _Layout.cshtml：跳轉點共有 19 個渲染點，樣式若跟著複製 19 份，
 * 日後調一次配色就要改 19 個檔案並逐一比對 byte-equivalent。
 *
 * ── 三種視覺變體 ──
 * 學習中心跳轉點在各站有三種形態，所在頂欄底色不同，故氣泡提供兩套配色：
 *   1. ShAll pill（深色 topZone ＋ 半透明白玻璃）      → .lcPromo--light
 *   2. Shinher pill（白底 navTop ＋ 深藍實底藥丸）     → .lcPromo--dark
 *   3. Shinher navItem（藍底 nav ＋ 白底 logo box）    → .lcPromo--light
 *
 * 配色原則：**氣泡底色與所在頂欄相反**。氣泡是浮在頂欄之下、疊在頁面內容之上的卡片，
 * 與頂欄同色會讓兩者黏在一起看不出邊界；相反色則讓它明確「浮出來」。
 * 深藍變體另有一層理由：該站的藥丸本身就是深藍實底，氣泡延續同色才像是從藥丸長出來的。
 *
 * ── 無障礙與互動（依 UI/UX 指引）──
 *   - 主要互動一律 click，不依賴 hover（hover 在觸控裝置無效）。
 *   - 色彩不是唯一指標：紅點之外，跳轉點副標同步改為「本系統有新課程」。
 *   - 文字對比兩套配色皆 ≥ 4.5:1（見各段註解實測值）。
 *   - 紅點為靜態，不使用無限動畫（無限動畫只該用於載入指示）。
 *   - 尊重 prefers-reduced-motion。
 *   - 封面圖具 alt 與載入失敗降級，容器維持 16:9 不塌陷。
 */

/* ───────────────────────── 容器與定位 ───────────────────────── */

/*
 * 錨定容器：由各站台加在跳轉點的「外層」元素上。
 * 必須在外層而非跳轉點自身——藥丸帶 overflow:hidden，氣泡若掛在裡面會被裁掉。
 */
.lcPromoAnchor {
    position: relative;
}

/*
 * navItem 變體的錨定容器：該形態的跳轉點是 nav 列上的 <a>，直接位於 flex 容器內，
 * 額外包一層時必須維持原本的 inline-flex 排列，否則會掉行或破壞垂直置中。
 */
.lcPromoAnchor--inline {
    display: inline-flex;
    align-items: center;
}

.lcPromoBubble {
    /* z-index 取自 Bootstrap 既有層級系統的 popover 值（1070），不使用 9999 之類的任意大值。
       氣泡的語意就是 popover：浮於頁面內容與 navbar 之上，但低於 tooltip。 */
    --lc-promo-z: 1070;
    --lc-promo-width: 320px;

    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: var(--lc-promo-z);
    box-sizing: border-box;
    width: var(--lc-promo-width);
    /* 窄螢幕時收窄並保留左右各 12px 邊距，避免撐出水平捲軸 */
    max-width: calc(100vw - 24px);
    padding: 14px 14px 12px;
    border-radius: 12px;
    text-align: left;
    white-space: normal;
    cursor: default;
}

.lcPromoBubble[hidden] {
    display: none !important;
}

/* 尖角：指向上方的跳轉點。用兩層（外框＋內填）做出帶邊框的三角形。 */
.lcPromoArrow {
    position: absolute;
    top: -8px;
    right: 22px;
    width: 16px;
    height: 8px;
    overflow: hidden;
}

.lcPromoArrow::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
}

/* ───────────────────────── 內容結構 ───────────────────────── */

.lcPromoHeadline {
    margin: 0 22px 10px 0;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .3px;
}

.lcPromoList {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lcPromoItem + .lcPromoItem {
    margin-top: 6px;
}

/* 課程卡：封面在左、標題與簡介在右（與學習中心儀表板的卡片語彙一致） */
.lcPromoCard {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 8px;
    text-decoration: none;
    /* 所有可點擊元素都要有游標與 hover 回饋 */
    cursor: pointer;
    transition: background-color 180ms ease;
}

.lcPromoCard:hover,
.lcPromoCard:focus-visible {
    text-decoration: none;
}

/* 封面：固定 16:9（與學習中心 course-cover-display 的全站比例一致），
   flex-shrink:0 讓長標題不會把封面壓扁 */
.lcPromoCover {
    position: relative;
    flex-shrink: 0;
    width: 96px;
    height: 54px;
    border-radius: 6px;
    overflow: hidden;
}

.lcPromoCover img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * 無封面或載入失敗時的替代區塊：把 img 藏掉，露出容器自身的漸層底。
 * 刻意不放 icon 圖檔——各站台的 SVG 相對路徑不同（RCL 與 Shinher 各站的資料夾深度不一），
 * 一旦引用圖檔，這份共用 CSS 就得為每個站台改一次路徑而分岔。
 * 純漸層已滿足需求：維持 16:9 尺寸、版面不塌陷、不出現瀏覽器預設的破圖圖示。
 */
.lcPromoCover--fallback img {
    display: none;
}

.lcPromoText {
    min-width: 0;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

.lcPromoTitle {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    /* 課名最多兩行，超出以省略號截斷 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 簡介限單行：撐開卡片高度會讓三張卡把氣泡拉得過長 */
.lcPromoDesc {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ───────────────────────── 底部列 ───────────────────────── */

.lcPromoFoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-size: 12px;
}

.lcPromoDismiss {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}

.lcPromoDismiss input {
    width: 13px;
    height: 13px;
    margin: 0;
    cursor: pointer;
}

.lcPromoGo {
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.lcPromoGo:hover {
    text-decoration: underline;
}

/* 關閉鈕：只收起本次，不寫入永久關閉（與「不再顯示」是兩件事） */
.lcPromoClose {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 180ms ease;
}

/* ───────────────────────── 變體：淺色（深色頂欄下方）───────────────────────── */

/*
 * 用於 ShAll pill（深色 topZone）與 Shinher navItem（藍底 nav）。
 * 對比實測：#1A3A5C on #FFFFFF ≈ 11.8:1、#5B6B7E on #FFFFFF ≈ 5.9:1、#1565C0 on #FFFFFF ≈ 5.4:1。
 */
.lcPromo--light {
    background: #FFFFFF;
    border: 1px solid rgba(16, 42, 74, .10);
    box-shadow: 0 12px 32px rgba(0, 20, 50, .22);
}

.lcPromo--light .lcPromoArrow::before {
    background: #FFFFFF;
    border-top: 1px solid rgba(16, 42, 74, .10);
    border-left: 1px solid rgba(16, 42, 74, .10);
}

.lcPromo--light .lcPromoHeadline {
    color: #1A3A5C;
}

.lcPromo--light .lcPromoCard:hover,
.lcPromo--light .lcPromoCard:focus-visible {
    /* 沿用跳轉點 logo box 漸層的終點色，讓 hover 態與既有視覺同一家族 */
    background-color: #F1F6FD;
}

.lcPromo--light .lcPromoCover {
    background: linear-gradient(135deg, #FFFFFF 0%, #DCEBFB 100%);
}

.lcPromo--light .lcPromoTitle {
    color: #1A3A5C;
}

.lcPromo--light .lcPromoDesc {
    color: #5B6B7E;
}

.lcPromo--light .lcPromoFoot {
    border-top: 1px solid rgba(16, 42, 74, .08);
}

.lcPromo--light .lcPromoDismiss {
    color: #5B6B7E;
}

.lcPromo--light .lcPromoGo {
    color: #1565C0;
    font-weight: 700;
}

.lcPromo--light .lcPromoClose {
    color: #5B6B7E;
}

.lcPromo--light .lcPromoClose:hover {
    background-color: #F1F6FD;
}

/* ───────────────────────── 變體：深色（白底頂欄下方）───────────────────────── */

/*
 * 用於 Shinher pill（白底 navTop ＋ 深藍實底藥丸），延續藥丸自身的實底語彙。
 * 對比實測：#FFFFFF on #2A3554 ≈ 12.6:1、#C6DDFB on #2A3554 ≈ 9.4:1。
 */
.lcPromo--dark {
    background: linear-gradient(180deg, #344269 0%, #2A3554 100%);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 12px 32px rgba(0, 10, 30, .45);
}

.lcPromo--dark .lcPromoArrow::before {
    background: #344269;
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-left: 1px solid rgba(255, 255, 255, .14);
}

.lcPromo--dark .lcPromoHeadline {
    color: #FFFFFF;
}

.lcPromo--dark .lcPromoCard {
    background-color: rgba(255, 255, 255, .07);
}

.lcPromo--dark .lcPromoCard:hover,
.lcPromo--dark .lcPromoCard:focus-visible {
    background-color: rgba(255, 255, 255, .13);
}

.lcPromo--dark .lcPromoCover {
    background: linear-gradient(135deg, #FFFFFF 0%, #DCEBFB 100%);
}

.lcPromo--dark .lcPromoTitle {
    color: #FFFFFF;
}

.lcPromo--dark .lcPromoDesc {
    /* 與藥丸副標同色，維持同一家族 */
    color: #C6DDFB;
}

.lcPromo--dark .lcPromoFoot {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.lcPromo--dark .lcPromoDismiss {
    color: #C6DDFB;
}

.lcPromo--dark .lcPromoGo {
    color: #FFFFFF;
    font-weight: 700;
}

.lcPromo--dark .lcPromoClose {
    color: #C6DDFB;
}

.lcPromo--dark .lcPromoClose:hover {
    background-color: rgba(255, 255, 255, .13);
}

/* ───────────────────────── 紅點 ───────────────────────── */

/*
 * 紅點沿用各站既有的 .bubble 未讀語彙（#EC3775）。
 * 置於 icon／logo 容器的內角：跳轉點容器帶 overflow:hidden，掛在外面會被裁掉。
 * 靜態不閃爍——無限動畫只該用於載入指示。
 */
/*
 * 紅點的定位基準。紅點是 position:absolute，必須以「放它的那個 icon／logo 容器」為基準，
 * 否則會改用更外層的 .lcPromoAnchor 而飄到跳轉點外面。
 * 兩種形態各自的容器：pill 是 .lcSegIcon，navItem 是 .lcNavLogoBox。
 */
.lcSegIcon,
.lcPromoDotHost {
    position: relative;
}

.lcPromoDot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #EC3775;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9);
    pointer-events: none;
}

/* ───────────────────────── 焦點 ───────────────────────── */

.lcPromoCard:focus-visible,
.lcPromoClose:focus-visible,
.lcPromoGo:focus-visible,
.lcPromoDismiss input:focus-visible {
    outline: 2px solid #4BB1F5;
    outline-offset: 2px;
}

/* ───────────────────────── 動態 ───────────────────────── */

/* 進場：ease-out（進場用 ease-out、退場用 ease-in），200ms 落在 150–300ms 區間 */
.lcPromoBubble {
    animation: lcPromoIn 200ms ease-out both;
}

@keyframes lcPromoIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lcPromoBubble {
        animation: none;
    }

    .lcPromoCard,
    .lcPromoClose {
        transition: none;
    }
}

/* ───────────────────────── RWD ───────────────────────── */

/* 跳轉點在窄螢幕會收合成 icon-only，氣泡跟著靠右收窄，維持不超出視窗 */
@media (max-width: 575.98px) {
    .lcPromoBubble {
        --lc-promo-width: 288px;
    }

    .lcPromoCover {
        width: 80px;
        height: 45px;
    }
}

/* 列印：推廣在紙本沒有意義 */
@media print {
    .lcPromoBubble,
    .lcPromoDot {
        display: none !important;
    }
}