/* Reolink Gallery Styles v1.2 (Responsive Ready & Aspect Ratio Fix) */

.reolink-gallery-wrapper {
    /* ค่า Default */
    --gallery-gap: 10px;
    --gallery-radius: 22px;
    --desktop-aspect-ratio: 2.35; /* สัดส่วนมาตรฐาน Desktop */
    --mobile-row-height: 260px;   /* ความสูงแถว Mobile */

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    position: relative;
    z-index: 1; 
}

.reolink-gallery-wrapper * {
    box-sizing: border-box;
}

/* --- GRID LAYOUT DESKTOP --- */
.reolink-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; 
    gap: var(--gallery-gap);
    
    /* KEY FIX: ใช้ aspect-ratio เพื่อความสูงที่ลื่นไหลตามความกว้างจอ */
    width: 100%;
    aspect-ratio: var(--desktop-aspect-ratio);
    height: auto; 
}

/* --- ITEMS --- */
.reolink-item {
    position: relative;
    border-radius: var(--gallery-radius); 
    overflow: hidden;
    width: 100%;
    height: 100%;
    
    /* Hardware acceleration เพื่อป้องกันการกระพริบ */
    transform: translateZ(0); 
    -webkit-transform: translateZ(0);
}

.reolink-item picture,
.reolink-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.reolink-item:hover img {
    transform: scale(1.05);
}

/* --- RIGHT COLUMN SPLIT --- */
.reolink-col-split {
    display: flex;
    flex-direction: column;
    gap: var(--gallery-gap);
    height: 100%;
}

.reolink-col-split .reolink-item {
    /* ใช้ auto เพื่อให้ยืดตาม Flex Container ได้เต็มที่ */
    height: auto; 
    flex-grow: 1;
}

/* =========================================
   ADAPTIVE RADIUS LOGIC (Desktop)
   ========================================= */

.reolink-adaptive-radius-yes .item-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.reolink-adaptive-radius-yes .item-right-top, 
.reolink-adaptive-radius-yes .item-right-bottom {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}


/* =========================================
   RESPONSIVE (Tablet & Mobile)
   ========================================= */
@media (max-width: 1024px) {
    
    .reolink-grid {
        grid-template-columns: repeat(10, 1fr);
        
        /* Mobile: ยกเลิก aspect-ratio รวม เพื่อให้ content ดันความสูงเอง */
        aspect-ratio: auto; 
        height: auto;
    }

    .reolink-col-split {
        display: contents; 
    }

    .reolink-item, 
    .reolink-col-split .reolink-item {
        width: 100%;
        /* Mobile: ใช้ความสูงคงที่ต่อแถว (กำหนดได้จาก Elementor) */
        height: var(--mobile-row-height); 
        aspect-ratio: auto; 
    }

    /* --- Layout Allocation (10-column grid) --- */
    /* แถวบน: ซ้าย 30% | ขวา 70% */
    .item-left { grid-column: span 3; }
    .item-center { grid-column: span 7; }

    /* แถวล่าง: ซ้าย 50% | ขวา 50% */
    .item-right-top { grid-column: span 5; }
    .item-right-bottom { grid-column: span 5; }

    /* --- MOBILE RADIUS LOGIC --- */
    /* 1. ซ้ายบน (30%) - ชิดซ้าย: ใช้กฎ Desktop (Left=0) ได้เลย */

    /* 2. ขวาบน (70%) - ชิดขวา: ปรับขวาเป็น 0, ซ้ายโค้ง */
    .reolink-adaptive-radius-yes .item-center {
        border-radius: var(--gallery-radius) 0 0 var(--gallery-radius);
    }

    /* 3. ซ้ายล่าง (50%) - ชิดซ้าย: ปรับซ้ายเป็น 0, ขวาโค้ง */
    .reolink-adaptive-radius-yes .item-right-top {
        border-radius: 0 var(--gallery-radius) var(--gallery-radius) 0;
    }

    /* 4. ขวาล่าง (50%) - ชิดขวา: ใช้กฎ Desktop (Right=0) ได้เลย */
}