/* --- ส่วน Grid Container --- */
.scroll-grid { 
  grid-template-columns : none; 
  grid-auto-flow: column;
  grid-auto-columns: 320px;
  overflow-x: scroll;
}

/* --- Layout หลัก (Desktop) --- */
.list-profile .ba-blog-posts-wrapper.ba-classic-layout .ba-blog-post {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* เปลี่ยนจาก center เป็น stretch เพื่อให้กล่องสูงเท่ากัน */
    overflow: hidden;
    margin: 0;
}

.list-profile  .ba-blog-posts-wrapper.ba-classic-layout .ba-blog-post .ba-blog-post-image,
.list-profile  .ba-blog-posts-wrapper.ba-classic-layout .ba-blog-post .ba-blog-post-content {
    flex: 1 1 50%;
    box-sizing: border-box;
    width: 50%; /* บังคับความกว้าง */
}

/* --- ส่วนแก้ไขรูปภาพ (สำคัญ) --- */
/* ให้ Tag <a> เต็มพื้นที่ แต่ไม่ต้องใส่ Background */
.list-profile .ba-blog-posts-wrapper.ba-classic-layout .ba-blog-post .ba-blog-post-image a {
    display: block;
    width: 100%;
    height: 100%; 
    min-height: 300px; /* ความสูงขั้นต่ำ */
}

/* ยกเลิกการซ่อน img และใช้ object-fit แทน */
.list-profile  .ba-blog-posts-wrapper.ba-classic-layout .ba-blog-post .ba-blog-post-image img {
    display: block !important; /* บังคับให้โชว์รูป */
    width: 100%;
    height: 100%;
    object-fit: cover; /* ทำให้รูปขยายเต็มพื้นที่โดยสัดส่วนไม่เพี้ยน (เหมือน background-size: cover) */
    object-position: center;
}

.list-profile .ba-blog-posts-wrapper.ba-classic-layout .ba-blog-post .ba-blog-post-content {
    padding: 5%;
}

/* --- สลับฝั่ง รูป/ข้อความ (Desktop) --- */
.list-profile .ba-blog-posts-wrapper.ba-classic-layout .ba-blog-post:nth-child(even) {
    flex-direction: row-reverse;
}

/* --- Responsive: Tablet & Mobile --- */
/* แนะนำให้เพิ่มเป็น 991px หรือ 1024px เพื่อให้ครอบคลุม Tablet Portrait */
@media (max-width: 991px) {
    
    /* เรียงเป็นแนวตั้งทั้งหมด */
   .list-profile .ba-blog-posts-wrapper.ba-classic-layout .ba-blog-post,
   .list-profile .ba-blog-posts-wrapper.ba-classic-layout .ba-blog-post:nth-child(even) {
        flex-direction: column;
    }

    /* ขยายความกว้างเป็น 100% */
    .list-profile .ba-blog-posts-wrapper.ba-classic-layout .ba-blog-post .ba-blog-post-image,
    .list-profile .ba-blog-posts-wrapper.ba-classic-layout .ba-blog-post .ba-blog-post-content {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    .list-profile .ba-blog-posts-wrapper.ba-classic-layout .ba-blog-post .ba-blog-post-content {
       padding: 2rem; /* ปรับ padding ให้เหมาะสม */
    }

    /* ปรับความสูงรูปในมือถือ/แท็บเล็ต */
    .list-profile .ba-blog-posts-wrapper.ba-classic-layout .ba-blog-post .ba-blog-post-image a {
        min-height: 250px;
        height: auto; /* ปล่อยให้สูงตามรูป หรือจะล็อคไว้ก็ได้ */
    }
}