/**
 * Altitude Adventure Holidays - Airbnb Gallery Styles
 */

/* Container - Airbnb 5-Photo Grid */
.elementor-gallery--layout-airbnb .elementor-gallery__container,
.elementor-widget-gallery[data-gallery-layout="airbnb"] .elementor-gallery__container,
.e-gallery-container.e-gallery-airbnb {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: var(--vgap, 10px) var(--hgap, 10px) !important;
    height: var(--gallery-airbnb-height, 420px) !important;
    position: relative !important;
    border-radius: var(--gallery-airbnb-radius, 14px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    padding-bottom: 0 !important;
}

/* Item 1: Large Primary Image on Left (Spans 2 Rows) */
.elementor-gallery--layout-airbnb .elementor-gallery__container .e-gallery-item:nth-child(1),
.elementor-widget-gallery[data-gallery-layout="airbnb"] .elementor-gallery__container .e-gallery-item:nth-child(1),
.e-gallery-container.e-gallery-airbnb .e-gallery-item:nth-child(1) {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    display: block !important;
    border-top-left-radius: var(--gallery-airbnb-radius, 14px) !important;
    border-bottom-left-radius: var(--gallery-airbnb-radius, 14px) !important;
    overflow: hidden !important;
}

/* Item 2: Top Middle */
.elementor-gallery--layout-airbnb .elementor-gallery__container .e-gallery-item:nth-child(2),
.elementor-widget-gallery[data-gallery-layout="airbnb"] .elementor-gallery__container .e-gallery-item:nth-child(2),
.e-gallery-container.e-gallery-airbnb .e-gallery-item:nth-child(2) {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    display: block !important;
    overflow: hidden !important;
}

/* Item 3: Top Right */
.elementor-gallery--layout-airbnb .elementor-gallery__container .e-gallery-item:nth-child(3),
.elementor-widget-gallery[data-gallery-layout="airbnb"] .elementor-gallery__container .e-gallery-item:nth-child(3),
.e-gallery-container.e-gallery-airbnb .e-gallery-item:nth-child(3) {
    grid-column: 3 / 4 !important;
    grid-row: 1 / 2 !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    display: block !important;
    border-top-right-radius: var(--gallery-airbnb-radius, 14px) !important;
    overflow: hidden !important;
}

/* Item 4: Bottom Middle */
.elementor-gallery--layout-airbnb .elementor-gallery__container .e-gallery-item:nth-child(4),
.elementor-widget-gallery[data-gallery-layout="airbnb"] .elementor-gallery__container .e-gallery-item:nth-child(4),
.e-gallery-container.e-gallery-airbnb .e-gallery-item:nth-child(4) {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    display: block !important;
    overflow: hidden !important;
}

/* Item 5: Bottom Right */
.elementor-gallery--layout-airbnb .elementor-gallery__container .e-gallery-item:nth-child(5),
.elementor-widget-gallery[data-gallery-layout="airbnb"] .elementor-gallery__container .e-gallery-item:nth-child(5),
.e-gallery-container.e-gallery-airbnb .e-gallery-item:nth-child(5) {
    grid-column: 3 / 4 !important;
    grid-row: 2 / 3 !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    display: block !important;
    border-bottom-right-radius: var(--gallery-airbnb-radius, 14px) !important;
    overflow: hidden !important;
}

/* Items 6+ Remain in DOM for Lightbox but visually hidden from 5-photo grid */
.elementor-gallery--layout-airbnb .elementor-gallery__container .e-gallery-item:nth-child(n+6),
.elementor-widget-gallery[data-gallery-layout="airbnb"] .elementor-gallery__container .e-gallery-item:nth-child(n+6),
.e-gallery-container.e-gallery-airbnb .e-gallery-item:nth-child(n+6) {
    display: none !important;
}

/* Image Elements Fill Their Slot Completely */
.elementor-gallery--layout-airbnb .e-gallery-item .e-gallery-image,
.elementor-widget-gallery[data-gallery-layout="airbnb"] .e-gallery-item .e-gallery-image,
.e-gallery-container.e-gallery-airbnb .e-gallery-item .e-gallery-image {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease !important;
}

/* Subtle Hover Zoom Effect */
.elementor-gallery--layout-airbnb .e-gallery-item:hover .e-gallery-image,
.elementor-widget-gallery[data-gallery-layout="airbnb"] .e-gallery-item:hover .e-gallery-image,
.e-gallery-container.e-gallery-airbnb .e-gallery-item:hover .e-gallery-image {
    transform: scale(1.035) !important;
    filter: brightness(0.96);
}

/* Floating "View all photos" button */
.elementor-gallery-airbnb__view-all {
    position: absolute !important;
    bottom: 16px !important;
    right: 16px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    padding: 7px 15px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 20 !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    outline: none !important;
    line-height: 1.2 !important;
}

.elementor-gallery-airbnb__view-all:hover {
    background: #f8fafc !important;
    transform: scale(1.02) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24) !important;
    color: #0284c7 !important;
}

.elementor-gallery-airbnb__view-all svg {
    flex-shrink: 0;
}

/* Tablet Responsive (<= 1024px) */
@media (max-width: 1024px) {
    .elementor-gallery--layout-airbnb .elementor-gallery__container,
    .elementor-widget-gallery[data-gallery-layout="airbnb"] .elementor-gallery__container,
    .e-gallery-container.e-gallery-airbnb {
        height: var(--gallery-airbnb-height-tablet, 340px) !important;
    }
}

/* Mobile Responsive (<= 767px) */
@media (max-width: 767px) {
    .elementor-gallery--layout-airbnb .elementor-gallery__container,
    .elementor-widget-gallery[data-gallery-layout="airbnb"] .elementor-gallery__container,
    .e-gallery-container.e-gallery-airbnb {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
        height: var(--gallery-airbnb-height-mobile, 260px) !important;
        border-radius: 12px !important;
    }

    .elementor-gallery--layout-airbnb .elementor-gallery__container .e-gallery-item:nth-child(1),
    .elementor-widget-gallery[data-gallery-layout="airbnb"] .elementor-gallery__container .e-gallery-item:nth-child(1),
    .e-gallery-container.e-gallery-airbnb .e-gallery-item:nth-child(1) {
        border-radius: 12px !important;
    }

    .elementor-gallery--layout-airbnb .elementor-gallery__container .e-gallery-item:nth-child(n+2),
    .elementor-widget-gallery[data-gallery-layout="airbnb"] .elementor-gallery__container .e-gallery-item:nth-child(n+2),
    .e-gallery-container.e-gallery-airbnb .e-gallery-item:nth-child(n+2) {
        display: none !important;
    }

    .elementor-gallery-airbnb__view-all {
        bottom: 12px !important;
        right: 12px !important;
        padding: 5px 12px !important;
        font-size: 12px !important;
    }
}
