/*
 * LFS Main Stylesheet v13.0 - The True Final Vision
 */

.lfs-gallery-main {
    width: 100%;
    height: 400px; /* ความสูงของแถวสไลด์ทั้งหมด */
}

/* จัดให้ทุกเซลล์อยู่กลางแนวตั้ง */
.flickity-slider {
    display: flex;
    align-items: center; 
}

/* เซลล์ของสไลด์ (ตัวที่ Flickity เลื่อน) */
.lfs-carousel-cell {
    margin-right: 15px;
    height: 100%; /* ทำให้เซลล์สูงเต็มแถว */
}

/* การ์ด (กล่องสี่เหลี่ยม 1:1) */
.lfs-card {
    display: block;
    background: #f0f0f0;
    border-radius: 15px;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* บังคับให้เป็น 1:1 */
}

/* การ์ดใหญ่ */
.lfs-card.is-large {
    width: 400px; /* กว้างเท่ากับความสูงของแถว */
    height: 100%;
}

/* ตัวหุ้มการ์ดเล็ก 2 ใบที่ซ้อนกัน */
.lfs-stacked-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px; /* ช่องว่างระหว่างการ์ดเล็กบน-ล่าง */
    width: 250px; /* กำหนดความกว้างของการ์ดเล็ก */
    height: 100%;
    justify-content: center; /* จัดให้อยู่กลางแนวตั้ง */
}

/* การ์ดเล็ก */
.lfs-card.is-small {
    width: 100%; /* กว้างเต็มพื้นที่ wrapper */
}


/* รูปภาพทั้งหมด */
.lfs-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.lfs-card:hover img {
    transform: scale(1.05);
}