/**
 * =================================================================
 * Elementor Widget: Egns Top AI Platforms Ticker Styles
 * =================================================================
 * Creates a horizontal scrolling logo ticker that pauses on hover.
 */

/* --- Default Fallback Variables --- */
:root {
    --egns-platform-logo-height: 30px; /* Default height */
    --egns-scroll-duration: 40s;      /* Default speed */
}

/* --- Main Widget Container --- */
.egns-top-ai-platforms {
    width: 100%;
    padding: 15px 0; /* Vertical padding */
    overflow: hidden; /* Hide overflowing logos */
    position: relative;
    /* Background color is controlled by Elementor */
    background-color: transparent; 
}

.egns-top-ai-platforms__inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1200px; /* Adjust max-width as needed */
    margin: 0 auto;
    padding: 0 15px; /* Padding inside the container */
}

/* --- Widget Title --- */
.egns-top-ai-platforms__title {
    flex-shrink: 0; /* Prevent title from shrinking */
    margin-right: 20px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color); /* Use theme text color */
    white-space: nowrap; /* Prevent title from wrapping */
    font-family: var(--font-worksans, sans-serif); /* Use theme font */
}

/* --- Scrolling Container --- */
.egns-top-ai-platforms__scroll-container {
    flex-grow: 1; /* Take remaining space */
    overflow: hidden; /* Essential for the ticker effect */
    position: relative; /* Needed if using pseudo-elements for fades */
}

/* --- List of Logos --- */
.egns-top-ai-platforms__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    /* Apply the scrolling animation */
    animation-name: egns-scroll-platforms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* Animation duration is controlled by Elementor */
    animation-duration: var(--egns-scroll-duration); 
    width: max-content; /* Ensure list doesn't wrap */
}

/* --- Pause Animation on Hover --- */
.egns-top-ai-platforms:hover .egns-top-ai-platforms__list {
    animation-play-state: paused;
}

/* --- Individual Logo Item --- */
.egns-top-ai-platforms__item {
    margin: 0 25px; /* Spacing between logos */
    display: flex;
    align-items: center;
}

.egns-top-ai-platforms__item-link {
    display: inline-block; /* Allows vertical alignment */
    line-height: 0; /* Prevent extra space below image */
    transition: opacity 0.3s ease;
}
.egns-top-ai-platforms__item-link:hover {
    opacity: 0.8; /* Slight fade on hover */
}

.egns-top-ai-platforms__logo {
    display: block; /* Remove extra space */
    /* Height is controlled by Elementor */
    max-height: var(--egns-platform-logo-height); 
    height: var(--egns-platform-logo-height);
    width: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure logo fits within height */
    vertical-align: middle; /* Align nicely */
}

/* --- Scrolling Animation Keyframes --- */
@keyframes egns-scroll-platforms {
    0% {
        transform: translateX(0%);
    }
    100% {
        /* Scroll exactly half the width (since we doubled the logos) */
        transform: translateX(-50%); 
    }
}

/* -----------------------------------
 * RESPONSIVENESS
 * ----------------------------------- */

/* Tablet & Mobile (Reduce spacing, maybe title size) */
@media (max-width: 991px) {
    .egns-top-ai-platforms__inner {
        padding: 0 10px;
    }
    .egns-top-ai-platforms__title {
        font-size: 15px;
        margin-right: 15px;
    }
    .egns-top-ai-platforms__item {
        margin: 0 20px; /* Slightly less space */
    }
}

/* Small Mobile (Maybe hide title or reduce logo size further) */
@media (max-width: 767px) {
    .egns-top-ai-platforms__inner {
        padding: 0 5px;
    }
    .egns-top-ai-platforms__title {
        font-size: 14px;
        margin-right: 10px;
        /* Consider hiding if space is very tight: display: none; */
    }
    .egns-top-ai-platforms__item {
        margin: 0 15px; /* Even less space */
    }
    /* Logo height is controlled by Elementor, but you could add a max-height here if needed */
    /* .egns-top-ai-platforms__logo { max-height: 25px; height: 25px; } */
}