/* Premium Image Mosaic Styles (Clean Version) */

.mosaic-container {
    position: relative;
    width: 100%;
    margin: 60px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
}

/* Slot 1: Main Left 60% Width (Fixed 1:1) */
.slot-1 {
    width: 60%;
    z-index: 2;
    position: relative;
}

.slot-1 img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    display: block;
}

/* Slot 2: Top Right Absolute Overlay (Fixed 1:1) */
.slot-2 {
    position: absolute;
    top: 50px;
    right: 0;
    width: 38%;
    z-index: 10;
}

.slot-2 img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    display: block;
}

/* Slot 3: Bottom Tucked (Fixed 3:2) */
.slot-3 {
    width: 100%;
    margin-top: -80px;
    z-index: 5;
    position: relative;
}

.slot-3 img {
    aspect-ratio: 3 / 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    display: block;
}

/* Entrance Animations (Only active if switcher is ON) */
.mosaic-animated .mosaic-slot {
    opacity: 0;
    transform: translateY(30px);
    animation: wa-mosaic-fade-in 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.mosaic-animated .slot-1 { animation-delay: 0.2s; }
.mosaic-animated .slot-2 { animation-delay: 0.4s; }
.mosaic-animated .slot-3 { animation-delay: 0.6s; }

@keyframes wa-mosaic-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .mosaic-container {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    
    .slot-1, .slot-2, .slot-3 {
        width: 100% !important;
        position: static;
        margin-top: 0 !important;
    }
    
    .slot-1 img, .slot-2 img, .slot-3 img {
        aspect-ratio: auto; /* Allow natural aspect ratio on mobile for better fit */
        height: auto;
    }
}