/* 全域設定 */
:root {
    --primary-blue: #005f73;
    --secondary-blue: #0a9396;
    --accent-teal: #94d2bd;
    --light-gray: #f8f9fa;
    --dark-text: #264653;
}

body {
    font-family: "PingFang TC", "Helvetica", sans-serif;
    margin: 0;
    line-height: 1.7;
    background-color: var(--light-gray);
    color: var(--dark-text);
}

/* 主頁橫幅更新 */
.hero {
    height: 60vh;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=1200');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

.hero h1 { font-size: 2.5rem; margin-bottom: 0; }
.hero .en-title { font-size: 1.2rem; letter-spacing: 4px; text-transform: uppercase; opacity: 0.9; }

/* 分頁卡片標題樣式 */
.card-title {
    padding: 20px 15px;
    text-align: center;
    background: white;
}

.card-title .cn { display: block; font-size: 1.1rem; font-weight: bold; color: var(--primary-blue); }
.card-title .en { display: block; font-size: 0.75rem; color: #999; text-transform: uppercase; margin-top: 5px; }

/* 通用容器 */
.container { max-width: 1000px; margin: 40px auto; padding: 0 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 25px; }

.card {
    background: white; border-radius: 15px; overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-decoration: none; transition: 0.3s;
}
.card:hover { transform: translateY(-8px); }
.card img { width: 100%; height: 180px; object-fit: cover; }


/* --- 保留原本的設定，以下為新增或修改的部分 --- */

/* 定義動畫動作 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 動態類別：套用此類別的元素會執行動畫 */
.animate-fade {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0; /* 初始隱藏，動畫執行後顯示 */
}

/* 延遲效果：讓卡片一個接一個出現 */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }

/* 微調 Hero 文字動畫 */
.hero h1, .hero p, .hero .en-title {
    animation: fadeInUp 1s ease-out forwards;
}
.hero p { animation-delay: 0.3s; opacity: 0; }

/* 原本的 .card 加入稍微放大的懸停感 */
.card:hover {
    transform: translateY(-8px) scale(1.02); /* 修改：多了 scale 縮放感 */
    transition: 0.3s;
}

/* --- 分頁標題微調 --- */
h2 small {
    display: block;
    font-size: 0.6em;
    color: var(--secondary-blue);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 5px;
}

ul {
    padding-left: 20px;
}

li {
    margin-bottom: 12px;
}

/* 讓圖片在分頁中也能自適應 */
.detail-info img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 20px 0;
}

/* --- 在 style.css 底部新增或修改 --- */

/* 導覽列內的圓形圖示按鈕 */
.home-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--primary-blue);
    color: white !important; /* 強制覆蓋原本連結顏色 */
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.home-icon:hover {
    background-color: var(--secondary-blue);
    transform: scale(1.1) rotate(-10deg); /* 懸停時稍微放大並旋轉 */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* 讓導覽列文字與圖示並排好看 */
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 25px; /* 稍微縮減高度 */
}

/* --- 修改原本的 .detail-info --- */
.detail-info {
    background: white;
    padding: 30px 40px; /* 增加內距：上下30px，左右40px */
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px; /* 讓每個區塊間保有距離 */
}

/* --- 針對有左邊框的區塊特別優化 --- */
.detail-info[style*="border-left"] {
    padding-left: 35px; /* 確保文字不會黏在彩色邊框上 */
}

img {
    object-fit: cover; /* 這會自動裁切圖片中心，不會讓圖片變形 */
}