/**
 * Listing Grid Carousel Custom Styles
 * 
 * Implements the 5-item view on desktop with hierarchical scaling and z-index stacking.
 * 
 * STACKING LOGIC (Z-INDEX):
 * 1. Center Item (1): z-index: 30
 * 2. Neighbors (2 & 3): z-index: 20
 * 3. Outer (4 & 5): z-index: 10
 * 
 * SCALING LOGIC:
 * 1. Center Item (1): 100% scale
 * 2. Neighbors (2 & 3): 70% scale
 * 3. Outer (4 & 5): 49% scale
 * 
 * VISUAL:
 * No transparency changes on overlap.
 */

/* Target the specific listing grid widget container */
.elementor-element-91390cd .jet-listing-grid__items {
    padding-top: 50px;
    padding-bottom: 50px;
    overflow: visible;
}

.elementor-element-91390cd .slick-list {
    overflow: visible !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    /* Ensure no clipping happens */
    transform: translate3d(0, 0, 0); 
}

/* --- BASE ITEM STYLES --- */
.elementor-element-91390cd .jet-listing-grid__item {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    /* Default State = Outer Items (4 & 5) */
    transform: scale(0.49); 
    opacity: 1 !important; /* Force full opacity as requested */
    z-index: 10; /* Lowest layer */
    filter: blur(0); /* Remove blur for clarity */
}

/* --- CENTER ITEM (Item 1) --- */
.elementor-element-91390cd .jet-listing-grid__item.slick-center {
    transform: scale(1) !important;
    z-index: 30 !important; /* Highest layer - Front */
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); /* Strong shadow for depth */
}

/* --- DESKTOP VIEW (>=1025px) --- */
@media (min-width: 1025px) {
    /* 
       We need to target the items immediately surrounding the center item.
       Slick adds .slick-active to all visible items. 
       If slidesToShow is 5, we have 5 active items.
       Item indices relative to center: -2, -1, 0(center), +1, +2
       
       We can identify neighbors using sibling selectors since we know the DOM structure order.
    */

    /* Reset everyone to base state first */
    .elementor-element-91390cd .jet-listing-grid__item.slick-active {
        transform: scale(0.49);
        z-index: 10;
        margin: 0 -40px; /* Strong overlap for outer items */
    }

    /* NEIGHBORS (Items 2 & 3) - Middle Layer */
    /* Select previous sibling of center */
    .elementor-element-91390cd .jet-listing-grid__item.slick-active:has(+ .jet-listing-grid__item.slick-center),
    /* Select next sibling of center */
    .elementor-element-91390cd .jet-listing-grid__item.slick-center + .jet-listing-grid__item.slick-active {
        transform: scale(0.7) !important;
        z-index: 20 !important; /* Middle layer */
        /* Overlap adjustments */
    }
    
    /* Center Item needs explicit margin to pull neighbors behind it */
    .elementor-element-91390cd .jet-listing-grid__item.slick-center {
        margin: 0 -20px;
    }

    /* Center Item dimensions constraint */
    .elementor-element-91390cd .jet-listing-grid__item.slick-center .jet-engine-listing-overlay-wrap {
        max-width: 465px; 
        margin: 0 auto;
    }
}

/* --- TABLET & MOBILE VIEW (<1025px) --- */
@media (max-width: 1024px) {
    /* Showing 3 items typically */
    
    /* Reset */
    .elementor-element-91390cd .jet-listing-grid__item.slick-active {
        transform: scale(0.7);
        z-index: 10;
        margin: 0 -20px;
    }
    
    /* Center */
    .elementor-element-91390cd .jet-listing-grid__item.slick-center {
        transform: scale(1) !important;
        z-index: 30 !important;
        margin: 0 -10px;
    }
}

/* Video Container Vertical Centering */
.elementor-element-91390cd .jet-listing-grid__item {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Arrow Navigation Styling */
.elementor-element-91390cd .jet-listing-grid__slider-icon.slick-arrow {
    z-index: 100; /* Above everything */
    width: 60px;
    height: 60px;
    line-height: 60px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    transition: 0.3s;
}

.elementor-element-91390cd .jet-listing-grid__slider-icon.slick-arrow:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.1);
}