@charset "utf-8";
/**
 * Milestones 頁面樣式。
 * 詳細 Figma 對照與 token 註解請維護於：
 * - .ai/projects/egit/references/Milestones-Template.html
 * - .ai/projects/egit/references/Milestones-CSS-Template.css
 *
 * 這個正式檔案僅保留與行為、覆寫、 RWD 對齊相關的必要註解。
 */

/* ==========================================================================
   主容器與 Grid 佈局
   ========================================================================== */

#Content #Main,
#Content #MainCont {
    box-sizing: border-box;
    max-width: 100%;
}

.milestone {
    display: flex;
    flex-direction: column;
    gap: 32px;
}



.milestone .grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 32px;
    align-items: stretch;
    min-width: 0;
    /* Figma: Desktop 雙欄佈局 */
}

/* Grid 佔位符 - 用於 Starter 頂部的對齊 */
.grid-spacer {
    grid-column: 2;
}

/* ==========================================================================
   時間軸起點組件 (Starter - 42:1021)
   ========================================================================== */

.milestone .starter {
    position: relative;
    width: 120px;
    height: 79px;
    /* Figma node-id: 42:1021 */
}

/* 起點圖示容器 */
.milestone .starter .icon {
    position: absolute;
    left: 44px;
    top: 0;
    width: 16px;
    height: 16px;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background: linear-gradient(-40.75deg, var(--theme-primary-color, #036f9f) 2.97%, var(--theme-secondary-accent-color, #69b335) 97.03%);
    /* Figma: LinearG2B */
    border: 5px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0, 123, 165, 0.14), 0 4px 12.67px 0 rgba(0, 123, 165, 0.32);
    /* Figma node-id: 42:1025 */
}

.milestone .starter .icon img,
.milestone .starter .icon i,
.milestone .starter .icon svg {
    width: 16px;
    height: 16px;
}

.milestone .starter .icon svg {
    display: block;
}

/* 起點文字標籤 */
.milestone .starter .label {
    position: absolute;
    left: 27.59px;
    top: 44px;
    width: 64.805px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(151.63deg, rgba(0, 123, 165, 0.1) 0%, rgba(0, 160, 176, 0.1) 100%);
    border: 1px solid rgba(0, 123, 165, 0.2);
    border-radius: 24px;
    /* Figma node-id: 42:1023 */

    font-family: 'Arial', sans-serif;
    font-size: 0.875rem;
    font-weight: bold;
    color: var(--theme-primary-color, #036f9f);
    text-align: center;
    line-height: 21px;
    letter-spacing: 1.4px;
}

/* ==========================================================================
   時間軸組件 (Timeline - 42:1033)
   ========================================================================== */

.milestone .timeline {
    position: relative;
    width: 120px;
    z-index: 0;
    /* Figma node-id: 42:1033 */
}

.milestone .timeline::before {
    content: '';
    position: absolute;
    left: 59px;
    top: 8px;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #036f9f, rgba(0, 123, 165, 0.3));
    /* Figma: Timeline Line Gradient */
    border-radius: 4px;
}

.milestone .timeline .year {
    position: absolute;
    left: 19.67px;
    top: 8px;
    width: 80.656px;
    padding: 8px 16px;
    background: linear-gradient(-24.67deg, #036f9f 2.97%, #69b335 97.03%);
    /* Figma: LinearG2B */
    border-radius: 32px;
    box-shadow: 0 4px 12px rgba(0, 123, 165, 0.3);

    font-family: 'Arial', sans-serif;
    font-size: 1.125rem;
    font-weight: bold;
    color: white;
    text-align: center;
    line-height: 27px;
    letter-spacing: 1.44px;
}

/* ==========================================================================
   卡片容器基本樣式 (Card - 54:1111)
   ========================================================================== */

.milestone .card {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 843px;
    background: white;
    border: 1px solid #d9e8ed;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 33px;
}

.milestone .card.yearly {
    background: #385898;
    color: white;
    /* Figma node-id: 54:1794 (instance), 54:1793 (component) */
}

.milestone .card.yearly .title {
    border-left: 4px solid #b1d8fc;
    padding-left: 28px;
    font-family: 'Microsoft JhengHei', 'Arial', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    line-height: 48px;
}

.milestone .card.yearly .subtitle {
    color: white;
}

/* 年度總結卡片文字樣式 */
.milestone .card.yearly .yearly-text {
    color: white;
    margin-top: 16px;
    line-height: 1.8;
}

.milestone .card.yearly .yearly-text strong {
    color: #ffffff;
    font-weight: 800;
    padding: 0.1em 0.3em;
    margin: 0 0.1em;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 -2px 0 0 #b1d8fc;
    display: inline-block;
    line-height: 1.2;
}

/* 僅在可 hover 裝置套用卡片懸浮效果，避免觸控裝置誤觸 */
@media (hover: hover) and (pointer: fine) {
    .milestone .card:not(.yearly):hover {
        border-color: #b8dbe8;
        box-shadow: 0 12px 28px rgba(0, 123, 165, 0.16), 0 2px 8px rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
    }

    /* Hover 時標題變色（藍色→綠色）*/
    .milestone .card:not(.yearly):hover .title {
        border-left-color: #69b335;
        transition: border-left-color 0.28s ease;
    }

    .milestone .card:not(.yearly):hover .subtitle {
        color: #69b335;
        transition: color 0.28s ease;
    }

    /* 在 #InfoCont 内针对 h3.subtitle 的特定处理，以确保 hover 效果生效 */
    #InfoCont .milestone .card:not(.yearly):hover .subtitle {
        color: #69b335;
        transition: color 0.28s ease;
    }
}

/* ========================================================================== */

/* Chip 展示容器 */
.chip-showcase {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ==========================================================================
   卡片標頭區域
   ========================================================================== */

.milestone .card .header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid #d9e8ed;
    flex-shrink: 0;
    /* Figma node-id: 46:1078 */
}

/* Header 內的 flex 容器（日期 + Chip）*/
.milestone .card .header-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

.milestone .card .date {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: 'Microsoft JhengHei', 'Arial', sans-serif;
    font-size: 0.9375rem;
    color: #727272;
    letter-spacing: 0.3px;
    /* Figma node-id: 26:2320 */
}

.milestone .card .date i {
    width: 16px;
    height: 16px;
    color: #ACE3FF;
}

/* Chips 標籤 (Chip_History - Component Set: 44:1053) */
.milestone .card .chip,
.chip-showcase .chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 17px;
    border: 1px solid;
    border-radius: 32px;
    font-family: 'Arial', sans-serif;
    font-size: 0.875rem;
    font-weight: bold;
    letter-spacing: 0.7px;
    line-height: 21px;
    white-space: nowrap;
}

.milestone .card .chip::before,
.chip-showcase .chip::before {
    display: inline-block;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.875em;
    line-height: 1;
    color: currentColor;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
}

/* Chip 類型：大事記 (Default - Blue) */
.milestone .card .chip.default,
.chip-showcase .chip.default {
    /* Figma node-id: 44:1052 */
    background: linear-gradient(160.16deg, #dbeafe 0%, #bfdbfe 100%);
    /* Figma: LinearBlue */
    border-color: #60a5fa;
    color: #1e40af;
}

.milestone .card .chip.default::before,
.chip-showcase .chip.default::before {
    content: '\f08d';
}

/* Chip 類型：獲獎紀錄 (Awards - Yellow) */
.milestone .card .chip.awards,
.chip-showcase .chip.awards {
    /* Figma node-id: 44:1054 */
    background: linear-gradient(162.65deg, #fef3c7 0%, #fde68a 100%);
    /* Figma: LinearYellow */
    border-color: #fbbf24;
    color: #92400e;
}

.milestone .card .chip.awards::before,
.chip-showcase .chip.awards::before {
    content: '\f091';
}

/* Chip 類型：參訪研討 (Events - Green) */
.milestone .card .chip.events,
.chip-showcase .chip.events {
    /* Figma node-id: 45:1065 */
    background: linear-gradient(162.65deg, #d1fae5 0%, #a7f3d0 100%);
    /* Figma: LinearGreen */
    border-color: #34d399;
    color: #065f46;
}

.milestone .card .chip.events::before,
.chip-showcase .chip.events::before {
    content: '\f19d';
}

/* Chip 類型：活動辦理 (Activities - Teal) */
.milestone .card .chip.activities,
.chip-showcase .chip.activities {
    background: linear-gradient(162.65deg, #ddfaf8 0%, #c4f3ee 100%);
    border-color: #00bc9d;
    color: #005f66;
}

.milestone .card .chip.activities::before,
.chip-showcase .chip.activities::before {
    content: '\f274';
}

/* Chip 類型：里程碑 (Milestones - Pink) */
.milestone .card .chip.milestones,
.chip-showcase .chip.milestones {
    /* Figma node-id: 45:1067 */
    background: linear-gradient(160.16deg, #fad1e1 0%, #ffb5ca 100%);
    border-color: #fc5d8a;
    color: #8c000b;
}

.milestone .card .chip.milestones::before,
.chip-showcase .chip.milestones::before {
    content: '\f11e';
}

/* Chip 類型：技術研發 (R&D - Purple) */
.milestone .card .chip.rnd,
.chip-showcase .chip.rnd {
    /* Figma node-id: 45:1069 */
    background: linear-gradient(162.65deg, #efdbfe 0%, #e2befe 100%);
    border-color: #d394f1;
    color: #2f1eaf;
}

.milestone .card .chip.rnd::before,
.chip-showcase .chip.rnd::before {
    content: '\f0c3';
}

/* Chip 類型：合作推動 (Partnerships - Orange) */
.milestone .card .chip.partnerships,
.chip-showcase .chip.partnerships {
    /* Figma node-id: 45:1071 */
    background: linear-gradient(162.65deg, #fef1db 0%, #fee7bf 100%);
    border-color: #ee972b;
    color: #ca7000;
}

.milestone .card .chip.partnerships::before,
.chip-showcase .chip.partnerships::before {
    content: '\f2b5';
}

.milestone .card .title {
    border-left: 4px solid #0e589d;
    padding-left: 16px;
    /* Figma node-id: 26:2329 */
}

.milestone .card .subtitle {
    font-family: 'Microsoft JhengHei', 'Arial', sans-serif;
    font-size: 1.75rem;
    font-weight: bold;
    color: #0e589d;
    line-height: 32px;
    letter-spacing: 0.4px;
    overflow-wrap: anywhere;
    /* Figma node-id: 26:2330 */
}

.milestone .card .summary {
    font-family: 'Microsoft JhengHei', 'Arial', sans-serif;
    font-size: 1.125rem;
    color: #545454;
    line-height: 2;
    letter-spacing: 1.13px;
    overflow-wrap: anywhere;
    flex-shrink: 0;
    /* Figma node-id: 26:2332 */
}

/* ==========================================================================
   詳細內容區域（方案 D： max-height 動畫）
   ========================================================================== */

.milestone .card .details {
    display: flex;
    flex-direction: column;
    gap: 24px;

    /* 預設收合狀態 */
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    overflow: hidden;

    /* 樣式 */
    background: #f5f9fa;
    border-left: 4px solid #0e589d;
    border-radius: 12px;
    padding: 0 24px 0 28px;
    margin-top: 0;

    /* 平滑動畫（ cubic-bezier 提供更自然的加速度曲線）*/
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease 0.1s,
        transform 0.3s ease 0.1s,
        padding 0.3s ease,
        margin 0.3s ease;
    /* Figma node-id: 54:904 */
}

.milestone .card .details .paragraph {
    font-family: 'Microsoft JhengHei', 'Arial', sans-serif;
    font-size: 1.125rem;
    color: #545454;
    line-height: 32px;
    /* 約 1.78 */
    width: 100%;
    max-width: 728px;
    overflow-wrap: anywhere;
    /* Figma node-id: 28:1997, 28:1998 */
}

.milestone .card .details .images {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
    width: 100%;
    max-width: 728px;
    /* Figma node-id: 31:2171 - DetailImageSection */
}

/* 相關連結區塊（ links）樣式：標題尺寸與清單排版 */
.milestone .card .details .links {
    max-width: 728px;
}

#InfoCont .milestone .card .details .links h4 {
    font-family: 'Microsoft JhengHei', 'Arial', sans-serif;
    font-size: 1rem;
    /* 將 h4 調整為 16px */
    font-weight: 700;
    color: #595858;
    margin: 0 0 8px 0;
}

.milestone .card .details .links ul {
    margin: 0;
    padding-left: 1.25rem;
    /* 與整體文案對齊 */
}

.milestone .card .details .links li {
    margin-bottom: 6px;
    font-size: 1rem;
}

.milestone .card .details .links a {
    color: #036f9f;
    text-decoration: underline;
}

.milestone .card .details .links a:hover {
    color: #69b335;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* 只有一張：撐滿全寬 */
/* 預設（一張）：撐滿全寬 */
.milestone .card .details .images .photo {
    flex: 1 1 100%;
}

/* .TwoCol 修飾：兩張左右各半 */
.milestone .card .details .images.TwoCol .photo {
    flex: 1 1 calc(50% - 6px);
    min-width: 200px;
}

/* ==========================================================================
   照片展示區 (Photo Components)
   ========================================================================== */

/* Outer Photo Container （外部照片 - 51:1167 ）*/
.milestone .card .photo.outer {
    position: relative;
    width: 100%;
    max-width: 780px;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #ececf0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    /* Figma node-id: 51:1166, 51:1167 */
}

/* 照片容器的間距輔助 class */
.milestone .card .photo-container {
    margin: 24px 0;
}

.milestone .card .photo.outer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.milestone .card .photo.outer:hover img {
    transform: scale(1.05);
}

/* Hover 時顯示照片說明 */
.milestone .card .photo.outer .caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    /* Figma node-id: 51:1157 */
}

.milestone .card .photo.outer:hover .caption {
    opacity: 1;
}

.milestone .card .photo.outer .caption-text {
    position: absolute;
    left: 16px;
    top: 13px;
    font-family: 'Arial', sans-serif;
    font-size: 0.875rem;
    color: white;
    line-height: 21px;
    white-space: nowrap;
    /* Figma node-id: 51:1156 */
}

/* Single Image Container （詳細內容照片 - 31:2107 ）*/
.milestone .card .details .images .photo {
    position: relative;
    width: 100%;
    max-width: 728px;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #ececf0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    /* Figma node-id: 31:2107 */
}

.milestone .card .details .images .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    /* Figma node-id: 31:2103 */
}

.milestone .card .details .images .photo:hover img {
    transform: scale(1.05);
}

/* Hover 時顯示照片說明（詳細照片）*/
.milestone .card .details .images .photo .caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 45px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    /* Figma node-id: 31:2104 */
}

.milestone .card .details .images .photo:hover .caption {
    opacity: 1;
}

.milestone .card .details .images .photo .caption-text {
    position: absolute;
    left: 16px;
    top: 11.5px;
    font-family: 'Microsoft JhengHei', 'Arial', sans-serif;
    font-size: 0.875rem;
    color: white;
    line-height: 21px;
    white-space: nowrap;
    /* Figma node-id: 31:2105 */
}

/* HintMorePhoto Badge （照片數量提示 - 49:1124 ）*/
.milestone .card .photo .badge {
    position: absolute;
    top: 16px;
    right: 15.66px;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 0 16px;
    height: 37px;
    background: rgba(0, 123, 165, 0.95);
    border-radius: 32px;
    box-shadow: 0 4px 12px rgba(0, 123, 165, 0.3);
    opacity: 0.92;
    z-index: 10;

    font-family: 'Arial', sans-serif;
    font-size: 0.875rem;
    font-weight: bold;
    color: white;
    line-height: 21px;
    /* Figma node-id: 49:1124, 49:1102 */
}

.milestone .card .photo .badge i,
.milestone .card .photo .badge .icon {
    width: 16px;
    height: 16px;
    /* Figma node-id: 46:1095 */
}

/* ==========================================================================
   展開按鈕 (btnExtendable - 30:2015)
   ========================================================================== */

.milestone .card .btn-expand {
    display: block;
    width: 166px;
    min-height: 48px;
    border: 2px solid #385898;
    border-radius: 32px;
    background: white;
    cursor: pointer;
    margin-top: 24px;

    font-family: 'Arial', sans-serif;
    font-size: 1rem;
    color: #385898;
    line-height: 24px;
    padding: 10px 18px;
    transition: all 0.3s ease;
    /* Figma node-id: 30:2015 */
}

.milestone .card .btn-expand:hover {
    background: #385898;
    color: white;
}

/* 按鈕箭頭（由 CSS 控制）*/
.milestone .card .btn-expand::after {
    content: ' ▼';
    display: inline-block;
    transition: transform 0.3s ease;
}

/* ==========================================================================
   Card 變體條件樣式 (Variant-Specific Styles)
   基於 data 屬性來控制不同變體的視覺呈現
   參考：.ai/projects/egit/references/Milestones-Figma-Components.md
   ========================================================================== */

/* ------------------------------------------------------------------------
   極簡型變體 (hasDetail=false) - node-id: 61:1154
   - 僅顯示日期和標題
   - 隱藏 Chip, Summary, Button, DetailContainer
   ------------------------------------------------------------------------ */

.milestone .card[data-has-detail="false"] .chip,
.milestone .card[data-has-detail="false"] .summary,
.milestone .card[data-has-detail="false"] .btn-expand {
    display: none !important;
}

/* 極簡型不需要 header 底線與額外間距 */
.milestone .card[data-has-detail="false"] .header {
    gap: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.milestone .card[data-has-detail="false"] .header-row {
    display: none;
}

/* ------------------------------------------------------------------------
   收合狀態 (state=default)
   - DetailContainer 收合（ max-height: 0, opacity: 0 ）
   - 按鈕顯示「展開詳細資訊」
   ------------------------------------------------------------------------ */

.milestone .card[data-state="default"] .details {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    padding: 0 24px 0 28px;
    margin-top: 0;
}

/* 按鈕文字內容由 HTML textContent + JavaScript 控制 */

/* ------------------------------------------------------------------------
   展開狀態 (state=open) 
   - DetailContainer 展開（自適應高度，平滑動畫）
   - 按鈕圖示向上（箭頭翻轉）
   - 按鈕文字由 JavaScript 更新為「收合詳細資訊」
   ------------------------------------------------------------------------ */

.milestone .card[data-state="open"] .details {
    max-height: 2000px;
    /* 足夠容納照片的安全值 */
    opacity: 1;
    transform: translateY(0);
    padding: 24px 24px 24px 28px;
    margin-top: 24px;
}

.milestone .card[data-state="open"] .btn-expand::after {
    transform: scaleY(-1);
    /* 箭頭翻轉 */
}

/* ------------------------------------------------------------------------
   無外部照片變體 (hasOutPhoto=false)
   - 隱藏 OuterPhotoContainer
   ------------------------------------------------------------------------ */

.milestone .card[data-has-out-photo="false"] .photo.outer {
    display: none !important;
}

/* ------------------------------------------------------------------------
   有外部照片變體 (hasOutPhoto=true) - node-id: 54:907
   - 顯示 OuterPhotoContainer
   - 包含 Hover 效果
   ------------------------------------------------------------------------ */

.milestone .card[data-has-out-photo="true"] .photo.outer {
    display: block;
}

/* ==========================================================================
   圖片兩側模糊擴散效果（應用於外部照片）
   使用方式：在 figure.photo.outer 上加入 class `photo-side-blur`
   功能：保持照片高度（容器高度由 aspect-ratio 決定），將超出寬度部分以 backdrop-filter 霧化呈現
   注意：需瀏覽器支援 backdrop-filter（包含 -webkit-backdrop-filter 作為兼容）
   ========================================================================== */
.photo.outer.photo-side-blur {
    position: relative;
    overflow: hidden;
}

.milestone .card .photo.outer.photo-side-blur img {
    /* 使用 contain 保留完整圖片（不裁切），並置中 */
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    background: transparent;
}

/* 左右兩側的 backdrop blur 覆蓋層（會模糊下面的圖片） */
.photo.outer.photo-side-blur::before {
    /* 全覆蓋的模糊背景：裁切並放大（ background-size: cover），以避免左右出現灰色邊緣 */
    content: "";
    position: absolute;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0 */
    pointer-events: none;
    z-index: 1;
    /* 置於 img 之下 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* 以 cover 填滿，並可搭配 transform 放大 */
    background-image: var(--photo-url, none);
    transform: scale(1.2);
    /* 放大以保留延伸內容 */
    filter: blur(28px);
    -webkit-filter: blur(28px);
    opacity: 0.95;
}

.photo.outer.photo-side-blur::after {
    /* 漸層遮罩，讓模糊背景兩側自然過渡到容器背景色，而不顯突兀 */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    /* 置於 img 之上以遮蓋邊緣（但下方 caption 仍可顯示） */
    background: linear-gradient(90deg, rgba(236, 236, 240, 1) 0%, rgba(236, 236, 240, 0) 12%, rgba(236, 236, 240, 0) 88%, rgba(236, 236, 240, 1) 100%);
    mix-blend-mode: normal;
    pointer-events: none;
}

/* Ensure caption sits above the blurred background overlay */
.photo.outer.photo-side-blur .caption {
    z-index: 10;
    position: absolute;
    /* keep positioning */
}

/* 確保 img 在模糊背景之上顯示 */
.milestone .card .photo.outer.photo-side-blur img {
    position: relative;
    z-index: 4;
}

/* Specific background image bindings for instances (avoids inline styles for CSP) */
.photo.outer.photo-side-blur.wf-ts::before,
.photo.outer.photo-side-blur.wf-ts::after {
    background-image: url('/wwwroot/images/Milestone/2019/2019_WF_TS_Taipei_DeShiang.jpg');
}

/* 在小螢幕上縮小側邊模糊區塊 */
@media (max-width: 600px) {

    .photo.outer.photo-side-blur::before,
    .photo.outer.photo-side-blur::after {
        width: 18%;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
}

.milestone .card[data-has-out-photo="true"] .photo.outer .caption {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.milestone .card[data-has-out-photo="true"] .photo.outer:hover .caption {
    opacity: 1;
}

/* ------------------------------------------------------------------------
   變體組合使用範例
   
   極簡型：
   <div class="card" data-has-detail="false" data-has-out-photo="false" data-state="default">
   
   標準型收合：
   <div class="card" data-has-detail="true" data-has-out-photo="false" data-state="default">
   
   標準型展開：
   <div class="card" data-has-detail="true" data-has-out-photo="false" data-state="open">
   
   圖文型收合：
   <div class="card" data-has-detail="true" data-has-out-photo="true" data-state="default">
   
   圖文型展開：
   <div class="card" data-has-detail="true" data-has-out-photo="true" data-state="open">
   ------------------------------------------------------------------------ */

/* ==========================================================================
   #InfoCont 專用樣式
   ========================================================================== */

/* Cards 容器佈局 */
#InfoCont .milestone .grid .cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* 時間軸年份標籤居中 */
#InfoCont .milestone .timeline .year {
    left: 59px;
    width: auto;
    min-width: 80px;
    transform: translateX(-50%);
}

/* 卡片左側的時間軸點標記 */
#InfoCont .milestone .grid .cards .card::before {
    content: '';
    position: absolute;
    left: -104px;
    top: 92px;
    width: 16px;
    height: 16px;
    background: #036f9f;
    border: 4px solid #ffffff;
    border-radius: 50%;
    z-index: 2;
}

/* 卡片文字間距重置 */
#InfoCont .milestone .card .summary,
#InfoCont .milestone .card .details .paragraph,
#InfoCont .milestone .card.yearly .yearly-text {
    margin: 0;
}

/* Summary 樣式調整 */
#InfoCont .milestone .card .summary {
    font-family: 'Microsoft JhengHei', 'Arial', sans-serif;
    font-size: 1.125rem;
    color: #545454;
    line-height: 1.85;
    letter-spacing: 1.13px;
    margin-top: 0.5em;
}

/* 年度卡片標題顏色 */
#InfoCont .milestone .card.yearly .title h3.subtitle {
    color: #ffffff;
}

/* 年度卡片文字樣式 */
#InfoCont .milestone .card.yearly .yearly-text {
    font-family: 'Microsoft JhengHei', 'Arial', sans-serif;
    font-size: 1.375rem;
    font-weight: bold;
    line-height: 1.65;
    letter-spacing: 0.6px;
    color: #ffffff;
    margin-top: 0.5em;
}

#InfoCont .milestone .card.yearly .yearly-text strong {
    color: #ffffff;
    font-weight: 800;
    padding: 0.15em 0.3em;
    margin: 0 0.15em;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 -2px 0 0 #b1d8fcf1;
    display: inline-block;
    line-height: 1.2;
}


/* ==========================================================================
   響應式設計 (RWD) - 統一放置於文件尾端
   ========================================================================== */

/* 小桌面版 (<1024px) */
@media only screen and (max-width: 63.9375em) {
    .milestone .grid {
        grid-template-columns: 100px 1fr;
        gap: 24px;
    }

    .milestone .starter {
        width: 100px;
        height: 72px;
    }

    .milestone .starter .icon {
        left: 32px;
    }

    .milestone .starter .label {
        left: 21px;
        top: 40px;
        width: 58px;
        height: 32px;
        font-size: 0.8125rem;
        line-height: 19px;
    }

    .milestone .timeline {
        width: 100px;
    }

    .milestone .timeline::before {
        left: 48px;
        width: 3px;
    }

    .milestone .timeline .year {
        left: 5px;
        right: 25px;
        width: auto;
        font-size: 0.9375rem;
        padding: 6px 10px;
    }

}

/* 平板版 (480-767px) */
@media only screen and (max-width: 47.999375em) {
    .milestone .grid {
        grid-template-columns: 80px 1fr;
        gap: 20px;
    }

    .milestone .timeline {
        width: 80px;
    }

    .milestone .timeline::before {
        left: 39px;
        width: 3px;
    }

    .milestone .timeline .year {
        /* 80px 欄寬下重新置中 +1px 視覺補償： center = 10 + 62/2 = 41px */
        left: 10px;
        width: 62px;
        font-size: 1rem;
        letter-spacing: 1px;
        padding: 6px 10px;
    }

    .milestone .card {
        padding: 24px;
    }

    .milestone .card .header-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .milestone .card .subtitle {
        font-size: 1.5rem;
        line-height: 1.4;
        letter-spacing: 0.2px;
    }

    .milestone .card .summary,
    .milestone .card .details .paragraph {
        font-size: 1.0625rem;
        line-height: 1.8;
        letter-spacing: 0.4px;
    }
}

/* 手機版 (<480px) */
@media only screen and (max-width: 29.9375em) {
    .milestone .grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .milestone .grid .grid-spacer {
        display: none;
    }

    .milestone .timeline {
        display: block;
        width: auto;
        min-height: 0;
        margin-bottom: 8px;
        margin-top: 30px;
    }

    .milestone .timeline::before {
        display: none;
    }

    .milestone .timeline .year {
        position: relative;
        left: 0;
        top: 0;
        width: fit-content;
        min-width: 84px;
        height: auto;
        padding: 6px 14px;
        font-size: 1rem;
        line-height: 1.4;
        letter-spacing: 1px;
    }

    .milestone .card {
        padding: 20px;
        border-radius: 12px;
    }

    .milestone .card .header {
        gap: 12px;
        padding-bottom: 18px;
    }

    .milestone .card .header-row {
        flex-wrap: wrap;
        gap: 8px;
        align-items: flex-start;
    }

    .milestone .card .date {
        font-size: 0.8125rem;
    }

    .milestone .card .chip {
        display: inline-flex;
        max-width: 100%;
        font-size: 0.8125rem;
        line-height: 1.4;
        letter-spacing: 0.3px;
    }

    .milestone .card .title {
        border-left-width: 3px;
        padding-left: 12px;
    }

    .milestone .card .subtitle {
        font-size: 1.375rem;
        line-height: 1.45;
        letter-spacing: 0.2px;
    }

    .milestone .card .summary {
        font-size: 1rem;
        line-height: 1.75;
        letter-spacing: 0.2px;
    }

    .milestone .card .btn-expand {
        width: 100%;
        min-height: 44px;
        font-size: 0.9375rem;
        line-height: 1.4;
        padding: 10px 14px;
    }

    .milestone .card[data-state="open"] .details {
        max-height: 3200px;
        padding: 16px;
        margin-top: 16px;
    }

    .milestone .card[data-state="default"] .details {
        padding: 0 16px;
    }

    .milestone .card .details {
        border-left-width: 3px;
    }

    .milestone .card .details .paragraph {
        font-size: 1rem;
        line-height: 1.75;
    }

    .milestone .card .photo.outer,
    .milestone .card .details .images .photo {
        max-width: 100%;
        aspect-ratio: 16 / 10;
    }

    .milestone .card .photo .badge {
        top: 10px;
        right: 10px;
        height: 30px;
        padding: 0 10px;
        font-size: 0.75rem;
        gap: 6px;
    }

    .milestone .card .photo .badge i,
    .milestone .card .photo .badge .icon {
        width: 14px;
        height: 14px;
    }

    .milestone .card .photo.outer .caption-text,
    .milestone .card .details .images .photo .caption-text {
        left: 12px;
        top: 12px;
        font-size: 0.75rem;
        white-space: normal;
    }
}

/* ==========================================================================
       年份選擇器與導航樣式 (CPS: CSS Classes)
       ========================================================================== */

/* 年份選擇器容器 */
.year-selector-container {
    margin-bottom: 30px;
    padding: 16px 12px;
    background: #f5f9fa;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.year-selector-container label {
    display: block;
    color: #036f9f;
    font-weight: 500;
    white-space: nowrap;
}

.year-selector-container label i {
    margin-right: 6px;
}

.year-selector-container select {
    padding: 8px 12px;
    font-size: 1.05em;
    border: 1px solid #b6d4db;
    border-radius: 4px;
    cursor: pointer;
    min-width: 140px;
    background: white;
    font-family: 'Arial', sans-serif;
}

/* Grid 高亮狀態 (selected/highlighted) */
.milestone .grid.is-highlighted {
    outline: 2px solid #77c6e3;
    outline-offset: 8px;
    border-radius: 8px;
    transition: outline 0.3s ease-in-out;
}

/* ==========================================================================
   列印模式優化
   ========================================================================== */

html.reveal-skip .milestone .card .details {
    display: flex !important;
}

html.reveal-skip .milestone .card .photo img {
    transition: none !important;
}

@media only screen and (min-width: 48em) and (max-width: 63.9375em) {
    #InfoCont .milestone .grid {
        grid-template-columns: 96px 1fr;
        gap: 24px;
    }

    #InfoCont .milestone .timeline {
        width: 96px;
    }

    #InfoCont .milestone .timeline::before {
        left: 47px;
    }

    #InfoCont .milestone .timeline .year {
        left: 47px;
        min-width: 68px;
        padding: 6px 12px;
    }

    #InfoCont .milestone .grid .cards .card::before {
        left: -83px;
    }
}

/* <1024px ( 小桌面 ) 時的 #InfoCont 調整 */
@media only screen and (max-width: 63.9375em) {
    #InfoCont .milestone .grid {
        grid-template-columns: 100px 1fr;
        gap: 24px;
    }

    #InfoCont .milestone .starter {
        width: 100px;
        height: 72px;
    }

    #InfoCont .milestone .starter .icon {
        left: 32px;
    }

    #InfoCont .milestone .starter .label {
        left: 21px;
        top: 40px;
        width: 58px;
        height: 32px;
        font-size: 0.8125rem;
        line-height: 19px;
    }

    #InfoCont .milestone .timeline {
        width: 100px;
    }

    #InfoCont .milestone .timeline::before {
        left: 48px;
        width: 3px;
    }

    #InfoCont .milestone .timeline .year {
        right: 25px;
        width: auto;
        font-size: 0.9375rem;
        padding: 6px 10px;
    }

    #InfoCont .milestone .grid .cards .card::before {
        left: -88px;
    }
}

@media only screen and (max-width: 47.999375em) {
    #InfoCont .milestone .timeline .year {
        left: 50px;
        min-width: 62px;
    }

    #InfoCont .milestone .grid .cards .card::before {
        left: -88px;
        top: 82px;
    }

    #InfoCont .milestone .card .summary,
    #InfoCont .milestone .card .details .paragraph,
    #InfoCont .milestone .card.yearly .yearly-text {
        font-size: 1.0625rem;
        line-height: 1.8;
        letter-spacing: 0.4px;
    }

    #InfoCont .milestone .card.yearly .yearly-text {
        line-height: 1.65;
    }
}

@media only screen and (max-width: 29.9375em) {
    #InfoCont .milestone .grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #InfoCont .milestone .grid[data-year] {
        position: relative;
    }

    #InfoCont .milestone .grid[data-year]::before {
        content: '';
        position: absolute;
        left: 55.5px;
        top: 42px;
        bottom: 0;
        width: 1px;
        background: linear-gradient(to bottom, #036f9f, rgba(0, 123, 165, 0.28));
        z-index: 0;
        pointer-events: none;
    }

    #InfoCont .milestone .timeline {
        min-height: 34px;
        margin-top: 40px;
        margin-bottom: 4px;
    }

    #InfoCont .milestone .timeline::before {
        display: none;
    }

    #InfoCont .milestone .timeline .year {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        display: inline-flex;
        width: auto;
        max-width: max-content;
        min-width: 84px;
    }

    #InfoCont .milestone .grid .cards .card::before {
        display: none;
    }

    #InfoCont .milestone .card .summary,
    #InfoCont .milestone .card .details .paragraph,
    #InfoCont .milestone .card.yearly .yearly-text {
        font-size: 1rem;
        line-height: 1.75;
        letter-spacing: 0.2px;
    }

    #InfoCont .milestone .card {
        padding: 18px;
    }

    #InfoCont .milestone .card.yearly .yearly-text {
        line-height: 1.55;
    }

    #InfoCont .milestone {
        gap: 20px;
    }
}