/**
 * Image Slider Masonry - CSS
 * Version: 1.6.0 - Removed CSS animation conflicts, JS controls transform
 */

/* Wrapper - High specificity to override theme */
.ism-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ism-slider {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ism-track {
    display: flex !important;
    gap: 20px !important;
    will-change: transform !important;
    /* DO NOT set transform here! JavaScript controls it via inline style */
    /* transform: translateX(0) !important; ← REMOVED - blocks JS animation */
    margin: 0 !important;
    padding: 0 !important;
}

.ism-group {
    position: relative !important;
    height: 600px !important;
    width: 3660px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Image containers - Force dimensions */
.ism-wrapper .ism-image,
.ism-slider .ism-image,
.ism-track .ism-image,
.ism-group .ism-image {
    position: absolute !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #f0f0f0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Images - Override all theme styles */
.ism-wrapper img,
.ism-slider img,
.ism-track img,
.ism-group img,
.ism-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    vertical-align: top !important;
}

/* 
 * CSS Animation - DEPRECATED in v1.6.0
 * JavaScript now controls animation via transform
 * Keeping here for reference, but commented out to prevent conflicts
 */
/*
@keyframes scroll-left {
    0% {
        transform: translateX(0) !important;
    }
    100% {
        transform: translateX(-3680px) !important;
    }
}

.ism-track.animate {
    animation: scroll-left var(--animation-duration, 40s) linear infinite !important;
}

.ism-track.animate:hover {
    animation-play-state: paused !important;
}
*/

/* Responsive - Scale layout using zoom to preserve masonry */
/* Using CSS zoom instead of transform to avoid conflict with JS animation */

/* Tablets (≤768px) - Zoom to 58.3% */
@media (max-width: 768px) {
    .ism-wrapper {
        height: 350px !important; /* 58.3% of 600px */
    }
    
    .ism-slider {
        zoom: 0.583 !important; /* Scale entire slider */
        -moz-transform: scale(0.583) !important; /* Firefox fallback */
        -moz-transform-origin: top left !important;
    }
    
    .ism-group {
        height: 600px !important; /* Keep original dimensions */
        /* zoom scales everything proportionally */
    }
}

/* Mobile phones (≤480px) - Zoom to 41.7% */
@media (max-width: 480px) {
    .ism-wrapper {
        height: 250px !important; /* 41.7% of 600px */
    }
    
    .ism-slider {
        zoom: 0.417 !important; /* Scale entire slider */
        -moz-transform: scale(0.417) !important; /* Firefox fallback */
        -moz-transform-origin: top left !important;
    }
    
    .ism-group {
        height: 600px !important; /* Keep original dimensions */
        /* zoom scales everything proportionally */
    }
}

/* Reset any theme img styles that might interfere */
.ism-wrapper img[class*="wp-"],
.ism-wrapper img[class*="attachment-"],
.ism-slider img[class*="wp-"],
.ism-slider img[class*="attachment-"] {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}