article.blog-post h2 {
    font-size:18px;
}
/* 1. 設定網格容器 */
article.blog-post {
    display: grid;
    grid-template-columns: 35% 1fr; /* 左 35%，右剩下全包 */
    gap: 10px 25px;
    align-items: start;
}

/* 2. 關鍵！解除 header 的外盒限制，讓裡面的元素各自獨立排版 */
.post-header {
    display: contents; 
}

/* 3. 左側欄：圖片 (佔據上層) 與 日期 (接在圖片下方) */
.post-media {
    grid-column: 1 / 2;
    grid-row: 1 / 4; /* 讓圖片往下橫跨 3 個橫列 */
}

.post-meta {
    grid-column: 1 / 2; /* 指定在第 1 欄 (左邊) */
    grid-row: 4 / 5; /* 放在第 4 橫列，剛好在圖片的正下方 */
    margin-top: 10px; /* 與圖片保持一點點距離 */
    font-size: 0.9em; /* (選用) 讓日期字體小一點 */
}

/* 4. 右側欄：分類、標題、內文、閱讀全文 */
.post-categories {
    grid-column: 2 / 3; /* 指定在第 2 欄 (右邊) */
    grid-row: 1 / 2; /* 第 1 列 */
}

.post-title {
    grid-column: 2 / 3;
    grid-row: 2 / 3; /* 第 2 列 */
    margin-top: 0; 
}

.post-content {
    grid-column: 2 / 3;
    grid-row: 3 / 4; /* 第 3 列 */
}

.read-more, 
.post-footer {
    grid-column: 2 / 3; /* 剩餘的東西都丟去右邊 */
}

/* =========================================
   📱 手機版響應式設定 (單欄排列，並設定順序)
   ========================================= */
@media (max-width: 768px) {
    article.blog-post {
        grid-template-columns: 1fr; /* 變回單一欄位 */
    }
    
    /* 透過 order 重新決定手機版從上到下的顯示順序 */
    .post-media { order: 1; grid-column: 1 / -1; grid-row: auto; }
    .post-meta { order: 2; grid-column: 1 / -1; grid-row: auto; margin-top: 5px; } /* 日期依然在圖片下方 */
    .post-categories { order: 3; grid-column: 1 / -1; grid-row: auto; margin-top: 15px; }
    .post-title { order: 4; grid-column: 1 / -1; grid-row: auto; }
    .post-content { order: 5; grid-column: 1 / -1; grid-row: auto; }
    .read-more, .post-footer { order: 6; grid-column: 1 / -1; grid-row: auto; }
}

/* 1. 強制修改輪播圖外框的高度 */
#featured-slider .slick-list {
    height: 350px !important; /* 想要多高可以直接改這裡的數字 */
}

/* 2. 讓裡面的每張投影片、背景圖也配合新高度 */
#featured-slider .slider-item,
#featured-slider .slider-item-bg {
    height: 350px !important;
}

/* 3. (選用) 微調文字區塊的位置 */
/* 如果變矮之後，文字區塊看起來太擠，可以稍微縮小文字區塊的上下間距 */
#featured-slider .cv-inner {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* =========================================
   情況 B 修正版：背景橫幅等比縮小且不裁切
   ========================================= */
.entry-header {
    height: 150px !important; /* 保持你想要的高度 */
    
    /* 關鍵修改：從 cover 改為 contain */
    background-size: contain !important; /* 讓圖片完整顯示，等比縮小，不被截斷 */
    
    background-repeat: no-repeat !important; /* 確保圖片縮小後，旁邊不會出現重複的圖片 */
    background-position: center center !important; /* 圖片在 150px 區域內置中顯示 */
    padding: 0 !important;
    margin: 0 !important;
}