/* Moje Galerie - Mosaic Layout */

.moje-galerie-mosaic {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mg-gallery-gap, 10px);
    margin: 40px 0;
}

.mg-item {
    /* Fixed Height Calculation Logic */
    height: var(--mg-gallery-row-height, 170px); /* Fallback 170px */
    width: auto;
    
    /* Allow items to grow and shrink, but ensuring min-width 0 for flexbox robustness */
    flex-grow: 1; 
    flex-shrink: 1; 
    min-width: 0; 
    
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
}

.mg-item img {
    width: 100%; /* Make image fill the container width */
    height: 100%; /* Force height to match container */
    max-width: none; /* Override standard WP themes */
    object-fit: cover; /* Images should cover their space, cropping if necessary */
    display: block;
    vertical-align: bottom;
}

/* Fix for justified layout: prevent last row from stretching */
.moje-galerie-mosaic::after {
    content: '';
    height: var(--mg-gallery-row-height, 170px); /* Match item height */
    flex-grow: 999; /* This pseudo-element consumes remaining space */
    visibility: hidden; /* Hide it visually */
}
.moje-galerie-mosaic.mg-has-shadow .mg-item {
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.moje-galerie-mosaic.mg-has-shadow .mg-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 1;
}

.moje-galerie-mosaic.mg-has-zoom .mg-item:hover {
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .mg-item {
        /* On mobile, maybe allow smaller fixed height or just scale down? */
        height: 150px; 
    }
}