/* --- 基礎設定與變數 --- */
:root {
    --primary-color: #2E7D32;
    /* 沉穩、專業的綠色 */
    --primary-hover: #1B5E20;
    --text-dark: #333333;
    --text-light: #666666;
    --bg-color: #FAFAFA;
    --white: #FFFFFF;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Sans TC', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-dark);
    line-height: 1.6;
}

/* --- 按鈕共用樣式 --- */
.btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 30px;
    /* 微圓角增加親和力 */
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
}

.btn-outline {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    margin-left: 10px;
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

/* --- 導覽列 Navbar (優化版) --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    /* 稍微縮減上下高度，看起來更俐落 */
    /* 加入一點透明度與毛玻璃效果 (backdrop-filter)，網頁往下滾動時會非常有質感 */
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* 支援 Safari */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    /* 讓陰影更柔和立體 */
    position: sticky;
    top: 0;
    z-index: 100;
}

/* 電腦版預設隱藏漢堡圖示 */
.hamburger {
    display: none;
    font-size: 1.8rem;
    color: var(--primary-color);
    cursor: pointer;
}
/* --- 優化 Logo 視覺 --- */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo .brand-name {
    color: var(--primary-color);
    /* 讓吃對營養所變成綠色，跳脫出來 */
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.logo .separator {
    color: #DDDDDD;
    /* 讓分隔線變淺，不搶視覺 */
    font-weight: 300;
}

.logo .sub-name {
    color: var(--text-dark);
    font-size: 1.1rem;
    font-weight: 500;
}

/* --- 導覽列連結動畫 --- */
.nav-links {
    display: flex;
    gap: 35px;
    /* 用 gap 控制連結之間的距離，比用 margin 更精準 */
}

.nav-links a {
    text-decoration: none;
    color: var(--text-light);
    /* 預設顯示較柔和的深灰色 */
    font-weight: 500;
    font-size: 1.05rem;
    position: relative;
    /* 為了做 hover 動畫準備 */
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

/* 製作滑鼠移過去時，從中間往兩側展開的底線動畫 */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--primary-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    /* 讓底線置中對齊 */
}

.nav-links a:hover {
    color: var(--primary-color);
}

.nav-links a:hover::after {
    width: 100%;
    /* 滑鼠移入時，底線寬度展開到 100% */
}

/* --- 主視覺 Hero Section --- */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 5%;
    /* 原本是 80px，改為 40px */
    min-height: 50vh;
    /* 原本是 70vh，縮小佔據畫面的高度比例 */
}

.hero-content {
    flex: 1;
    max-width: 600px;
}

/* --- 主視覺標題排版優化 --- */
.hero-content h1 {
    line-height: 1.4;
    /* 稍微增加行距，讓上下兩行呼吸空間變大 */
    margin-bottom: 25px;
    color: var(--text-dark);
    word-break: keep-all;
    /* 避免中文字在手機版被單獨切斷掉到下一行 */
}

/* 上半句：視覺放輕 */
.hero-content h1 .title-small {
    font-size: 2.2rem;
    font-weight: 500;
    color: #555555;
    /* 用稍微淺一點的深灰色 */
}

/* 下半句：視覺加重 */
.hero-content h1 .title-large {
    font-size: 3.2rem;
    font-weight: 700;
}

/* 關鍵字：品牌色 + 螢光筆畫線效果 */
.hero-content h1 .text-highlight {
    color: var(--primary-color);
    /* 利用漸層背景做出下半部 40% 的淡淡綠色畫線效果 */
    background: linear-gradient(to top, rgba(46, 125, 50, 0.15) 40%, transparent 40%);
    padding: 0 4px;
    /* 讓底色左右稍微突出文字一點 */
}

.hero-content p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 30px;
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hero-image img {
    /* --- 請修改這兩行 --- */
    max-width: 400px;
    /* 這裡限制了圖片的最大尺寸，例如 400px */
    width: 100%;
    /* 這裡保持 100%，讓它在小螢幕時可以順利縮小 */

    /* --- 下面的保持不變 --- */
    border-radius: 50%;
    /* 圓形頭像 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* 陰影 */
}

/* --- 核心服務區塊 Services (Grid 網格系統) --- */
.services-section {
    padding: 45px 5% 25px 5%;
    text-align: center;
}

.section-title {
    font-size: 2rem;
    margin-bottom: 25px;
    /* 原本是 30px，縮減為 25px */
    color: var(--text-dark);
}

.card-container {
    display: grid;
    /* 使用 auto-fit 讓卡片能自動響應式排列 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.service-card h3 {
    margin-bottom: 15px;
    color: var(--primary-color);
}



/* --- 關於建銘區塊 (About Section) --- */
.about-section {
    padding: 45px 5% 25px 5%;
    /* 上 45px、左右 5%、下縮減為 25px */
    background-color: var(--white);
}

.about-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    /* 置中 */
    gap: 30px;
}

.about-text {
    flex: 1;
}

.about-text .section-title {
    text-align: left;
    /* 標題靠左對齊 */
    margin-bottom: 20px;
}

.about-intro {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 30px;
    line-height: 1.8;
}

/* 專業認證列表 */
.about-credentials {
    list-style: none;
    margin-bottom: 40px;
}

.about-credentials li {
    margin-bottom: 12px;
    font-weight: 500;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.about-credentials i {
    color: var(--primary-color);
    /* 勾勾使用主色綠色 */
    font-size: 1.2rem;
}

/* 社群連結圖示區 */
.social-links {
    display: flex;
    gap: 15px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: var(--text-dark);
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* 各社群平台專屬 Hover 顏色 */
.social-icon.fb:hover {
    background-color: #1877F2;
    color: white;
}

.social-icon.ig:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
}

.social-icon.threads:hover {
    background-color: #000000;
    color: white;
}

/* 關於區塊右側的圖片 (選用) */
/* --- (style.css 中) 關於我區塊右側的圖片 (優化版) --- */
.about-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 確保圖片在電腦版上垂直置中 */
}

/* 🌟 📍 這是專屬圖片的新樣式 📍 🌟 */
.about-featured-img {
    width: 100%;
    /* 在手機版填滿容器 */
    max-width: 380px;
    /* 🌟 在電腦版限制最大寬度，避免圖片看起來太大 */
    height: auto;
    /* 保持比例 */
    border-radius: 15px;
    /* 一致的圓角，更有設計感 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    /* 加一點陰影提升質感 */
}

/* 🌟 將原本的 .placeholder-img 樣式刪除 🌟 */
/* .placeholder-img { ... } */

.placeholder-img {
    width: 100%;
    max-width: 400px;
    height: 300px;
    background-color: #e9ecef;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
}

/* --- 聯絡與預約表單 (Contact Section) --- */
.contact-section {
    padding: 45px 5% 60px 5%;
    /* 聯絡區塊是最後一個，底部留白可以多一點 */
    background-color: var(--bg-color);
    text-align: center;
}

.contact-subtitle {
    color: var(--text-light);
    margin-bottom: 40px;
    font-size: 1.1rem;
}

.contact-container {
    max-width: 600px;
    margin: 0 auto;
    background-color: var(--white);
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.contact-form {
    text-align: left;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--text-dark);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #DDDDDD;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Noto Sans TC', sans-serif;
    transition: border-color 0.3s ease;
}

/* 當使用者點擊輸入框時，邊框變成主色(綠色) */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}

.submit-btn {
    width: 100%;
    font-size: 1.1rem;
    padding: 15px;
    border: none;
    cursor: pointer;
}

/* --- 頁尾 (Footer) --- */
.footer {
    background-color: #222222;
    /* 深色頁尾，增加穩定感 */
    color: #AAAAAA;
    text-align: center;
    padding: 40px 5%;
    font-size: 0.9rem;
}

.footer .disclaimer {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #777777;
}

/* --- 獨立文章總覽頁專屬樣式 --- */
.articles-page-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 5%;
    min-height: 60vh;
}

.page-header {
    text-align: center;
    margin-bottom: 50px;
}

/* --- 衛教專欄區塊 --- */
.articles-section {
    padding: 45px 5% 25px 5%;
    background-color: var(--white);
    text-align: center;
}

.articles-subtitle {
    color: var(--text-light);
    margin-bottom: 40px;
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
    text-align: left;
}

.article-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #EEEEEE;
    transition: transform 0.3s ease;
}

.article-card:hover {
    transform: translateY(-5px);
}

/* --- 修改：讓卡片圖片完整呈現，並顯示可點擊的放大鏡游標 --- */
.article-img {
    position: relative;
    height: 200px;
    background-color: #FAFAFA;
    /* 改為淺灰底，讓完整圖片的留白處更自然 */
    background-size: contain;
    /* 🌟 關鍵：改成 contain，完整顯示不裁切 */
    background-position: center top;
    /* 讓圖片靠上方置中對齊 */
    background-repeat: no-repeat;
    /* 避免圖片重複拼接 */
    cursor: zoom-in;
    /* 🌟 滑鼠移過去會變成放大鏡游標，提示使用者可點擊 */
}

/* --- 圖片放大提示橫條 --- */
.img-zoom-hint {
    position: absolute;
    bottom: 0;
    /* 貼齊圖片方塊的最底部 */
    left: 0;
    width: 100%;
    /* 寬度填滿 */
    background-color: rgba(0, 0, 0, 0.5);
    /* 半透明黑色背景，很有質感 */
    color: #ffffff;
    /* 白色文字 */
    text-align: center;
    font-size: 0.8rem;
    /* 字體稍微縮小，作為提示即可 */
    padding: 6px 0;
    letter-spacing: 1px;
    /* 增加字距讓文字更好讀 */
    pointer-events: none;
    /* 🌟 關鍵防呆：讓滑鼠點擊穿透這層文字，確保放大功能依然生效 */
}

.article-content {
    padding: 25px;
}

.article-tag {
    display: inline-block;
    padding: 4px 12px;
    background-color: #E8F5E9;
    color: var(--primary-color);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.article-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--text-dark);
    line-height: 1.4;
}

.article-excerpt {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 限制只顯示兩行文字 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
    transition: gap 0.3s ease;
}

.read-more:hover {
    gap: 12px;
    /* 滑鼠移過去時，箭頭會往右推，增加互動感 */
}

.view-all-container {
    margin-top: 20px;
}

/* --- 回到頁頂按鈕 (Back to Top) --- */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    /* 預設為透明隱藏 */
    visibility: hidden;
    /* 預設隱藏，避免擋住其他元素的點擊 */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    /* 確保它浮在畫面的最上層 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 當 JS 幫按鈕加上 .show 類別時，讓它浮現 */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--primary-hover);
    transform: translateY(-5px);
    /* 滑鼠移過去會往上浮動 */
}

/* =========================================
   文章內頁 (Article Page) 專屬樣式
   ========================================= */

.article-container {
    max-width: 800px;
    /* 限制閱讀寬度，眼睛比較不累 */
    margin: 60px auto;
    padding: 0 5%;
    min-height: 60vh;
}

/* 標頭資訊 */
.article-header {
    text-align: center;
    margin-bottom: 40px;
}

.article-main-title {
    font-size: 2.2rem;
    color: var(--text-dark);
    line-height: 1.4;
    margin: 15px 0;
}

.article-meta {
    color: var(--text-light);
    font-size: 0.95rem;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* 懶人包圖片展示 */
.article-hero-image {
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
}

.article-hero-image img {
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.article-hero-image figcaption {
    margin-top: 10px;
    font-size: 0.85rem;
    color: #999;
}

/* 分隔線 */
.article-divider {
    border: 0;
    border-top: 1px solid #EEEEEE;
    margin-bottom: 40px;
}

/* 內文排版 (Typography) */
.article-body {
    font-size: 1.15rem;
    /* 字體稍微放大，方便長輩閱讀 */
    line-height: 1.8;
    color: #444444;
}

.article-body h2 {
    color: var(--primary-color);
    font-size: 1.6rem;
    margin: 40px 0 20px 0;
    border-left: 5px solid var(--primary-color);
    padding-left: 15px;
}

.article-body h3 {
    color: var(--text-dark);
    font-size: 1.3rem;
    margin: 30px 0 15px 0;
}

.article-body p {
    margin-bottom: 20px;
}

/* 文字畫重點效果 */
.highlight-text {
    background: linear-gradient(to top, rgba(46, 125, 50, 0.15) 40%, transparent 40%);
    font-weight: 700;
}

/* 警告/注意區塊 */
.notice-box {
    background-color: #FFF3E0;
    /* 溫和的橘黃色背景 */
    border-left: 4px solid #FF9800;
    padding: 15px 20px;
    margin: 25px 0;
    border-radius: 0 8px 8px 0;
}

.notice-box p {
    margin: 0;
}

/* 打勾清單 */
.check-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 30px;
}

.check-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.check-list i {
    color: var(--primary-color);
}

/* 營養師提醒區塊 (總結) */
.dietitian-tip {
    background-color: #E8F5E9;
    /* 淡綠色背景 */
    padding: 30px;
    border-radius: 12px;
    margin-top: 50px;
    text-align: center;
}

.dietitian-tip h3 {
    color: var(--primary-color);
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.strong-conclusion {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-hover);
    margin-top: 15px;
}

/* 返回按鈕 */
.back-to-list {
    text-align: center;
    margin-top: 60px;
}

/* =========================================
   首頁快顯廣告 (Promo Modal)
   ========================================= */
.promo-modal {
    display: none;
    /* 預設隱藏，由 JavaScript 控制顯示 */
    position: fixed;
    z-index: 3000;
    /* 層級設到最高，確保蓋過所有東西 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* 半透明黑底 */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.promo-modal.show {
    display: flex;
    /* 當 JS 加上 show 類別時顯示 */
    opacity: 1;
}

.promo-content {
    position: relative;
    width: 90%;
    max-width: 600px;
    /* 限制最大寬度，電腦版才不會太大 */
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* 帶有微彈跳感的出現動畫 */
}

.promo-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: block;
    /* 消除圖片下方的預設空白 */
}

/* 懸浮在右上角的關閉按鈕 */
.promo-close {
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: var(--primary-color);
    /* 您的品牌綠色 */
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
    z-index: 10;
}

.promo-close:hover {
    transform: scale(1.1) rotate(90deg);
    /* 滑鼠移過去會稍微放大並旋轉 */
    background-color: var(--primary-hover);
}

@keyframes popIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- 手機版微調 --- */
@media (max-width: 768px) {
    .article-main-title {
        font-size: 1.8rem;
    }

    .article-body {
        font-size: 1.05rem;
    }

    .article-body h2 {
        font-size: 1.4rem;
    }

    .dietitian-tip {
        padding: 20px;
    }
}

/* --- 圖片放大預覽視窗 (Lightbox) 專屬樣式 --- */
.image-modal {
    display: none;
    /* 預設隱藏 */
    position: fixed;
    z-index: 2000;
    /* 確保浮在網頁所有東西的最上層 */
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    /* 半透明黑底 */
    align-items: center;
    justify-content: center;
}

.image-modal.show {
    display: flex;
    /* 當加上 .show 時顯示並置中 */
    animation: fadeIn 0.3s ease;
}

.modal-content {
    max-width: 95%;
    max-height: 85vh;
    /* 限制高度不超出螢幕 */
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    object-fit: contain;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-modal:hover {
    color: var(--primary-color);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* =========================================
   手機版響應式設計 (Mobile RWD) - 最終整合版
   請確保整個 CSS 檔案中，只有這一個 @media 區塊
   ========================================= */
@media (max-width: 768px) {

    /* --- 1. 導覽列基底設定 --- */
    .navbar {
        flex-direction: row;
        justify-content: space-between;
        padding: 15px 5%;
        position: relative;
    }

    /* 🌟 修正：手機版 Logo 折行與縮小問題 */
    .logo {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .logo .separator {
        display: none;
        /* 手機版隱藏中間的「|」分隔線 */
    }

    .logo .brand-name {
        font-size: 1.3rem;
    }

    /* --- 2. 顯示漢堡圖示 --- */
    .hamburger {
        display: block;
        margin-left: auto;
    }

    /* --- 3. 隱藏右上角的預約按鈕 --- */
    .header-btn {
        display: none;
    }

    /* --- 4. 下拉選單 --- */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.98);
        flex-direction: column;
        text-align: center;
        padding: 20px 0;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        z-index: 999;
    }

    .nav-links.active {
        display: flex;
        gap: 25px;
    }

    /* --- 5. 主視覺區 (Hero) 排版 --- */
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 40px 5%;
    }

    /* 🌟 修正：手機版主視覺標題與內文自動換行、置中 */
    .hero-content h1 {
        line-height: 1.5;
        word-break: normal;
        text-align: center;
        margin: 0 auto 20px auto;
    }

    .hero-content h1 .title-small {
        font-size: 1.6rem;
    }

    .hero-content h1 .title-large {
        font-size: 2rem;
    }

    .hero-content p {
        text-align: center;
        margin: 0 auto 30px auto;
    }

    .hero-image {
        margin-top: 30px;
    }

    .hero-actions {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .btn-outline {
        margin-left: 0;
    }

    /* --- 6. 關於建銘 --- */
    .about-container {
        flex-direction: column;
        text-align: center;
    }

    .about-text .section-title {
        text-align: center;
    }

    .about-credentials {
        display: inline-block;
        text-align: left;
    }

    .social-links {
        justify-content: center;
    }

    /* --- 7. 聯絡表單 --- */
    .contact-container {
        padding: 25px 15px;
    }

    /* 🌟 修正：手機版 Footer 置中 */
    .footer {
        text-align: center !important;
        padding: 30px 15px;
    }

    /* --- 8. 回到頁頂按鈕微調 --- */
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }

    /* --- 9. 進一步縮減區塊間距 --- */
    .about-section,
    .services-section,
    .articles-section {
        padding: 35px 5% 15px 5%;
    }

    .contact-section {
        padding: 35px 5% 40px 5%;
    }

    .section-title {
        margin-bottom: 20px;
    }

    /* --- 圖片放大提示橫條 --- */
.img-zoom-hint {
    position: absolute;
    bottom: 0;         /* 貼齊圖片方塊的最底部 */
    left: 0;
    width: 100%;       /* 寬度填滿 */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景，很有質感 */
    color: #ffffff;    /* 白色文字 */
    text-align: center;
    font-size: 0.8rem; /* 字體稍微縮小，作為提示即可 */
    padding: 6px 0;
    letter-spacing: 1px; /* 增加字距讓文字更好讀 */
    pointer-events: none; /* 🌟 關鍵防呆：讓滑鼠點擊穿透這層文字，確保放大功能依然生效 */
}


}
/* =========================================
   文章總覽页 - 分類篩選與返回按鈕
   ========================================= */
.back-to-home-top {
    text-align: left;
    margin-bottom: 20px;
}

.back-home-link {
    color: #666;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.back-home-link:hover {
    color: var(--primary-color);
    /* 觸發滑鼠懸停時換成您的品牌綠 */
}

.category-filter-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    flex-wrap: wrap;
    /* 關鍵：手機螢幕寬度不夠時自動優雅折行 */
}

/* 膠囊按鈕基礎樣式 */
.filter-btn {
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    color: #555;
    padding: 8px 18px;
    border-radius: 20px;
    /* 圓角膠囊感，手機極好點擊 */
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background-color: #e8e8e8;
    color: var(--primary-color);
}

/* 被選取時的標籤樣式 */
.filter-btn.active {
    background-color: var(--primary-color);
    /* 變為品牌綠底 */
    border-color: var(--primary-color);
    color: white;
    /* 白字 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* =========================================
   📱 手機版專屬優化 (螢幕寬度 768px 以下觸發)
   ========================================= */
@media (max-width: 768px) {

    /* 1. 調整總覽頁兩側留白，讓卡片有更多空間 */
    .articles-page-container {
        padding: 0 15px;
        margin: 20px auto;
    }

    /* 2. 🌟 分類標籤進化：App 風格橫向滑動 */
    .category-filter-container {
        flex-wrap: nowrap;
        /* 強制不換行 */
        overflow-x: auto;
        /* 內容太多時產生橫向卷軸 */
        justify-content: flex-start;
        padding-bottom: 10px;
        margin-top: 20px;
        -webkit-overflow-scrolling: touch;
        /* 讓 iOS (iPhone) 滑動更順暢、有慣性 */

        /* 隱藏醜醜的底層卷軸，保留滑動功能 */
        scrollbar-width: none;
        /* Firefox */
    }

    .category-filter-container::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera */
    }

    /* 3. 確保標籤文字不折行，稍微縮小更好點擊 */
    .filter-btn {
        white-space: nowrap;
        font-size: 0.85rem;
        padding: 6px 14px;
        flex-shrink: 0;
        /* 防止按鈕被過度擠壓變形 */
    }

    /* 4. 卡片自動變單欄，調整圖片比例不佔版面 */
    .article-grid {
        display: grid;
        grid-template-columns: 1fr;
        /* 強制單欄顯示 */
        gap: 20px;
    }

    .article-card {
        margin: 0;
    }

    .article-img {
        height: 180px;
        /* 手機版圖片稍微縮減高度，避免一張卡片佔滿整個螢幕 */
    }

    .article-title {
        font-size: 1.1rem;
        /* 標題稍微縮小 */
    }

    .page-header {
        margin-bottom: 30px;
    }
}
/* =========================================
   文章內頁：兩欄式圖文網格排版 (修復標題擠壓問題)
   ========================================= */
.grid-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
    line-height: 1.7;
}

/* 🌟 升級版左側標題欄 */
.grid-label {
    flex-shrink: 0;
    width: 175px;
    padding-right: 15px;
    font-weight: bold;
    color: #333;
    word-break: keep-all;
}

.grid-label i {
    color: var(--primary-color, #2e7d32);
    margin-right: 6px;
}

.grid-desc {
    flex-grow: 1;
    color: #444;
}

/* =========================================
   打勾清單防跑版優化
   ========================================= */
.check-list {
    list-style: none;
    padding-left: 0;
}

.check-list li {
    display: block;
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    line-height: 1.7;
}

.check-list li i {
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--primary-color, #2e7d32);
}

/* 📱 手機版專屬優化：統一對齊 768px 觸發標準 */
@media (max-width: 768px) {

    /* 原本的圖文網格設定 */
    .grid-item {
        flex-direction: column;
    }

    .grid-label {
        width: 100%;
        padding-right: 0;
        margin-bottom: 4px;
    }

    /* 🌟 新增：讓打勾清單的標題在手機上獨立成一行 */
    .check-list li strong {
        display: block;
        margin-bottom: 4px;
        color: #333;
    }
}

/* =========================================
   榮譽榜區塊 (Honors Section)
   ========================================= */
.honors-section {
    padding: 45px 5% 60px 5%;
    background-color: var(--bg-color);
    /* 淺灰底色，與衛教專欄的白底區隔開來 */
    text-align: center;
}

.honor-container {
    max-width: 800px;
    margin: 0 auto;
}

.honor-card {
    background: var(--white);
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #EEEEEE;
    display: flex;
    flex-direction: column;
    gap: 30px;
    transition: transform 0.3s ease;
}

.honor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.honor-info {
    text-align: center;
}

.honor-icon {
    font-size: 2.5rem;
    color: #FBC02D;
    /* 獎盃金黃色 */
    margin-bottom: 10px;
}

.honor-info h3 {
    font-size: 1.4rem;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.honor-award {
    font-size: 1.15rem;
    color: var(--text-light);
    font-weight: 500;
}

.honor-award span {
    color: #D32F2F;
    /* 突顯第三名的紅色字體，呼應印章 */
    font-weight: 700;
    font-size: 1.4rem;
    margin-left: 8px;
}

.honor-gallery {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.honor-img-wrapper {
    flex: 1;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #EEEEEE;
    background-color: #FAFAFA;
    height: 260px;
    /* 固定高度，讓長寬不同的兩張照片看起來一樣整齊 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.honor-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 保留完整比例不裁切，尤其獎狀需要看完整文字 */
    padding: 10px;
    /* 留一點白邊像相框 */
    cursor: zoom-in;
    transition: transform 0.3s ease;
}

.honor-img-wrapper:hover img {
    transform: scale(1.03);
    /* 滑鼠游標移過去微放大 */
}

/* 📱 榮譽榜 - 手機版適應 */
@media (max-width: 768px) {
    .honor-card {
        padding: 25px 15px;
    }

    .honor-gallery {
        flex-direction: column;
    }

    .honor-img-wrapper {
        height: auto;
        min-height: 220px;
    }
}