/**
 * Grid Gallery Elementor - Styles
 * Version: 1.0.0
 */

/* Base Container Styles */
.grid-gallery-wrapper {
    width: 100%;
    position: relative;
}

.grid-gallery-container {
    display: grid;
    width: 100%;
    gap: 0;
    min-height: 600px;
    height: auto;
}

.grid-gallery-item {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 150px;
    background: #f5f5f5;
}

.grid-gallery-item a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.grid-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.3s ease;
}

/* Hover Effects */
.hover-zoom .grid-gallery-item:hover img {
    transform: scale(1.1);
}

.hover-zoom-out .grid-gallery-item img {
    transform: scale(1.1);
}

.hover-zoom-out .grid-gallery-item:hover img {
    transform: scale(1);
}

.hover-opacity .grid-gallery-item:hover img {
    opacity: 0.7;
}

/* 2 Column Grid Layout */
.grid-gallery-grid-2col {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(300px, 1fr);
}

/* 3 Column Grid Layout */
.grid-gallery-grid-3col {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(250px, 1fr);
}

/* 4 Column Grid Layout */
.grid-gallery-grid-4col {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(200px, 1fr);
}

/* Asymmetric Layout 1 - Adaptive Grid (Based on sketch) */
.grid-gallery-asymmetric-1 {
    grid-template-columns: 1fr 1fr 2fr;
    grid-auto-rows: 1fr;
    grid-auto-flow: dense;
    height: 100%;
}

/* First 6 images follow the sketch pattern */
.grid-gallery-asymmetric-1 .grid-gallery-item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: auto / span 1;
}

.grid-gallery-asymmetric-1 .grid-gallery-item:nth-child(2) {
    grid-column: 1 / 2;
    grid-row: auto / span 2;
}

.grid-gallery-asymmetric-1 .grid-gallery-item:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: auto / span 1;
}

.grid-gallery-asymmetric-1 .grid-gallery-item:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 1 / span 3;
}

.grid-gallery-asymmetric-1 .grid-gallery-item:nth-child(5) {
    grid-column: 3 / 4;
    grid-row: 1 / span 1;
}

.grid-gallery-asymmetric-1 .grid-gallery-item:nth-child(6) {
    grid-column: 3 / 4;
    grid-row: 2 / span 3;
}

/* Additional images (7+) fill remaining space automatically */
.grid-gallery-asymmetric-1 .grid-gallery-item:nth-child(7) {
    grid-column: 2 / 3;
    grid-row: auto / span 1;
}

/* Images 8+ flow naturally with varying sizes */
.grid-gallery-asymmetric-1 .grid-gallery-item:nth-child(n+8):nth-child(3n+1) {
    grid-column: auto / span 2;
    grid-row: auto / span 1;
}

.grid-gallery-asymmetric-1 .grid-gallery-item:nth-child(n+8):nth-child(3n+2) {
    grid-column: auto / span 1;
    grid-row: auto / span 2;
}

.grid-gallery-asymmetric-1 .grid-gallery-item:nth-child(n+8):nth-child(3n) {
    grid-column: auto / span 1;
    grid-row: auto / span 1;
}

/* Asymmetric Layout 2 - Adaptive Featured Left */
.grid-gallery-asymmetric-2 {
    grid-template-columns: 2fr 1fr 1fr;
    grid-auto-rows: 1fr;
    grid-auto-flow: dense;
    height: 100%;
}

/* First 6 images follow featured left pattern */
.grid-gallery-asymmetric-2 .grid-gallery-item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / span 2;
}

.grid-gallery-asymmetric-2 .grid-gallery-item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / span 1;
}

.grid-gallery-asymmetric-2 .grid-gallery-item:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 1 / span 2;
}

.grid-gallery-asymmetric-2 .grid-gallery-item:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 2 / span 1;
}

.grid-gallery-asymmetric-2 .grid-gallery-item:nth-child(5) {
    grid-column: 1 / 2;
    grid-row: auto / span 1;
}

.grid-gallery-asymmetric-2 .grid-gallery-item:nth-child(6) {
    grid-column: 2 / 4;
    grid-row: 3 / span 1;
}

/* Additional images (7+) with varying sizes */
.grid-gallery-asymmetric-2 .grid-gallery-item:nth-child(n+7):nth-child(odd) {
    grid-column: auto / span 2;
    grid-row: auto / span 1;
}

.grid-gallery-asymmetric-2 .grid-gallery-item:nth-child(n+7):nth-child(even) {
    grid-column: auto / span 1;
    grid-row: auto / span 1;
}

/* Asymmetric Layout 3 - Adaptive Staggered Mix */
.grid-gallery-asymmetric-3 {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    grid-auto-flow: dense;
    height: 100%;
}

/* First 6 images follow staggered pattern */
.grid-gallery-asymmetric-3 .grid-gallery-item:nth-child(1) {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

.grid-gallery-asymmetric-3 .grid-gallery-item:nth-child(2) {
    grid-column: 3 / span 1;
    grid-row: 1 / span 2;
}

.grid-gallery-asymmetric-3 .grid-gallery-item:nth-child(3) {
    grid-column: 4 / span 1;
    grid-row: 1 / span 1;
}

.grid-gallery-asymmetric-3 .grid-gallery-item:nth-child(4) {
    grid-column: 4 / span 1;
    grid-row: 2 / span 1;
}

.grid-gallery-asymmetric-3 .grid-gallery-item:nth-child(5) {
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
}

.grid-gallery-asymmetric-3 .grid-gallery-item:nth-child(6) {
    grid-column: 2 / span 3;
    grid-row: 3 / span 1;
}

/* Additional images (7+) with random sizes */
.grid-gallery-asymmetric-3 .grid-gallery-item:nth-child(n+7):nth-child(4n+1) {
    grid-column: auto / span 2;
    grid-row: auto / span 2;
}

.grid-gallery-asymmetric-3 .grid-gallery-item:nth-child(n+7):nth-child(4n+2) {
    grid-column: auto / span 1;
    grid-row: auto / span 2;
}

.grid-gallery-asymmetric-3 .grid-gallery-item:nth-child(n+7):nth-child(4n+3) {
    grid-column: auto / span 3;
    grid-row: auto / span 1;
}

.grid-gallery-asymmetric-3 .grid-gallery-item:nth-child(n+7):nth-child(4n) {
    grid-column: auto / span 1;
    grid-row: auto / span 1;
}

/* Masonry Style */
.grid-gallery-masonry {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
}

.grid-gallery-masonry .grid-gallery-item:nth-child(3n+1) {
    grid-row: span 2;
}

.grid-gallery-masonry .grid-gallery-item:nth-child(4n+2) {
    grid-column: span 1;
    grid-row: span 1;
}

.grid-gallery-masonry .grid-gallery-item:nth-child(5n+3) {
    grid-row: span 2;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    /* Asymmetric layouts switch to 2 columns on tablets */
    .grid-gallery-asymmetric-1,
    .grid-gallery-asymmetric-2,
    .grid-gallery-asymmetric-3 {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(250px, 1fr);
    }

    .grid-gallery-asymmetric-1 .grid-gallery-item,
    .grid-gallery-asymmetric-2 .grid-gallery-item,
    .grid-gallery-asymmetric-3 .grid-gallery-item {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    /* 4 column grid becomes 2 columns */
    .grid-gallery-grid-4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* All layouts become single column on mobile */
    .grid-gallery-container {
        grid-template-columns: 1fr !important;
        grid-auto-rows: minmax(250px, auto) !important;
        min-height: auto;
    }

    .grid-gallery-item {
        grid-column: 1 !important;
        grid-row: auto !important;
        min-height: 250px;
    }

    .grid-gallery-masonry {
        grid-template-columns: 1fr;
        grid-auto-rows: 300px;
    }
}

@media (max-width: 480px) {
    .grid-gallery-item {
        min-height: 200px;
    }

    .grid-gallery-masonry {
        grid-auto-rows: 250px;
    }
}

/* Lightbox compatibility */
.grid-gallery-item a {
    cursor: pointer;
}

/* Loading state */
.grid-gallery-item img[loading="lazy"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Ensure rectangular frames are maintained */
.grid-gallery-item {
    aspect-ratio: auto;
}

.grid-gallery-item img {
    object-position: center;
}

/* Editor preview styles */
.elementor-editor-active .grid-gallery-item a {
    pointer-events: none;
}