/* ==========================================================================
   1. 全站區塊移除與隱藏
   ========================================================================== */
#jp-relatedposts, .jp-relatedposts, .sharedaddy.sd-like, .sharedaddy.sd-sharing-enabled, 
.sharedaddy.sd-like-enabled, .jetpack-likes-widget-wrapper, .sd-block.sd-like, 
#jp-post-flair, h3.sd-title { 
    display: none !important; visibility: hidden !important; height: 0 !important; 
    margin: 0 !important; padding: 0 !important; opacity: 0 !important; 
}

/* ==========================================================================
   2. 文章 Banner (Trip-Carousel) 尺寸定義
   ========================================================================== */
#banner_trip { 
    width: 100vw !important; height: 37.5vw !important; min-height: 720px !important; 
    margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; 
    margin-top: -100px !important; position: relative; overflow: hidden; 
}
#banner_trip img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* ==========================================================================
   3. 行程卡片圖片比例鎖定 (ID: image-box 強制 4:3)
   ========================================================================== */
@media (min-width: 769px) { 
    .elementor-element#image-box .elementor-widget-container { 
        display: flex !important; align-items: stretch !important; gap: 20px; 
    } 
}
#image-box img { 
    width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; 
    object-fit: cover !important; display: block !important; border-radius: 15px; 
    margin-bottom: 8px !important; 
}
#image-box .elementor-image-box-content { padding: 0 !important; flex-grow: 1 !important; }
@media (max-width: 768px) { .elementor-element#image-box .elementor-widget-container { display: block !important; } }

/* ==========================================================================
   4. 航班資訊與報名表格
   ========================================================================== */
.flight-container { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 20px !important; width: 100% !important; }
.flight-card { 
    flex: 1 1 calc(50% - 15px) !important; max-width: calc(50% - 10px) !important; 
    background: #fff; border: 1px solid #f0f0f0; border-radius: 12px; padding: 20px; 
    box-sizing: border-box; color: #000000 !important; 
}
.card-header { color: #000000 !important; font-weight: bold; }
.route-container { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; }
.airport-box { background-color: #fdf5e6 !important; padding: 12px !important; border-radius: 8px !important; width: 35% !important; flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; }
.path-info { flex-grow: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; padding: 0 10px !important; position: relative !important; }
.dur-text { font-size: 11px; color: #000000 !important; margin-bottom: 5px; text-align: center; opacity: 0.8; }
.path-line { width: 100% !important; height: 1px !important; background: #333 !important; display: flex !important; justify-content: center !important; align-items: center !important; position: relative !important; }
.path-line .plane-icon { background: #fff !important; padding: 0 4px !important; transform: rotate(90deg) !important; color: #000000 !important; position: relative; z-index: 2; }
.ap-code { font-weight: bold; font-size: 18px; color: #000000 !important; }
.ap-name, .ap-time { font-size: 12px; color: #000000 !important; margin-top: 2px; }
.airline-name { font-size: 13px; margin: 15px 0 8px; font-weight: 500; color: #000000 !important; }

.tour-grid-table-final { width: 100%; border-collapse: collapse; border: none !important; text-align: center; color: #000000 !important; }
.tour-grid-table-final thead th { border-left: none !important; border-right: none !important; padding: 15px 10px; color: #000000 !important; border-bottom: 2px solid #000 !important; }
.tour-grid-table-final tbody td { border-left: none !important; border-right: none !important; padding: 15px 10px; color: #000000 !important; border-bottom: 1px solid #eee !important; }
.btn-enroll-final {
    display: inline-block !important; background-color: #9A1E23 !important; color: #ffffff !important; 
    text-decoration: none !important; border-radius: 100px !important; font-weight: bold !important; 
    transition: all 0.3s ease !important; padding: 12px 35px !important; font-size: 1.1rem !important; 
    line-height: 1 !important; cursor: pointer !important; border: none !important;
}

/* ==========================================================================
   5. 甄選臺灣 (taiwan) 與 寰宇首席 (global) - 手風琴
   ========================================================================== */

/* --- [A. 電腦版與平板：橫向手風琴] --- */
@media (min-width: 768px) {
    .taiwan-accordion-container, .global-accordion-container {
        display: flex !important; flex-direction: row !important; height: 600px !important; 
        gap: 12px !important; margin: 40px auto !important; width: 100% !important;
    }
    .taiwan-accordion-container .accordion-item, .global-accordion-container .accordion-item {
        position: relative !important; flex: 1 !important; overflow: hidden !important; 
        border-radius: 20px !important; transition: all 0.6s cubic-bezier(0.25, 1, 0.3, 1) !important; 
        cursor: pointer !important; background-size: cover !important; background-position: center !important;
    }
    .taiwan-accordion-container .accordion-item.active, .global-accordion-container .accordion-item.active { flex: 6 !important; }
    
    /* 非啟動項目的內容完全隱藏 */
    .taiwan-accordion-container .accordion-item:not(.active) .accordion-content {
        opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
    }

    /* 白色直排標籤 (收合時) */
    .taiwan-accordion-container .accordion-item::before, .global-accordion-container .accordion-item::before {
        content: attr(data-title) !important; position: absolute !important; top: 50% !important; left: 50% !important; 
        transform: translate(-50%, -50%) !important; color: #ffffff !important; font-size: 1.5rem !important; 
        font-weight: 700 !important; z-index: 50 !important; text-shadow: 0px 0px 12px rgba(0,0,0,0.9) !important;
        writing-mode: vertical-rl !important; text-orientation: upright !important; letter-spacing: 0.4em !important;
        transition: opacity 0.3s ease !important;
    }
    .taiwan-accordion-container .accordion-item.active::before, .global-accordion-container .accordion-item.active::before { opacity: 0 !important; }

    /* 展開後的內容區塊定位 */
    .taiwan-accordion-container .accordion-content, .global-accordion-container .accordion-content {
        position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; padding: 40px !important;
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%) !important;
        display: flex !important; flex-direction: column !important; align-items: flex-start !important; /* 文字靠左排 */
        opacity: 0 !important; transition: all 0.4s ease !important; z-index: 60 !important;
    }
    .taiwan-accordion-container .accordion-item.active .accordion-content, .global-accordion-container .accordion-item.active .accordion-content { opacity: 1 !important; }

    /* 電腦版標題樣式鎖定：白色、大字 */
    .taiwan-accordion-container .acc-title, .global-accordion-container .acc-title {
        color: #ffffff !important; font-size: 2.5rem !important; font-weight: 700 !important; margin-bottom: 15px !important; text-shadow: 2px 2px 10px rgba(0,0,0,0.5) !important;
    }
    .taiwan-accordion-container .acc-desc, .global-accordion-container .acc-desc {
        color: #ffffff !important; font-size: 1.1rem !important; line-height: 1.6 !important; margin-bottom: 25px !important; max-width: 600px !important;
    }
}

/* --- [B. 手機版：垂直點擊展開模式] --- */
@media (max-width: 767px) {
    .taiwan-accordion-container, .global-accordion-container { display: flex !important; flex-direction: column !important; height: auto !important; gap: 15px !important; }

    .taiwan-accordion-container .accordion-item, .global-accordion-container .accordion-item {
        flex: none !important; width: 100% !important; height: 120px !important; 
        border-radius: 15px !important; background-size: cover !important; background-position: center !important;
        transition: height 0.5s cubic-bezier(0.25, 1, 0.3, 1) !important; position: relative !important; overflow: hidden !important;
    }

    .taiwan-accordion-container .accordion-item.active, .global-accordion-container .accordion-item.active { height: 400px !important; }
    .taiwan-accordion-container .accordion-item::before, .global-accordion-container .accordion-item::before { display: none !important; }

    .taiwan-accordion-container .accordion-content, .global-accordion-container .accordion-content {
        position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
        display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important;
        background: rgba(0, 0, 0, 0.5) !important; padding: 20px !important; text-align: center !important;
    }

    .taiwan-accordion-container .acc-title, .global-accordion-container .acc-title { font-size: 1.6rem !important; color: #fff !important; margin: 0 !important; }
    
    .taiwan-accordion-container .acc-desc, .global-accordion-container .acc-desc,
    .taiwan-accordion-container .acc-btn, .global-accordion-container .acc-btn {
        opacity: 0 !important; visibility: hidden !important; display: none !important;
    }

    .taiwan-accordion-container .accordion-item.active .acc-desc,
    .taiwan-accordion-container .accordion-item.active .acc-btn,
    .global-accordion-container .accordion-item.active .acc-desc,
    .global-accordion-container .accordion-item.active .acc-btn {
        display: inline-block !important; opacity: 1 !important; visibility: visible !important;
    }
    .taiwan-accordion-container .accordion-item.active .acc-title, .global-accordion-container .accordion-item.active .acc-title { margin-bottom: 12px !important; }
}

/* 共通按鈕設定 */
.acc-btn { background-color: #9A1E23 !important; color: #ffffff !important; padding: 10px 30px !important; border-radius: 50px !important; font-weight: 700 !important; text-decoration: none !important; }

/* ==========================================================================
   6. 生活美學 (seminar_grid) - 修正圖片比例為橫式 4:3
   ========================================================================== */
.custom-post-grid-container { width: 100% !important; overflow: visible !important; }
.custom-post-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; padding: 25px 0; width: 100%; }
.post-card { 
    background-color: #ffffff !important; border-radius: 10px !important; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1) !important; 
    padding: 25px !important; display: flex !important; flex-direction: column !important; align-items: center; text-align: center; transition: transform 0.3s ease;
}
.post-card:hover { transform: translateY(-5px); }

/* 修改重點：將 aspect-ratio 從 3 / 4 改為 4 / 3 */
.post-thumbnail { 
    width: 100%; 
    aspect-ratio: 4 / 3 !important; 
    overflow: hidden; 
    margin-bottom: 20px; 
    border-radius: 5px; 
}

.post-thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.post-line-red { font-size: 1.2rem !important; color: #8B0000 !important; font-weight: bold !important; margin-bottom: 8px !important; }
.post-line-black { font-size: 1.1rem !important; color: #000000 !important; font-weight: bold !important; margin: 8px 0 15px 0 !important; }
.post-line-gold { font-size: 1.2rem !important; color: #B8860B !important; font-family: 'Georgia', serif; margin-bottom: 20px !important; }
.btn-more-content { background-color: #9A1E23 !important; color: #ffffff !important; padding: 12px 30px !important; border-radius: 50px !important; text-decoration: none !important; font-weight: 700 !important; }

/* ==========================================================================
   7. 相關閱讀與 RWD 修正
   ========================================================================== */
.related-cards-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 50px auto; width: 80%; max-width: 1200px; }
.related-card-item { background: #fff; border: 1px solid #f2f2f2; border-radius: 12px; overflow: hidden; text-align: center; transition: transform 0.3s ease; }
.card-image-ratio { width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.card-title a { font-size: 1rem !important; font-weight: bold !important; color: #8b261e; text-decoration: none; }
.card-more-link { font-size: 0.8rem; font-weight: bold; color: #000; text-decoration: none; position: relative; padding-bottom: 2px; }
.card-more-link::after { content: ''; position: absolute; width: 30px; height: 1.5px; bottom: 0; left: 50%; transform: translateX(-50%); background-color: #000; }

@media (max-width: 1024px) {
    .custom-post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .flight-card { flex: 1 1 100% !important; max-width: 100% !important; }
    .tour-grid-table-final { min-width: 600px !important; }
}
@media (max-width: 600px) {
    .custom-post-grid, .related-cards-container { grid-template-columns: 1fr; }
}

/* --- 針對行程表格手機版的水平滑動修正 --- */

@media (max-width: 768px) {

    /* 1. 找出表格的外層容器，設定寬度 100% 並允許水平捲動 */

    .tour-schedule-container-final {

        width: 100% !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch; /* 讓 iOS 滑動更順暢 */

        display: block !important;

    }



    /* 2. 強制表格內的文字不換行（維持橫式排列） */

    .tour-grid-table-final {

        min-width: 600px !important; /* 設定一個最小寬度，確保欄位不會擠在一起 */

        table-layout: auto !important;

    }



    .tour-grid-table-final th, 

    .tour-grid-table-final td {

        white-space: nowrap !important; /* 強制文字不自動換行 */

        padding: 12px 15px !important; /* 增加一點左右間距，滑動時較易閱讀 */

    }

}