/*
Theme Name: 鄭慧鋼琴藝術中心 CWPI Theme
Author: Your Name
Description: CWPI 官方網站佈景主題
Version: 1.0.1
*/

/* 全局設定 */
:root {
    --primary-text: #333333;
    --secondary-text: #666666;
    --light-bg: #ffffff;
    --theme-red: #8b2138;
    --footer-bg: #8c8c8c;
    --content-width: 1000px;
}

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

body {
    font-family: 'Noto Sans TC', sans-serif;
    line-height: 1.8;
    background-color: var(--light-bg);
    color: var(--primary-text);
    font-weight: 300;
}

h1, h2, h3 { font-family: 'Noto Serif TC', serif; font-weight: 600; }

.container { 
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 60px 20px !important;
    padding-top: 60px !important;
    padding-right: 20px !important;
    padding-bottom: 0px !important;
    padding-left: 20px !important;

}

.course{ 
    max-width: var(--content-width);
    padding-top:20px !important;
    padding-bottom: 20px !important;
}

.courselist{ 
    max-width: var(--content-width);
    padding-top:20px !important;
    padding-bottom: 20px !important;
}





/* 導覽列 */
header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background-color: #ffffff; max-width: var(--content-width); margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-icon { width: 30px; height: 30px; background-color: var(--theme-red); border-radius: 4px; }
.logo-text { font-family: 'Noto Serif TC', serif; font-size: 18px; line-height: 1.2; color: var(--primary-text); }
.logo-subtext { font-size: 10px; color: var(--secondary-text); font-family: 'Arial', sans-serif; }
nav ul { list-style: none; display: flex; gap: 20px; }
nav a { text-decoration: none; color: var(--primary-text); font-size: 13px; transition: color 0.3s; }
nav a:hover { color: var(--theme-red); }

/* Hero Banner */
.hero { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1520523839897-bd0b52f945a0?auto=format&fit=crop&q=80&w=1920') center/cover; height: 450px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #ffffff; }
.hero h1 {     font-size: 60px;
    letter-spacing: 5px;
    margin-bottom: 0px;
    font-weight: 300;}
.hero p { font-size: 18px; letter-spacing: 1.5px; font-weight: 300; line-height: 2; color: #eeeeee; max-width: 700px; }

/* 內容區塊 */
.page-content {
    padding-top: 60px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 20px;
}

.text-col{
    padding-left: 20px;
}

.room-block { margin-bottom: 60px; }
.room-title { font-size: 22px; color: #000000; margin-bottom: 0px; font-family: 'Noto Serif TC', serif; }
.flex-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 10px;
}
.img-col { flex: 0 0 55%; }
.text-col { flex: 1; }
.text-col ul { padding-left: 20px; font-size: 14px; color: var(--primary-text); line-height: 2; }
.img-wrapper { margin-bottom: 15px; }
.img-wrapper img { width: 100%; height: auto; display: block; border: 1px solid #eeeeee; }
.img-caption { background-color: #f5f5f5; color: #555555; text-align: center; font-size: 16px; padding: 8px 5px; }
.single-col { max-width: 55%; }

/* 價目表 / 時段表 */
.schedule-table-wrapper { width: 100%; overflow-x: auto; }
.schedule-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: center; }
.schedule-table th, .schedule-table td { border: 1px solid #dddddd; padding: 10px 5px; }
.schedule-table th { background-color: #000000; color: #ffffff; font-weight: normal; }
.text-blue { color: #4a90e2; }
.table-note { font-size: 10px; color: var(--secondary-text); margin-top: 10px; line-height: 1.5; }

/* 頁尾 */
footer { background-color: var(--footer-bg); color: #ffffff; text-align: center; padding: 15px 0; font-size: 12px; letter-spacing: 1px; margin-top: 0px; }

/* RWD 響應式設計 */
@media (max-width: 768px) {
    header { flex-direction: column; gap: 15px; }
    .flex-layout { flex-direction: column; gap: 20px; }
    .img-col, .single-col { flex: 0 0 100%; max-width: 100%; }
}




/* =========================================
   學員風采 (Showcase) 專屬樣式
   ========================================= */

/* 音樂會 - 網格排版 */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.gallery-img {
    width: 100%;
    object-fit: cover;
    /* border-radius: 2px; */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.05); */
    transition: transform 0.3s ease;
}

.gallery-img:hover {
    /* transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); */
}

.gallery-tall { height: 350px; }
.gallery-short { height: 220px; }

/* 學員獲獎區塊 */
.awards-intro {
    font-size: 14px;
    color: var(--secondary-text);
    margin-bottom: 10px;
    line-height: 2;
    max-width: 900px;
}

.awards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 10px; /* 上下 40px, 左右 30px */
    margin-top: 10px;
}

.award-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 獲獎錦旗/海報 */
.award-img {
    width: 100%;
    /* max-width: 280px; */
    height: auto;
    object-fit: contain;
    margin-bottom: 0px;
    /* box-shadow: 0 8px 20px rgba(0,0,0,0.1); */
}

.award-text {
    font-size: 14px;
    color: var(--primary-text);
    margin-top: 10px;
}

/* 針對學員風采頁面的 RWD 響應式補充 */
@media (max-width: 768px) {
    .gallery-grid, .awards-grid {
        grid-template-columns: 1fr;
    }
    .gallery-tall, .gallery-short {
        height: auto;
        min-height: 250px;
    }
}





/* =========================================
   2. 藝術總監及師資介紹 (Slick Carousel 版)
   ========================================= */
.faculty-section {
    background-color: #ffffff;
}

/* 帶有左右紅線的標題 */
.faculty-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #900000;
    font-size: 32px;
    margin-bottom: 50px;
    font-weight: normal;
}
.faculty-section-title .line {
    flex: 1;
    height: 1px;
    background-color: #900000;
    margin: 0 20px;
    opacity: 0.4;
    max-width: 120px;
}

/* 輪播區塊容器與間距設定 */
.relative-container {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}
.faculty-slider {
    padding: 0 40px; /* 左右留白給箭頭 */
}
.carousel-item {
    margin: 0 15px; /* 三張圖之間的縫隙 */
    outline: none; /* 移除點擊時的藍色預設外框 */
}

/* 統一圖片高度與裁切 */
.carousel-item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

/* 底部文字與按鈕 */
.carousel-info {
    text-align: center;
    margin-top: 0px;
}
.carousel-info h3 {
    margin: 0 0 15px 0;
    font-size: 22px;
    color: #333333;
    font-weight: normal;
    letter-spacing: 2px;
}
.btn-outline-red {
    display: inline-block;
    padding: 8px 30px;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid #b77777;
    color: #b77777;
    border-radius: 30px;
    transition: all 0.3s ease;
    background: transparent;
}
.btn-outline-red:hover {
    background-color: #900000;
    border-color: #900000;
    color: #ffffff;
}

/* 自訂左右箭頭樣式 */
.slick-custom-prev, .slick-custom-next {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    font-size: 50px;
    color: #777777;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
}
.slick-custom-prev:hover, .slick-custom-next:hover {
    color: #222222;
}
.slick-custom-prev {
    left: -20px;
}
.slick-custom-next {
    right: -20px;
}

/* 強制隱藏所有圖片下方的內容 */
.carousel-item .carousel-info {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s ease !important;
}

/* 強制只有「正中間 (.slick-center)」的那一張，才顯示內容 */
.carousel-item.slick-center .carousel-info {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 讓旁邊的圖片稍微變暗，凸顯中間 */
.carousel-item img {
    opacity: 0.5 !important;
    transition: all 0.4s ease !important;
}
.carousel-item.slick-center img {
    opacity: 1 !important;
}

/* 人物介紹區塊 (Flexbox) */
/* =========================================
   人物介紹區塊 (文繞圖排版)
   ========================================= */
.profile-block {
    display: block; /* 取消 Flexbox，讓內容自然流動 */
    margin-bottom: 60px;
}

/* 清除浮動，避免影響到下方的其他區塊 */
.profile-block::after {
    content: "";
    display: table;
    clear: both;
}

/* 左側照片改為浮動 (Float) */
.profile-img {
    float: left;
    width: 35%; /* 控制圖片佔的寬度比例 */
    margin-right: 40px; /* 圖片右側與文字的距離 */
    margin-bottom: 0px; /* 圖片下方與文字的距離 (當文字繞下來時不會太擠) */
}

.profile-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 2px;
}

/* 右側文字區塊 */
.profile-text {
    display: block;
}

.profile-text h2 {
    font-size: 26px;
    margin-top: -10px;
    color: #000000;
}

/* 副導師的名字標題略小 */
.teacher-profile h2 {
    font-size: 22px;
}

.profile-text p {
    font-size: 13px;
    color: var(--secondary-text);
    margin-bottom: 15px;
    text-align: justify;
    line-height: 2;
}

/* 英文簡介字體微調 */
.english-bio, 
.english-bio p {
    font-family: ui-monospace;
    font-size: 14px !important;
    color: #666666 !important;
}

/* 針對師資介紹頁面的 RWD 響應式補充 */
@media (max-width: 768px) {
    .profile-img {
        float: none; /* 手機版取消浮動 */
        width: 100%; /* 圖片改為滿版 */
        margin-right: 0;
        margin-bottom: 20px;
    }
}



/* =========================================
   聯絡我們 (Contact Us) 專屬樣式
   ========================================= */

.contact-section {
    display: flex;
    gap: 20px;
    padding: 70px 0;
}

/* 左側圖片區 */
.left-col {
    flex: 1;
}

.left-col img {
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* 右側內容與表單區 */
.right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.right-col h2 {
    font-size: 42px;
    color: #000000;
    margin-top: -20px;
}

/* 聯絡資訊清單 */
.contact-info {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.contact-info li {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--primary-text);
    margin-bottom: 15px;
}

.contact-info i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    background-color: #8c8c8c;
    color: #ffffff;
    border-radius: 50%;
    margin-right: 15px;
    font-size: 14px;
}

/* 表單元件樣式 */
.contact-form-wrapper .form-group {
    margin-bottom: 25px;
}

.contact-form-wrapper .form-row {
    display: flex;
    gap: 20px;
}

.contact-form-wrapper .form-row .form-group {
    flex: 1;
}

.contact-form-wrapper .form-label {
    display: block;
    font-size: 13px;
    color: var(--secondary-text);
    margin-bottom: 5px;
}

.contact-form-wrapper .form-label span {
    color: var(--theme-red); /* 必填星號紅色 */
}

.contact-form-wrapper .form-control {
    width: 100%;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    padding: 8px 0;
    font-size: 14px;
    outline: none;
    font-family: inherit;
    background-color: transparent;
    transition: border-color 0.3s;
}

.contact-form-wrapper .form-control:focus {
    border-bottom-color: var(--theme-red);
}

.contact-form-wrapper textarea.form-control {
    resize: vertical;
    height: 80px;
}

/* 表單底部區 (reCAPTCHA + 按鈕) */
.contact-form-wrapper .form-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 20px;
}

/* 模擬 reCAPTCHA */
.recaptcha-mock {
    border: 1px solid #d3d3d3;
    background: #f9f9f9;
    padding: 10px 15px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 260px;
    height: 70px;
}

.recaptcha-mock input[type="checkbox"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.recaptcha-text {
    font-size: 13px;
    color: #555555;
    flex-grow: 1;
}

.recaptcha-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 9px;
    color: #999999;
}

.recaptcha-logo i {
    color: #4a90e2;
    font-size: 24px;
    margin-bottom: 3px;
}

/* 傳送按鈕 */
.btn-submit {
    background-color: var(--theme-red);
    color: #ffffff;
    border: none;
    padding: 12px 45px;
    font-size: 14px;
    border-radius: 2px;
    cursor: pointer;
    height: 45px;
    transition: background-color 0.3s;
}

.btn-submit:hover {
    background-color: #d84b59;
}

/* RWD 響應式排版 */
@media (max-width: 900px) {
    .contact-section {
        flex-direction: column;
        gap: 40px;
    }

    .left-col img {
        min-height: 300px;
    }

    .contact-form-wrapper .form-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}




/* =========================================
   課程介紹 (Courses) 專屬樣式
   ========================================= */
:root {
    --dark-bg: #050505; /* 非常深的黑色 */
}

/* 新生面試簡介區塊 */
.intro-section {
    padding: 60px 20px;
    text-align: center;
    background-color: var(--light-bg);
}
.intro-section h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #000;
}
.intro-section p {
    font-size: 14px;
    color: var(--secondary-text);
    /* max-width: 800px; */
    margin: 0 auto;
    line-height: 2;
}

/* 課程列表區塊共用設定 */
.course-section {
    padding: 40px 0;
}

/* =========================================
   課程介紹 - 區塊標題與網格 (修復排版版)
   ========================================= */

/* 區塊標題：強制置中並修復橫線 */
.course-section .section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    font-size: 28px;
    margin-bottom: 20px;
    gap: 20px;
    width: 100%;
}

/* 帶有左右橫線的標題 (用於黑底區塊) */
.course-section .title-with-lines::before,
.course-section .title-with-lines::after {
    content: "";
    display: block !important;
    height: 1px;
    width: 60px;
    background-color: #666666; /* 調整橫線顏色 */
}

/* 白底與黑底的標題文字顏色修正 */
.bg-dark .section-title { color: #ffffff; }
.bg-light .section-title { color: var(--primary-text); }

/* 課程網格 (2欄) */
.course-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 950px;
    margin: 0 auto;
}

/* 單個課程卡片 */
.course-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 讓文字靠左對齊 */
    text-align: left;
    height: 100%; /* 確保卡片等高 */
}

/* 統一卡片內圖片的高度，避免高低不均 */
.course-card img {
    width: 100%;
    height: 250px; 
    object-fit: cover;
    margin-bottom: 20px;
    border-radius: 4px;
}

.course-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
    font-weight: 500;
}

.course-card p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
}

/* 了解更多按鈕 */
.course-card .btn-more {
    margin-top: 5px; /* 與上方文字拉開距離 */
    padding: 4px 30px;
    font-size: 13px;
    text-decoration: none;
    border: 1px solid;
    border-radius: 30px;
    transition: all 0.3s ease;
    background: transparent;
    display: inline-block;
}

/* 黑底變體 (黑底白字) */
.bg-dark {
    background-color: var(--dark-bg);
    color: #ffffff;
}
.bg-dark .secondary-text { color: #ffffff; }
.bg-dark .btn-more { border-color: #ffffff; color: #ffffff; }
.bg-dark .btn-more:hover { background-color: #ffffff; color: var(--dark-bg); }

/* 白底變體 (白底黑字) */
.bg-light {
    background-color: var(--light-bg);
    color: var(--primary-text);
}
.bg-light .secondary-text { color: var(--secondary-text); }
.bg-light .btn-more { border-color: var(--primary-text); color: var(--primary-text); }
.bg-light .btn-more:hover { background-color: var(--primary-text); color: #ffffff; }

/* 區塊標題 */
.section-title {
    /* text-align: center; */
    font-size: 26px;
    margin-bottom: 0px;
    position: relative;
    display: flex;
    /* align-items: center;
    justify-content: center; */
    gap: 20px;
}

/* 帶有左右橫線的標題 (用於黑底區塊) */
.title-with-lines::before,
.title-with-lines::after {
    content: "";
    height: 1px;
    width: 60px;
    background-color: #555555;
    display: inline-block;
}

/* 課程網格 (2欄) */
.course-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

/* 單個課程卡片 */
.course-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.course-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    margin-bottom: 10px;
    border-radius: 1px;
    border: 1px solid #72615b; /* 👈 新增這行：1px 淺灰色邊框 */
}
.course-card h3 {
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: 400;
    font-family: 'Noto Sans TC';
}
.course-card p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 5px;
    font-family: 'Noto Sans TC';
    font-weight: 400;
}

/* 了解更多按鈕 */
.btn-more {
    margin-top: 15px;
    padding: 6px 25px;
    font-size: 12px;
    text-decoration: none;
    border: 1px solid;
    border-radius: 20px;
    transition: all 0.3s ease;
    background: transparent;
}

/* 針對課程介紹頁面的 RWD 響應式補充 */
@media (max-width: 768px) {
    .course-grid { grid-template-columns: 1fr; gap: 40px; padding: 0 20px; }
    .title-with-lines::before, .title-with-lines::after { width: 30px; }
}




/* =========================================
   音樂活動 (Events) 專屬樣式
   ========================================= */

/* 活動相簿區塊 */
.gallery-section {
    margin-bottom: 0px;
}

.gallery-section h2 {
    font-size: 24px;
    margin-bottom: 0px;
    color: #222222;
}

/* 網格系統 */
.grid {
    display: grid;
    gap: 10px;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 10px;
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 10px;
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 10px;
}

/* 特殊排版：左側大圖，右側兩小圖堆疊 */
.grid-featured {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 15px;
}

.grid-featured .main-img {
    grid-row: 1 / span 2;
}

/* 圖片共用設定 */
.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 4px; */
    transition: transform 0.3s ease;
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
    display: block;
    min-height: 200px;
}

.gallery-img:hover {
    /* transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); */
}

/* 針對海報比例的設定 (不裁切) */
.poster-img {
    object-fit: contain;
    background-color: #f5f5f5;
}

/* 針對音樂活動頁面的 RWD 響應式補充 */
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4, .grid-featured {
        grid-template-columns: 1fr;
    }
    .grid-featured .main-img {
        grid-row: auto;
    }
}





/* =========================================
   中心介紹 (About) 專屬樣式
   ========================================= */

/* Hero Banner 內部文字排版 */


/* 圖文交錯區塊共用設定 */
.section-padding {
    padding: 0px 0;
}

.row {
    display: flex;
    align-items: center;
    gap: 30px; /* 將原本的 50px 縮小為 30px，讓圖文更緊湊 */
}

.row.reverse {
    flex-direction: row-reverse;
}

.col-half {
    flex: 1;
}

.col-half img {
    width: 100% !important; /* 強制覆蓋掉 PHP 裡的 80% 寬度限制 */
    max-width: 100%;
    display: block;
    border-radius: 4px; /* 加上一點微圓角讓視覺更柔和 (可選) */
}

/* 預設所有的 gallery-section 都加上 60px 的上方間距 */
.gallery-section {
    margin-bottom: 60px;
    
}

/* 針對「第一個」 gallery-section 將上方間距設為 0 */
.gallery-section:first-of-type {
    margin-bottom: 60px;    
}

/* 針對「最後一個」 gallery-section 將上方間距設為 0 */
.gallery-section:last-of-type {
    margin-bottom: 60px;
}

.section-padding:last-of-type {
    margin-bottom: 60px;
}

/* 文字內容排版 */
.text-content h2 {
    font-size: 42px;
    margin-bottom: 0px;
    color: #222222;
}
.text-content p {
    font-size: 14px;
    color: var(--secondary-text);
    margin-bottom: 0px;
    text-align: justify;
}
.intro-text {
    font-size: 15px !important;
    color: #000000 !important;
    margin-bottom: 0px !important;
}

/* 黑底教學方法區塊 */
.dark-section {
color: #ffffff;
    padding: 100px 0;
    padding-top: 60px;
    padding-right: 0px;
    padding-bottom: 200px;
    padding-left: 0px;
    margin-top: 60px;
    margin-bottom: 0px;
}
.dark-section .text-content {
    max-width: 40%;
}
.dark-section h2 {
    color: #ffffff;
}
.dark-section p {
    color: #dddddd;
}

/* 設施圖片網格 */
.facilities-section {
    padding-top: 0px;
    padding-bottom: 60px;
}
.facilities-section h2 {
    margin-top: 0px;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}
.grid-3 img {
    width: 100%;
    /* height: 200px; */
    object-fit: cover;
    display: block;
}
.facility-footer-text {
    font-size: 12px;
    color: var(--secondary-text);
    margin-top: 20px;
    line-height: 1.8;
}

/* 中心介紹專屬 RWD 響應式補充 */
@media (max-width: 768px) {
    .row, .row.reverse {
        flex-direction: column;
    }
    .col-half img {
        width: 100% !important;
    }
    .dark-section .text-content {
        max-width: 100%;
    }
    .grid-3 {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   琴室租用 (Rental) 專屬樣式
   ========================================= */

.rental-section {
    margin-bottom: 60px;
}
.rental-section:last-of-type {
    margin-bottom: 20px;
}

/* 標題 (音樂廳 Recital Hall) */
.rental-title {
    font-size: 28px;
    color: #000000;
    margin-bottom: 0px;
    font-family: 'Noto Serif TC', serif;
}

/* 佈局設定 (左圖右文) */
.layout-flex .rental-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 10px;
}
.layout-flex .rental-left {
    flex: 6;
}
.layout-flex .rental-right {
    flex: 4;
}

/* 佈局設定 (單欄置中純圖) */
.layout-single .rental-layout {
    display: block;
    max-width: 800px;
    margin: 0 auto;
}
.layout-single .rental-title {
    text-align: center;
}
.layout-single .rental-left {
    width: 100%;
}

/* 圖片與說明文字 */
.rental-images {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.rental-img-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}
.rental-caption {
    background-color: #dcdcdc;
    color: #333333;
    text-align: center;
    padding: 10px 15px;
    font-size: 15px;
}

/* 左側最下方的詢問文字 */
.rental-footer-text {
    margin-top: 5px;
    font-size: 16px;
    color: #000000;
    font-weight: 300;
}

/* 右側特色列表 */
.rental-features {
    font-size: 15px;
    line-height: 2;
    color: #222222;
}
.rental-features ol, 
.rental-features ul {
    padding-left: 20px;
}
.rental-features li {
    margin-bottom: 10px;
}

/* =========================================
   價目表表格樣式 (完全匹配設計圖)
   ========================================= */
.schedule-section {
    padding-top: 0px;
    padding-bottom: 100px;
}
.table-responsive {
    overflow-x: auto;
    margin-bottom: 60px;
    margin-top: 10px;
}

/* 表格主體設定 */
.rental-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px; /* 匹配截圖小字 */
    min-width: 900px;
    font-family: 'Arial', 'Noto Sans TC', sans-serif;
    color: #333333;
}

/* 邊框顏色與內距設定 */
.rental-table th, .rental-table td {
    border: 1px solid #d1d5db; /* 淺灰色邊框 */
    padding: 15px 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.6;
}

/* 黑底白字表頭 */
.rental-table th {
    background-color: #000000;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 1px;
}

/* 第一直欄 (琴房名稱) */
.rental-table .td-room {
    font-weight: 700;
    font-size: 14px;
    background-color: #fcfcfc; /* 微微的灰白底區隔 */
}

/* WordPress 編輯器產生的 p 標籤歸零 */
.rental-table p {
    margin-bottom: 0;
}

/* 表格底部的備註列 (滿版) */
.rental-table .schedule-notes-td {
    text-align: left;
    font-size: 12px;
    color: #555555;
    padding: 12px 15px;
    background-color: #ffffff;
}

/* RWD 手機版響應式 */
@media (max-width: 768px) {
    .layout-flex .rental-layout {
        flex-direction: column;
        gap: 30px;
    }
}

/* 表格隔行換色 (Zebra Striping) */
.rental-table tbody tr:nth-child(even) td {
    background-color: #f9f9f9; /* 偶數行加上極淺的灰底 */
}

/* 讓第一直欄 (琴房名稱) 在偶數行時也稍微加深一點點，保持層次感 */
.rental-table tbody tr:nth-child(even) td.td-room {
    background-color: #f0f0f0; 
}

/* 確保最底部的「備註列」維持白底，不受隔行換色影響 */
.rental-table tbody tr:nth-child(even) td.schedule-notes-td {
    background-color: #ffffff;
}





/* =========================================
   首頁 (Homepage) 專屬樣式
   ========================================= */

/* 共用設定 */
.section-padding {
    padding: 0px 0;
}
.bg-dark {
    background-color: #111111;
    color: #ffffff;
}
.bg-light {
    background-color: #f9f9f9;
    color: #333333;
}
.bg-dark .section-title {
    color: #ffffff;
}

/* 了解更多按鈕 (基礎樣式) */
.btn-more {
    display: inline-block;
    padding: 4px 30px;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid;
    border-radius: 30px;
    transition: all 0.3s ease;
    background: transparent;
}
.bg-dark .btn-more,
.intro-bg-section .btn-more {
    border-color: #ffffff;
    color: #ffffff;
}
.bg-light .btn-more {
    border-color: #333333;
    color: #333333;
}
.btn-more:hover {
    background-color: #cccccc;
    color: #000000 !important;
    border-color: #cccccc;
}

/* 0. 主視覺 Banner */

/* 載入自訂字體 Butler Stencil (OTF 版本) */
@font-face {
    font-family: 'Butler Stencil';
    src: url('./font/Butler_Ultra_Light_Stencil.otf') format('opentype'); /* 👈 檔名已修正為截圖中的名稱 */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* 0. 主視覺 Banner */


/* 控制內容靠右對齊 (貼齊粉色線) */
.hero-container {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* 將內容推到容器最右側 */
}

.hero-text h1 {
    font-family: 'Butler Stencil';
    font-size: 102px;
    color: #000000;
    letter-spacing: 0px;
    line-height: 1;
    text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.8);
    text-align: right;
}

/* 在手機版時自動改回置中，確保畫面平衡 */
@media (max-width: 768px) {
    .hero-container {
        justify-content: center;
    }
    .hero-text h1 {
        text-align: center;
        font-size: 36px;
    }
}

/* 1. 中心介紹 (深色背景圖疊加) */
/* 1. 中心介紹 (深色背景圖疊加) */
.intro-bg-section {
    position: relative;
    color: #ffffff;
    display: flex;
    align-items: center;
    min-height: 500px; /* 確保區塊有足夠高度 */
}

/* 漸層遮罩：左側全黑，向右漸層透明，完美融合背景圖片 */
.intro-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0) 100%);
    z-index: 1;
}

.intro-bg-section .container {
    position: relative;
    z-index: 2; /* 確保文字在遮罩之上 */
    width: 100%;
}

/* 控制內容區塊靠左，且內部文字置中對齊 */
.intro-content {
    max-width: 500px; /* 限制寬度，讓它乖乖待在左半邊 */
    text-align: center; 
}

/* 帶有左右橫線的標題 */
.intro-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 32px;
    margin-bottom: 0px;
}

/* 標題左右的裝飾白線 */
.intro-section-title .line {
    flex: 1;
    height: 1px;
    background-color: #ffffff;
    margin: 0 20px;
    opacity: 0.6; /* 稍微透明一點比較有質感 */
    max-width: 60px; /* 控制線條長度 */
}

.intro-bg-section p {
    font-size: 14px;
    line-height: 2.2;
    color: #cccccc;
    margin-bottom: 10px;
}

/* 手機版響應式調整 */
@media (max-width: 768px) {
    .intro-content {
        margin: 0 auto; /* 在手機版上自動置中 */
    }
    .intro-overlay {
        /* 手機版因為螢幕窄，加深整體遮罩確保字體清晰 */
        background: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 100%);
    }
}

/* 2. 藝術總監及師資介紹 (仿輪播排版) */
.index-course{
padding: 0px 20px !important;
}

.faculty-section .section-title {
    text-align: center;
    margin-bottom: 50px;
}
.carousel-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}
.carousel-arrow {
    font-size: 24px;
    color: #999999;
    cursor: pointer;
    transition: 0.3s;
}
.carousel-arrow:hover {
    color: #000000;
}
.carousel-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
/* 兩側較小的照片 */
.carousel-side img {
    width: 200px;
    height: 300px;
    object-fit: cover;
    opacity: 0.5;
    border-radius: 8px;
    transition: 0.3s;
}
/* 中央放大的照片卡片 */
.carousel-center {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding-bottom: 25px;
    width: 320px;
    transform: scale(1.05); /* 讓中間那張稍微凸顯放大 */
    z-index: 2;
}
.carousel-center img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}
.carousel-center h3 {
    margin: 20px 0;
    font-size: 22px;
    color: #333333;
}
.btn-red {
    border-color: #900000 !important;
    background-color: #900000 !important;
    color: #ffffff !important;
}
.btn-red:hover {
    background-color: #bb0000 !important;
}

/* =========================================
   3. 課程介紹 (2x2 網格與橫圖)
   ========================================= */
.courses-section {
    background-color: #0d0d0d !important;
    padding: 60px 0;
}

/* 帶有左右細白線的標題 */
.courses-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 32px !important;
    margin-bottom: 0px !important;
    letter-spacing: 2px;
    font-family: 'Noto Serif TC', serif;
    font-weight: 600;
}
.courses-section-title .line {
    flex: 1 !important;
    height: 1px !important;
    background-color: #ffffff !important;
    margin: 0 30px !important;
    opacity: 0.3 !important;
    max-width: 150px !important; /* 控制線條長度 */
}

/* 核心：2x2 網格排版 */
.courses-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 11fr) !important; /* 強制分兩欄 */
    gap: 40px;
    max-width: 900px;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

.course-card {
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
}

/* 鎖定橫式扁平圖片比例 (約 21:9 或 16:7 比例) */
.course-image-wrapper {
    width: 100% !important;
    height: 200px !important; /* 固定高度壓扁圖片 */
    overflow: hidden !important;
    margin-bottom: 10px !important;
}
.course-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 確保縮放不變形 */
    border-radius: 0 !important; /* 取消任何圓角 */
}

/* 文字排版 */
.course-info {
    text-align: left !important;
}
.course-info h3 {
    font-size: 18px !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
    font-weight: normal !important;
    letter-spacing: 1px;
}
.course-info p {
    font-size: 14px !important;
    color: #aaaaaa !important;
    line-height: 1.8 !important;
    margin: 0 0 15px 0 !important;
}

/* 了解更多按鈕樣式 */
.btn-more-outline {
    display: inline-block !important;
    padding: 3px 24px !important;
    font-size: 13px !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
    opacity: 0.8;
    margin-top: 5px;
}
.btn-more-outline:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
    opacity: 1;
}

/* RWD 響應式：手機版自動改回單欄 */
@media (max-width: 768px) {
    .courses-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 0 20px;
    }
    .course-image-wrapper {
        height: 160px !important; /* 手機上稍微縮小高度 */
    }
}
/* =========================================
   4. 大師班及其他音樂活動 (完全匹配設計圖)
   ========================================= */
.music-events-section {
    background-color: #ffffff !important;
    padding: 80px 0 !important;
}

/* 帶有左右細黑線的置中標題 */
.music-events-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #000000 !important;
    font-size: 32px !important;
    margin-bottom: 0px !important;
    letter-spacing: 2px;
    font-family: 'Noto Serif TC', serif;
    font-weight: 600;


}
.music-events-title .line {
    flex: 1 !important;
    height: 1px !important;
    background-color: #000000 !important;
    margin: 0 30px !important;
    opacity: 0.2 !important;
    max-width: 150px !important;
}

/* 強制桌機版三欄等寬並排 */
.music-events-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    max-width: 1100px;
    margin: 0 auto;
    margin-top: 10px;
}

/* 卡片容器：內部全部強制水平置中 */
.music-event-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 👈 核心：讓圖片和內容全部水平置中 */
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 橫式扁平圖片框 */
.music-event-img-box {
    width: 100% !important;
    height: 200px !important; /* 鎖定橫圖高度 */
    overflow: hidden !important;
    margin-bottom: 0px !important;
}
.music-event-img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important; /* 移除任何圓角 */
}

/* 文字內容與按鈕置中 */
.music-event-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 👈 強制內部文字與按鈕置中 */
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.music-event-info h3 {
    font-size: 24px !important;
    color: #333333 !important;
    margin: 0 0 10px 0 !important;
    font-weight: normal !important;
    letter-spacing: 1px;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    font-size: 24px;
    letter-spacing: 2px;
    text-align: center;
    font-family: 'Noto Serif TC', serif;
    font-weight: 600;
}

.musicbig{
    padding: 0px 0px !important;
}

/* 圖 1 的圓角細黑邊框按鈕 */
.btn-event-round {
    display: inline-block !important;
    padding: 3px 30px !important;
    font-size: 14px !important;
    color: #555555 !important;
    border: 1px solid #555555 !important; /* 細邊框 */
    border-radius: 30px !important; /* 圓角膠囊狀 */
    text-decoration: none !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.btn-event-round:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

/* 手機版響應式調整：自動改回單欄 */
@media (max-width: 768px) {
    .music-events-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 0 20px;
    }
    .music-event-img-box {
        height: 180px !important;
    }
}

/* 5. 學員風采 */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}
.showcase-card {
    background-color: #222222;
    border-radius: 4px;
    overflow: hidden;
}
.showcase-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}
.showcase-footer {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.showcase-footer span {
    font-size: 16px;
    font-weight: 500;
}
.showcase-footer .btn-more {
    padding: 6px 20px;
    font-size: 12px;
}

/* 🛠️ 強制修復課程介紹文字消失的問題 */
.courses-grid .course-info h3 {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    color: #ffffff !important;
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: 400;
    font-family: 'Noto Sans TC';
    margin: 0 0 5px 0 !important;
}

.courses-grid .course-info p {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    color: #aaaaaa !important;
    margin: 0 0 5px 0 !important;
}

/* 🛠️ 強制顯示活動描述文字，並鎖定按鈕對齊 */
.events-card .event-info {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 描述文字的樣式 */
.events-card .event-info .event-text {
    font-size: 14px !important;
    color: #666666 !important; /* 深灰色字體，適合白底 */
    line-height: 1.8 !important;
    margin: 0 0 20px 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* 強制將按鈕推至最底部對齊 */
.events-card .btn-event-outline {
    margin-top: auto !important;
    align-self: flex-start !important;
}

/* =========================================
   RWD 手機版響應式設定
   ========================================= */
@media (max-width: 992px) {
    .course-grid, .events-grid, .showcase-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .hero-text h1 {
        font-size: 36px;
    }
    .carousel-layout {
        flex-direction: column;
    }
    .carousel-side {
        display: none; /* 手機版隱藏兩側較小照片，只顯示中央 */
    }
    .carousel-center {
        transform: scale(1);
        width: 100%;
        max-width: 350px;
    }
    .course-grid, .events-grid, .showcase-grid {
        grid-template-columns: 1fr;
    }
}



/* =========================================
   5. 學員風采 (完全匹配設計圖)
   ========================================= */
.students-section {
    background-color: #000000 !important;
    padding: 80px 0 !important;
}

/* 帶有左右細白線的置中標題 */
.students-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 32px !important;
    margin-bottom: 60px !important;
    font-weight: normal !important;
    letter-spacing: 2px;
}
.students-section-title .line {
    flex: 1 !important;
    height: 1px !important;
    background-color: #ffffff !important;
    margin: 0 30px !important;
    opacity: 0.3 !important;
    max-width: 150px !important;
}

/* 兩欄網格居中對齊 */
.students-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 強制均分兩欄 */
    gap: 40px !important;
    max-width: 1000px; /* 縮小容器最大寬度，讓整體更居中集中 */
    margin: 0 auto;
}

/* 移除原本的灰色底色，改成透明 */
.student-card {
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 圖片框：取消任何圓角 */
.student-img-box {
    width: 100% !important;
    height: 380px !important; /* 鎖定直式/近正方大圖比例 */
    overflow: hidden !important;
    margin-bottom: 25px !important;
}
.student-img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}

/* 核心：讓名字靠左、按鈕靠右 */
.student-info {
    display: flex !important;
    flex-direction: row !important;      /* 橫向排列 */
    justify-content: space-between !important; /* 👈 關鍵：文字推到最左，按鈕推到最右 */
    align-items: center !important;       /* 垂直居中對齊 */
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.student-info h3 {
    font-size: 18px !important;
    color: #ffffff !important;
    margin: 0 !important;
    font-weight: normal !important;
    letter-spacing: 1px;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* 圓角白邊框按鈕 */
.btn-student-outline {
    display: inline-block !important;
    padding: 6px 28px !important;
    font-size: 13px !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
    opacity: 0.8;
}
.btn-student-outline:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
    opacity: 1;
}

/* 手機版響應式 */
@media (max-width: 768px) {
    .students-grid {
        grid-template-columns: 1fr !important; /* 改為單欄 */
        gap: 50px !important;
        padding: 0 20px;
    }
    .student-img-box {
        height: 300px !important;
    }
}

        .students-showcase-section {
            background-color: #000000 !important;
        }

        /* 帶有左右細白線的置中標題 */
        .students-showcase-title {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: #ffffff !important;
            letter-spacing: 2px;
            font-size: 32px !important;
            margin-bottom: 0px !important;
            letter-spacing: 2px;
            font-family: 'Noto Serif TC', serif;
            font-weight: 600;   
        }

        .students-showcase-title .line {
            flex: 1 !important;
            height: 1px !important;
            background-color: #ffffff !important;
            margin: 0 30px !important;
            opacity: 0.3 !important;
            max-width: 150px !important;
        }

        /* 兩欄網格居中對齊 */
        .students-showcase-grid {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important; /* 強制均分兩欄 */
            gap: 40px !important;
            max-width: 1000px !important; /* 縮小寬度讓卡片更集中高雅 */
                margin-top: 10px !important;
                margin-right: auto !important;
                margin-bottom: 0px !important;
                margin-left: auto !important
        }

        /* 移除任何外掛或主題自帶的灰色底色與陰影 */
        .students-showcase-card {
            display: flex !important;
            flex-direction: column !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
        }

        /* 圖片框：取消任何圓角並鎖定高質感直式比例 */
        .students-showcase-img-box {
            width: 100% !important;
            height: 380px !important;
            overflow: hidden !important;
            margin-bottom: 10px !important;
        }
        .students-showcase-img-box img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            border-radius: 0 !important;
        }

        /* 核心修復：強制讓名字靠左、按鈕靠右並排 */
        .students-showcase-footer {
            display: flex !important;
            flex-direction: row !important; /* 橫向排列 */
            justify-content: space-between !important; /* 👈 關鍵：名字推到最左，按鈕推到最右 */
            align-items: center !important; /* 垂直置中 */
            width: 100% !important;
            background: transparent !important;
            padding: 0 !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        .students-showcase-footer span {
            font-size: 18px !important;
            color: #ffffff !important;
            font-weight: 300;
            letter-spacing: 1px;
            opacity: 1 !important;
            visibility: visible !important;
            display: inline-block !important;
        }

        /* 圓角細白邊框按鈕 */
        .btn-showcase-outline {
            display: inline-block !important;
                padding: 3px 30px !important;
            font-size: 13px !important;
            color: #ffffff !important;
            border: 1px solid #ffffff !important;
            border-radius: 20px !important;
            text-decoration: none !important;
            background: transparent !important;
            transition: all 0.3s ease !important;
            opacity: 0.8;
        }
        .btn-showcase-outline:hover {
            background-color: #ffffff !important;
            color: #000000 !important;
            opacity: 1;
        }

        /* 手機版自動改回單欄 */
        @media (max-width: 768px) {
            .students-showcase-grid {
                grid-template-columns: 1fr !important;
                gap: 50px !important;
                padding: 0 20px;
            }
            .students-showcase-img-box {
                height: 300px !important;
            }
        }


        .wct{
            padding-top: 0px !important;
    padding-right: 20px !important;
    padding-bottom: 0px !important;
    padding-left: 20px !important;
        }

        .indexhero{
                height: 80vh;
        }

        .contact-form-wrapper{
            margin-bottom: 60px;
        }



        /* =========================================
   手機版選單完全封鎖修復版 (強制塞入三間內)
   ========================================= */

/* 預設桌機版：隱藏三間按鈕 */
.mobile-toggle-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 999;
}
.mobile-toggle-btn span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #333333;
    transition: all 0.3s ease;
}

/* 📱 進入手機版 (768px 以下) */
@media (max-width: 768px) {
    /* 建立一條左右並排的橫列：Logo 在左，三間在右 */
    .header-main-bar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 15px 20px !important;
        box-sizing: border-box !important;
        background-color: #ffffff !important;
    }
    
    header.site-header {
        display: block !important; /* 解除原有彈性排版，防止選單跟 Logo 並排 */
        position: relative !important;
        background-color: #ffffff !important;
        padding: 0 !important;
    }

    /* 顯示三間按鈕 */
    .mobile-toggle-btn {
        display: flex !important;
    }

    /* 🌟 核心修正：強力隱藏並收合那排亂掉的文字 */
    header.site-header nav.mobile-nav-hide {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background-color: #ffffff !important;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1) !important;
        max-height: 0 !important; /* 👈 強制收起到 0 高度 */
        opacity: 0 !important;     /* 👈 強制看不見 */
        visibility: hidden !important;
        overflow: hidden !important;
        transition: all 0.3s ease-in-out !important;
        z-index: 998 !important;
    }

    /* 點擊「三間」按鈕後，選單解除封印向下展開 */
    header.site-header nav.mobile-nav-hide.open {
        max-height: 500px !important; 
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 🌟 核心修正：強制把原本橫向的 `ul` 改為「直向排列」，不再往左右推擠斷行 */
    header.site-header nav.mobile-nav-hide ul {
        display: flex !important;
        flex-direction: column !important; /* 👈 橫排變直排 */
        width: 100% !important;
        padding: 15px 25px !important;
        margin: 0 !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }

    /* 修正每個選單項目的外觀，拉開垂直間距 */
    header.site-header nav.mobile-nav-hide ul li {
        width: 100% !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid #f5f5f5 !important; /* 優雅的選單分隔線 */
        display: block !important;
    }

    header.site-header nav.mobile-nav-hide ul li a {
        display: block !important;
        font-size: 16px !important;
        color: #333333 !important;
        text-decoration: none !important;
        white-space: nowrap !important; /* 👈 防止中文字自己斷行 */
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 三間按鈕變 X 的動畫 */
    .mobile-toggle-btn.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .mobile-toggle-btn.active span:nth-child(2) {
        opacity: 0;
    }
    .mobile-toggle-btn.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}

.intro-block{
    margin-bottom: 30px;
}