/* 手機版首頁圖卡 + 桌機/手機切換（照搬 home 靜態載入版；源同 resources/css/home-mobile.css）。
   斷點 767px。桌機隱藏 .home-mobile/.mobile-call-bar；手機隱藏 .home-desktop 與舊站 homeNews 抽屜。 */
:root { --header-h: 89px; }
.home-mobile { display: none; }

@media (max-width: 767px) {
    .home-desktop { display: none; }
    .home-mobile { display: block; }
    /* 舊站底部最新消息抽屜於手機隱藏（改由頂部選單進入，且避免與 call-bar 底部重疊） */
    .homeNews-btn, #homeNews { display: none !important; }

    .mobile-card { position: relative; width: 100%; overflow: hidden; }
    /* 連結是包住圖片的正常流塊：圖片撐出自然高度，卡片才有高度（不可 absolute，否則卡片塌成 0 高） */
    .mobile-card__link { display: block; color: inherit; text-decoration: none; }
    /* 圖片自然高度：所見即所得，不裁切；width 撐滿、height 由圖比例決定 */
    .mobile-card__img { display: block; width: 100%; height: auto; }
    /* 熱點：透明可點區塊；百分比座標由 inline style 提供，隨圖等比例縮放 */
    .mobile-card__hotspot { position: absolute; display: block; z-index: 2; }
    /* 疊字落在上方留白區（避開 sticky header），限制高度不溢出、淡白漸層墊底增加可讀性 */
    .mobile-card__html {
        position: absolute; top: var(--mc-offset, 0); left: 0; right: 0;
        max-height: 50%; overflow: hidden;
        padding: calc(var(--header-h) + 4vw) 6vw 6vw;
        color: #15233f;
        background: linear-gradient(to bottom, rgba(255, 255, 255, .9) 0, rgba(255, 255, 255, .82) 60%, rgba(255, 255, 255, 0));
        text-shadow: 0 1px 2px rgba(255, 255, 255, .7);
    }
    /* 靠下：錨點翻到底緣、漸層由下往上淡出、不需 header 安全區 */
    .mobile-card__html--bottom {
        top: auto; bottom: var(--mc-offset, 0);
        padding: 6vw;
        background: linear-gradient(to top, rgba(255, 255, 255, .9) 0, rgba(255, 255, 255, .82) 60%, rgba(255, 255, 255, 0));
    }
    .mobile-card__html h2 { margin: 0 0 .35em; line-height: 1.25; font-size: 2rem; font-weight: 800; }
    .mobile-card__html h4 { margin: 0 0 .3em; line-height: 1.3; font-size: 1.5rem; font-weight: 700; }
    .mobile-card__html p { margin: 0; line-height: 1.55; font-size: 1.3rem; }
}