/* assets/css/wpcm-style.css */

.wpcm-marquee-container {
    overflow: hidden;
    box-sizing: border-box;
    padding: 15px 0;
    /* Optional: Add a standard height if you don't want it resizing based on image height */
    /* height: 100px; */ 
    background-color: #f7f7f7;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.wpcm-marquee-content {
    display: flex; /* Key for positioning items horizontally */
    position: relative;
    /* JS adds transform/transition properties dynamically */
    will-change: transform; /* Optimizes browser rendering performance */
}

.wpcm-marquee-item {
    margin: 0 25px; /* Spacing between images/logos */
    flex-shrink: 0; /* Prevents items from squishing */
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}

.wpcm-marquee-item img {
    max-height: 80px; /* Standardize image height */
    width: auto;
    object-fit: contain; /* Ensures images fit without stretching */
    display: block;
    filter: grayscale(100%); /* Optional: Stylistic grayscale for logos */
    transition: filter 0.3s ease-in-out;
    margin-right: 5px; 
}

.wpcm-marquee-item a:hover img {
    filter: grayscale(0%); /* Optional: Color on hover */
}



.wpcm-marquee-title {
    font-size: 14px;
    color: #333;
    /* Ensure title displays as a block/inline-block to sit nicely next to or below image */
    display: inline-block; 
    white-space: nowrap;
    padding: 0 5px;
}



/* assets/css/wpcm-style.css */

.wpcm-marquee-container {
    overflow: hidden;
    box-sizing: border-box;
    padding: 15px 0;
    background-color: #f7f7f7;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    /* Define the custom property scope */
    --marquee-duration: 5s; 
}

.wpcm-marquee-content {
    display: flex;
    position: relative;
    /* Animation properties applied via JS adding 'is-animated' class */
}

.wpcm-marquee-container.is-animated .wpcm-marquee-content {
    animation: scrollLinear infinite linear;
    animation-duration: var(--marquee-duration); /* Use the JS-set duration */
}

/* Pause animation on hover over the container */
.wpcm-marquee-container:hover .wpcm-marquee-content {
    animation-play-state: paused;
}

/* Keyframe definition for the infinite scroll */
@keyframes scrollLinear {
    0% {
        transform: translateX(0);
    }
    100% {
        /* This moves it one full "original content" width to the left */
        transform: translateX(-50%); 
    }
}

.wpcm-marquee-item {
    margin: 0 25px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}