/***************************************************************************
*  註解規則 :                                                              *
*  15顆星* --> 大區塊 (Hero / News / Audiences 等等)                       *
*  5顆星* --> 小區塊 (大區塊內的各項小區塊功能)                            *
*  1顆星*  --> 功能註解                                                    *
*                                                                          *
*  File : Index_Re.css                                                     *
*  Used in : Index.cshtml                                                  *
*  Description : GHD 首頁 Redesign                                         *
***************************************************************************/

/*************** Hero ***************/

:root {
    --hero-scale: clamp(0.46875, calc(var(--vw-safe, 100vw) / 1920px), 1.5);
    --hero-rhythm: calc(var(--hero-scale) * clamp(16px, 1.458vw, 28px));
    --page-side-padding: calc(var(--hero-scale) * clamp(20px, 4.167vw, 80px));
}

.heading_backgroundImg {
    background-image: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 28%, rgba(255, 255, 255, 0) 56%), url('../img/vackground-hDQ-dUjQN8E-unsplash copy.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #FFFFFF;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* 漢堡展開時改回文件流，接續把 Hero 往下推 */
header.header-expanded {
    position: static;
}

.heading {
    width: 100%;
    min-height: 800px;
    margin: 0;
    /* header 是 position:fixed，蓋在最上層，改用 margin-top 讓整個區塊往下讓開，不要用 padding，
       這樣才不會讓文字區塊在盒子內偏下（padding-top/bottom 要對稱文字才會真的置中）；再多留 40px 呼吸空間 */
    margin-top: 84px;
    /* 跟 padding-bottom 對稱，文字在盒子內才會真的垂直置中；跟最新消息的總間距改由 .news-wrap 的 padding-top 補償計算 */
    padding-top: calc(var(--hero-scale) * clamp(32px, 5vw, 96px));
    padding-bottom: calc(var(--hero-scale) * clamp(32px, 5vw, 96px));
    /* 標題文字容器離左邊界固定 120px */
    padding-left: 120px;
    padding-right: var(--page-side-padding);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    /* center 會把 row 推離左邊界，改成貼齊左邊 */
    justify-content: flex-start;
}

.index-hero-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: min(calc(var(--hero-scale) * 1760px), 100%);
    /* 原本 auto 置中會讓文字離左邊界比 80px 還遠，改成貼齊左邊 */
    margin: 10px 0 0 0;
    gap: max(40px, calc(var(--hero-scale) * 80px));
}

.index-hero-left {
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(var(--hero-scale) * 680px);
}

.index-hero-visual {
    display: none;
}

.index-hero-visual-stage {
    position: relative;
    width: 100%;
    max-width: calc(var(--hero-scale) * 620px);
    aspect-ratio: 804 / 720;
}

.index-hero-visual-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/***** 左欄文字 *****/

.index-hero-left .header-title {
    width: auto;
    max-width: none;
    margin: 0 0 var(--hero-rhythm);
}

.index-hero-left .headline_label {
    display: inline-flex;
    align-items: center;
    font-family: "Plus Jakarta Sans", "Noto Sans TC", sans-serif;
    font-size: calc(var(--hero-scale) * 14px * 1.5);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #126C67;
}

.index-hero-left .headline_title,
.index-hero-left .headline_title_Sub {
    display: inline-block;
    font-family: "Noto Sans TC", sans-serif;
    font-size: calc(var(--hero-scale) * 40px * 1.5);
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.index-hero-left .headline_title {
    margin-top: calc(var(--hero-scale) * clamp(8px, 0.833vw, 16px));
    font-weight: 900;
    color: #14201F;
}

.index-hero-left .headline_title_Sub {
    margin-top: calc(var(--hero-scale) * 2px);
    font-weight: 700;
    color: #126C67;
}

.index-hero-left .headline_title_Sub .headline-sub-plain {
    color: #000000;
}

.index-hero-left .header-subtitle {
    width: auto;
    max-width: none;
    margin: 0 0 var(--hero-rhythm);
}

.index-hero-left .headline_article {
    font-family: "Noto Sans TC", sans-serif;
    font-size: calc(var(--hero-scale) * 14px * 1.5);
    line-height: 1.9;
    color: #4D5C5D;
}

/***** 按鈕列 *****/

.index-hero-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--hero-scale) * 14px);
    margin-bottom: var(--hero-rhythm);
    flex-wrap: wrap;
}

.index-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--hero-scale) * 8px);
    min-height: calc(var(--hero-scale) * 52px);
    padding: calc(var(--hero-scale) * 8px) max(20px, calc(var(--hero-scale) * 26px));
    border-radius: 999px;
    font-family: "Noto Sans TC", sans-serif;
    font-size: calc(var(--hero-scale) * 14px);
    font-weight: 700;
    text-decoration: none;
    text-align: center;
}

.index-hero-btn--primary {
    background-color: #126C67;
    color: #FFFFFF;
    border: 1.5px solid #126C67;
}

.index-hero-btn--primary:hover {
    color: #FFFFFF;
    opacity: 0.9;
}

.index-hero-btn--secondary {
    background-color: #FFFFFF;
    color: #1D2B2C;
    border: 1.5px solid #CFDCDC;
}

.index-hero-btn--secondary:hover {
    color: #1D2B2C;
    border-color: #126C67;
}

/***** 統計數字（先做畫面，不串資料） *****/

.index-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--hero-scale) * clamp(24px, 2.292vw, 44px));
    max-width: calc(var(--hero-scale) * 520px);
    padding-top: calc(var(--hero-scale) * 22px);
    border-top: 1px solid #E8EEEE;
}

.index-hero-stat {
    display: flex;
    flex-direction: column;
    gap: calc(var(--hero-scale) * 4px);
}

.index-hero-stat-num {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: calc(var(--hero-scale) * 32px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #126C67;
}

.index-hero-stat-label {
    font-family: "Noto Sans TC", sans-serif;
    font-size: calc(var(--hero-scale) * 14px);
    color: #5B6B6C;
}

/*************** 最新消息 ***************/
.news-wrap {
    width: 100%;
    background-color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hero 跟最新消息之間的總間距，固定 200px：扣掉 .news-section 的 translateY(30px)，
       再扣掉 .heading 現在對稱的 padding-bottom（隨 hero-scale 變動，這裡用公式抵銷，確保總和恆等於 200px） */
    padding-top: calc(170px - (var(--hero-scale) * clamp(32px, 5vw, 96px)));
    /* 跟健康大數據之間的總間距由 .explore-wrap 的 padding-top 統一控制，這裡歸零 */
    padding-bottom: 0;
    padding-left: var(--page-side-padding);
    padding-right: var(--page-side-padding);
    margin-bottom: 0;
    box-sizing: border-box;
}

.news-section {
    width: 100%;
    max-width: min(var(--hero-content-width, calc(var(--hero-scale) * 1760px)), 100%);
    margin: 0 auto;
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transform: translateY(30px);
}

.news-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
}

/* 統一規格：NEWS/最新消息 為標準，套用到下方各區塊標題 */
.news-section .section-title,
.explore-title,
.online-course-section-title {
    text-align: left;
    margin: 0;
    margin-bottom: 0;
    font-family: inherit;
    font-size: min(calc(var(--hero-scale) * 45px), 45px);
    font-weight: 700;
    line-height: 1;
    color: #000000;
}

.news-section .section-title::after {
    display: none;
}

/* 最新消息標題：一道反光從左到右滑過，循環播放 */
.news-section .section-title {
    background-image: linear-gradient(100deg, #000000 40%, rgba(255, 255, 255, .9) 50%, #000000 60%);
    background-size: 250% 100%;
    background-position: 150% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: news-title-shine 2s ease-in-out infinite;
    animation-delay: 0.5s;
}

@keyframes news-title-shine {
    0% {
        background-position: 150% 0;
    }

    75%,
    100% {
        background-position: -50% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .news-section .section-title {
        animation: none;
        background-image: none;
        -webkit-text-fill-color: #000000;
        color: #000000;
    }
}

/* 上下滑出/滑入換層按鈕：News／Online Course 共用 */
.news-more-link,
.online-course-more-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0;
    border-radius: 50rem;
    border: 1.5px solid #000000;
    background: transparent;
    box-shadow: none;
    letter-spacing: normal;
    overflow: hidden;
    text-decoration: none;
    transition: none;
}

/* 蓋掉 Index.css 裡 .online-course-more-link 殘留的舊樣式，讓兩顆按鈕長得完全一樣 */
.online-course-more-link::before {
    content: none;
}

.online-course-more-link:hover {
    color: inherit;
    background: transparent;
    transform: none;
    box-shadow: none;
}

.online-course-more-link:hover .online-course-more-icon {
    background: none;
    box-shadow: none;
    transform: none;
}

.online-course-more-link:hover .online-course-more-icon::after {
    border-color: currentColor;
}

.news-more-layer,
.online-course-more-layer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    min-height: 44px;
    white-space: nowrap;
    transition: transform .4s ease;
}

.news-more-layer--default,
.online-course-more-layer--default {
    color: #000000;
}

.news-more-link:hover .news-more-layer--default,
.online-course-more-link:hover .online-course-more-layer--default {
    transform: translateY(-150%);
}

.news-more-layer--hover,
.online-course-more-layer--hover {
    position: absolute;
    inset: 0;
    color: #ffffff;
    transform: translateY(100%);
}

.news-more-link:hover .news-more-layer--hover,
.online-course-more-link:hover .online-course-more-layer--hover {
    transform: translateY(0);
}

.news-more-fill,
.online-course-more-fill {
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: -60%;
    right: -60%;
    z-index: 0;
    background: #000000;
    transform-origin: bottom;
    transform: translateY(100%) skewY(20deg) scaleY(0);
    transition: transform .4s ease;
}

.news-more-link:hover .news-more-fill,
.online-course-more-link:hover .online-course-more-fill {
    transform: translateY(0) skewY(20deg) scaleY(1.5);
}

.news-more-text,
.online-course-more-text {
    position: relative;
    z-index: 1;
    font-size: 20px;
    font-weight: 700;
}

/* 純箭頭，不用圓框 */
.news-more-icon,
.online-course-more-icon {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 14px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transition: none;
}

.news-more-icon::before,
.online-course-more-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 13px;
    height: 2px;
    background: currentColor;
    transform: translateY(-50%);
}

.news-more-icon::after,
.online-course-more-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: auto;
    right: 0;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {

    .news-more-layer,
    .online-course-more-layer,
    .news-more-fill,
    .online-course-more-fill {
        transition: none;
    }
}

.news-columns {
    display: flex;
    align-items: stretch;
    gap: 30px;
}

.news-meta {
    display: flex;
    align-items: center;
    gap: calc(var(--hero-scale) * 10px);
    margin-bottom: calc(var(--hero-scale) * 8px);
    font-size: clamp(16px, calc(var(--hero-scale) * 20px), 20px);
    color: rgba(255, 255, 255, 0.8);
}

.news-section .badge-tag {
    background: none;
    color: inherit;
    font-size: inherit;
    font-weight: 700;
    padding: 0;
    border-radius: 0;
}

.news-section .news-time {
    font-size: inherit;
    color: inherit;
    position: relative;
    padding-left: 14px;
}

.news-section .news-time::before {
    content: "|";
    position: absolute;
    left: 0;
    opacity: 0.5;
}

/***** 卡片共用：圖片滿版 + 底部黑色蒙板 + 箭頭按鈕 *****/
.news-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/***** 左邊：精選（最新一則） *****/
.news-feature {
    position: relative;
    flex: 0 1 calc(var(--hero-scale) * 800px);
    max-width: 40%;
    min-width: 0;
    display: block;
    text-decoration: none;
    color: inherit;
    background: #0B1F1D;
    border-radius: calc(var(--hero-scale) * 20px) 0 0 calc(var(--hero-scale) * 20px);
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(20, 32, 31, 0.15);
}

.news-feature-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.news-feature:hover .news-feature-img {
    transform: scale(1.1);
}

.news-feature-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: calc(var(--hero-scale) * 28px);
    box-sizing: border-box;
}

.news-feature-title {
    width: 100%;
    font-weight: 700;
    font-size: clamp(22.4px, calc(var(--hero-scale) * 28px), 28px);
    line-height: 1.4;
    color: #FFFFFF;
    margin-bottom: calc(var(--hero-scale) * 8px);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-feature-summary {
    width: 100%;
    font-size: clamp(16px, calc(var(--hero-scale) * 20px), 20px);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/***** 右邊：4 則，2x2 圖片卡片 *****/
.news-side-list {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 30px;
}

.news-side-row {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    aspect-ratio: 6 / 5;
    background: #0B1F1D;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(20, 32, 31, 0.15);
}

/* 右邊 2x2 grid 只有最外側（右欄）兩角要圓，中間（左欄）兩張全直角 */
.news-side-row:nth-child(2) {
    border-radius: 0 calc(var(--hero-scale) * 20px) 0 0;
}

.news-side-row:nth-child(4) {
    border-radius: 0 0 calc(var(--hero-scale) * 20px) 0;
}

.news-side-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.news-side-row:hover .news-side-img {
    transform: scale(1.1);
}

.news-side-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: calc(var(--hero-scale) * 20px);
    box-sizing: border-box;
}

.news-side-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F4F8F8;
    box-shadow: none;
}

.news-side-empty-text {
    font-size: 14px;
    color: #9AA6A6;
}

.news-side-title {
    font-weight: 700;
    font-size: clamp(22.4px, calc(var(--hero-scale) * 28px), 28px);
    color: #FFFFFF;
    margin-bottom: calc(var(--hero-scale) * 4px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-side-summary {
    font-size: clamp(16px, calc(var(--hero-scale) * 20px), 20px);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*************** 健康大數據探索 ***************/
.explore-wrap {
    width: 100%;
    /* 跟最新消息之間的總間距，固定 200px；.news-section 的 translateY(30px) 會往下溢出蓋到這裡，多補 30px */
    padding-top: 230px;
    /* 跟線上課程之間的總間距由 .online-course-section-wrap 的 padding-top 統一控制，這裡歸零 */
    padding-bottom: 0;
    padding-left: var(--page-side-padding);
    padding-right: var(--page-side-padding);
    box-sizing: border-box;
}

.explore-section {
    max-width: min(var(--hero-content-width, calc(var(--hero-scale) * 1760px)), 100%);
    margin: 0 auto;
}

.explore-section-header {
    margin-bottom: 50px;
}

.explore-title {
    text-align: center;
}

.explore-cards {
    display: flex;
    gap: 32px;
}

.explore-card {
    flex: 1 1 0;
    min-width: 0;
    display: block;
    text-decoration: none;
    color: inherit;
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(20, 32, 31, 0.08);
    transition: box-shadow .2s ease;
}

.explore-card:hover {
    box-shadow: 0 20px 48px rgba(20, 32, 31, 0.14);
}

.explore-card-media {
    width: 100%;
    aspect-ratio: 380 / 200;
    overflow: hidden;
}

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

.explore-card-body {
    padding: 20px 24px 24px;
}

.explore-card-title {
    font-weight: 700;
    font-size: 20px;
    color: #14201F;
    margin-bottom: 12px;
}

.explore-card-text {
    font-size: 15px;
    line-height: 1.7;
    color: #5B6B6C;
    margin-bottom: 16px;
}

/*************** 線上課程專區 ***************/
.online-course-section-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    /* 跟健康大數據之間的總間距，固定 200px */
    padding-top: 200px;
    padding-bottom: 96px;
    padding-left: var(--page-side-padding);
    padding-right: var(--page-side-padding);
    box-sizing: border-box;
}

.online-course-section-inner {
    max-width: min(var(--hero-content-width, calc(var(--hero-scale) * 1760px)), 100%);
    margin: 0 auto;
    padding: 0;
    overflow: visible;
    background: none;
    box-shadow: none;
}

.online-course-section-header {
    align-items: flex-end;
    border-bottom: none;
    margin-bottom: 50px;
    padding-bottom: 0;
}

.online-course-section-title {
    line-height: 1.3;
}

.online-course-section-title::after {
    display: none;
}

/*************** 合作單位（Member Logo） ***************/
.members .row.margin_0px {
    flex-direction: column;
}

.members .row.margin_0px .col-12.col-md-4.Logo_title_part {
    width: 100%;
    padding-right: 0;
    text-align: center;
}

.members .row.margin_0px .col-12.col-md-4.Logo_title_part .row {
    justify-content: center;
}

.members .row.margin_0px .col-12.col-md-4.Logo_title_part .text-size-ylarge {
    font-size: min(calc(var(--hero-scale) * 45px), 45px);
    font-weight: 700;
    color: #000000;
}

.members .row.margin_0px .col-12.col-md-4.Logo_title_part .text-size-small {
    font-size: calc(var(--hero-scale) * 18px);
    line-height: 1.7;
    color: #126C67;
}

.members .row.margin_0px .col-12.col-md-8 {
    width: 100%;
}

.members{
    display: block;
}

/*************** RWD ***************/

/***** Hero *****/
/* 1920~1440px：優先吃左右留白，內容維持 1920px 基準的全尺寸不縮小 */
@media (max-width: 1920px) {
    :root {
        --hero-scale: 1;
        --page-side-padding: clamp(20px, calc(20px + (var(--vw-safe, 100vw) - 1440px) * 0.125), 80px);
    }
}

/* 1440px 以下：留白已經鎖在 20px，改成縮小內容 */
@media (max-width: 1440px) {
    :root {
        --hero-scale: clamp(0.46875, calc(var(--vw-safe, 100vw) / 1440px), 1);
        --page-side-padding: 20px;
    }
}

/* 1300px 以下：不再滿版，改為四周 20px 留白，跟最新消息多留 20px 距離 */
@media (max-width: 1300px) {
    .heading {
        height: auto;
        min-height: auto;
        /* 這個斷點改用 padding-top 處理 header 讓開，margin-top 歸零避免重複扣兩次 header 高度 */
        margin-top: 0;
        padding: 60px 20px;
        padding-top: calc(var(--ghd-header-height, 0px) + 60px);
        padding-left: 60px;
        margin-bottom: 20px;
    }
    .index-hero-row {
        gap: 0;
    }

}

/* 1000px 以下：主視覺拿掉，文字獨佔滿版寬度 */
@media (max-width: 1000px) {
    /* 段落間距固定 20px，不再跟著 hero-scale 縮放 */
    :root {
        --hero-rhythm: 20px;
    }

    /* 主視覺拿掉後改用這張圖當背景，疊一層白色 80% 蓋住，效果等同圖片本身 20% 不透明度 */
    .heading_backgroundImg {
        background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('../img/vackground-hDQ-dUjQN8E-unsplash copy.jpg');
    }

    .index-hero-visual {
        display: none;
    }

    .index-hero-left {
        max-width: 100%;
        flex: 1 1 auto;
    }

    /* header-subtitle/stats 原本各自有一條 max-width:520px*scale 的上限，文字獨佔版面後要解除，不然內文還是會被鎖窄提早換行 */
    .index-hero-left .header-subtitle,
    .index-hero-stats {
        max-width: 100%;
    }

    /* 文字獨佔版面後字級不能再跟著縮，標題至少 45px，上下文字至少 25px */
    .index-hero-left .headline_title,
    .index-hero-left .headline_title_Sub {
        font-size: max(45px, calc(var(--hero-scale) * 40px));
    }

    .index-hero-left .headline_label,
    .index-hero-left .headline_article {
        font-size: max(25px, calc(var(--hero-scale) * 14px));
    }

    /* <p> 預設有 1em 外距，字級變大後跟 --hero-rhythm 的 margin 疊加/取最大值，導致間距大於 20px */
    .index-hero-left .headline_article {
        margin: 0;
    }

    /* 按鈕放大 30%，高度改用文字上下各 10px padding 撐出來，不再用固定 height */
    .index-hero-btn {
        gap: calc(var(--hero-scale) * 8px * 1.3);
        padding: 10px max(20px, calc(var(--hero-scale) * 26px * 2));
        font-size: calc(var(--hero-scale) * 14px * 2);
    }

    /* 計數器放大 30%，項目間 Gap 固定 20px */
    .index-hero-stats {
        gap: 40px;
        padding-top: 20px;
    }

    .index-hero-stat {
        gap: calc(var(--hero-scale) * 4px * 2);
    }

    .index-hero-stat-num {
        font-size: calc(var(--hero-scale) * 32px * 2);
    }

    .index-hero-stat-label {
        font-size: calc(var(--hero-scale) * 14px * 2);
    }
}

/* 600px 以下：標題固定 35px，上方英文與下方介紹文字固定 16px */
@media (max-width: 600px) {
    .index-hero-left .headline_title,
    .index-hero-left .headline_title_Sub {
        font-size: 35px;
    }

    .index-hero-left .headline_label,
    .index-hero-left .headline_article {
        font-size: 16px;
    }
}

/* 900px 以下：雙欄真的放不下，改上下排列（文字在上、主視覺在下） */
@media (max-width: 900px) {
    .index-hero-row {
        flex-direction: column;
        align-items: stretch;
        gap: calc(var(--hero-scale) * clamp(28px, 6vw, 48px));
    }

    .index-hero-left,
    .index-hero-visual {
        max-width: 100%;
        flex: none;
    }

    .index-hero-visual {
        justify-content: center;
    }

    .index-hero-visual-stage {
        max-width: calc(var(--hero-scale) * 414px);
    }
}

/* 550px 以下：進階搜尋／瞭解更多 按鈕改上下排列，各佔 100% 寬 */
@media (max-width: 550px) {
    .heading {
        padding-left: 20px;
    }

    .index-hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .index-hero-btn {
        width: 100%;
        justify-content: center;
    }
}

/* 500px 以下：標題以外的文字（上方小標、下方內文）改成 18px */
@media (max-width: 500px) {
    .index-hero-left .headline_label,
    .index-hero-left .headline_article {
        font-size: 18px;
    }
}

/***** 最新消息 *****/
/* 1300px 以下：左右兩欄疊成上下 */
@media (max-width: 1300px) {
    .news-columns {
        flex-direction: column;
    }

    /* scale(0.9) 是從中心縮放，單欄堆疊後整塊變很高，置中縮放會把標題往下推出一大塊空白，單欄排列不需要縮放 */
    .news-section {
        transform: none;
    }

    .news-feature,
    .news-side-list {
        width: 100%;
        max-width: 100%;
    }

    .news-feature {
        aspect-ratio: 4 / 3;
    }

    .news-side-list {
        grid-template-columns: 1fr;
    }

    /* 原本 aspect-ratio 是給 2x2 窄格用的，單欄滿版寬度下會被拉得極高，改跟精選卡一致 */
    .news-side-row {
        aspect-ratio: 4 / 3;
    }

    /* 單欄排列，每張卡四角都圓角 */
    .news-feature,
    .news-side-row,
    .news-side-row:nth-child(2),
    .news-side-row:nth-child(4) {
        border-radius: calc(var(--hero-scale) * 20px);
    }

    /* 單欄排列，5 張卡文字大小統一 */
    .news-feature-title,
    .news-side-title {
        font-size: 25px;
    }

    .news-feature-summary,
    .news-side-summary,
    .news-meta {
        font-size: 18px;
    }

    /* 單欄排列空間有限，只顯示前 3 則，第 4、5 則（nth-child 3、4）隱藏 */
    .news-side-row:nth-child(3),
    .news-side-row:nth-child(4) {
        display: none;
    }
}

/***** 健康大數據探索 *****/
/* 1100px 以下：三張卡改垂直排列，一列一張 */
@media (max-width: 1100px) {
    .explore-cards {
        flex-direction: column;
    }

    .explore-card {
        flex: 0 0 auto;
    }
}

/* 900px 以下：三欄疊成上下 */
@media (max-width: 900px) {
    .explore-cards {
        flex-direction: column;
    }
}

/***** 各區塊間距 *****/
/* 550px 以下：Hero／最新消息／健康大數據／線上課程 間距統一 80px */
@media (max-width: 550px) {
    .heading {
        margin-bottom: 0;
    }

    /* 50px + translateY(30px) = 80px */
    .news-wrap {
        padding-top: 50px;
    }

    /* 80px + translateY(30px) 補償 */
    .explore-wrap {
        padding-top: 110px;
    }

    .online-course-section-wrap {
        padding-top: 80px;
    }
}

/***** 各區塊標題（Hero 除外） *****/
/* 1000px 以下：最新消息／線上課程專區 標題固定 35px */
@media (max-width: 1000px) {
    .news-section .section-title,
    .online-course-section-title {
        font-size: 35px;
    }
}

/* 550px 以下：健康大數據探索／合作單位 標題改 25px */
@media (max-width: 550px) {
    .explore-title,
    .members .row.margin_0px .col-12.col-md-4.Logo_title_part .text-size-ylarge {
        font-size: 25px;
    }

    /* 最新消息／線上課程專區 標題固定 35px */
    .news-section .section-title,
    .online-course-section-title {
        font-size: 35px;
    }

    .members .row.margin_0px .col-12.col-md-4.Logo_title_part .text-size-small {
        font-size: 18px;
    }

    .members {
        padding-top: 0;
    }
}