/* JCT Post Card - 響應式樣式表 */

/* 
 * 請確保 PHP 輸出的 HTML 結構如下 (移除 inline style)：
 * <div class="jct-post-card">
 *   <div class="jct-post-card-image"><img src="..."></div>
 *   <div class="jct-post-card-content">
 *     <div class="jct-post-card-title">標題</div>
 *     <div class="jct-post-card-excerpt">摘要...</div>
 *   </div>
 * </div>
 */

/* --- 電腦版 (預設) --- */
.jct-post-card {
    display: flex;
    flex-direction: row; /* 強制左右排列 */
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    /* 電腦版可以設定一個舒適的高度或 min-height */
    min-height: 160px; 
}

.jct-post-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.jct-post-card-image {
    flex: 0 0 30%; /* 圖片區域固定佔 30% 寬度 */
    max-width: 300px;
    overflow: hidden;
    align-self: stretch; /* 撐滿卡片全高 */
}

.jct-post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 左右裁切，填滿全高 */
    object-position: center;
    display: block;
}

.jct-post-card-content {
    flex: 1; /* 文字區域佔滿剩餘空間 */
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 內容垂直置中 */
    overflow: hidden;
}

.jct-post-card-title {
    font-size: 20pt;
    font-weight: bold;
    margin: 0 0 10px 0;
    line-height: 1.4;
    color: #333;
}

/* --- 手機版 (螢幕寬度小於 768px) --- */
@media (max-width: 768px) {
    .jct-post-card {
        height: auto; /* 手機版高度自動，避免太高 */
        min-height: auto;
        align-items: stretch; /* 讓圖片與內容等高 */
    }

    .jct-post-card-image {
        flex: 0 0 35%; /* 手機版圖片佔比 35%，保持左右排列 */
        max-width: 35%;
    }

    .jct-post-card-content {
        padding: 10px 12px; /* 大幅縮小內距 */
    }

    .jct-post-card-title {
        font-size: 1rem; /* 縮小標題字體 (約 16px) */
        margin-bottom: 5px;
        line-height: 1.3;
    }
}