/**
 * Eliyar Brand Slider CSS
 */

/* 滑块容器 */
.eliyar-brand-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 20px 0;
    z-index: 1;
}

.eliyar-brand-slider-container {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    left: 0;
    overflow: hidden;
    padding: 20px 0;
    z-index: 1;
    /* 在容器上添加渐变遮罩，在距离边缘40%处开始渐变，在距离边缘10%处完全透明 */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 10%, black 40%, black 60%, transparent 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 10%, black 40%, black 60%, transparent 90%, transparent 100%);
}

/* 轨道样式 */
.eliyar-brand-slider-track {
    display: flex;
    width: 100%;
    overflow: visible;
    position: relative;
    will-change: transform;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

/* 当轨道暂停时 */
.eliyar-brand-slider-track.paused {
    animation-play-state: paused;
}

/* 基础滑块样式 */
.eliyar-brand-slider {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

/* 编辑器中的预览样式 */
.elementor-editor-active .eliyar-brand-slider {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.elementor-editor-active .eliyar-brand-item {
    width: 150px;
    margin: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.elementor-editor-active .eliyar-brand-item img {
    max-width: 100%;
    height: auto;
    width: 100%;
    object-fit: contain;
}

/* 品牌项目样式 */
.eliyar-brand-item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    margin: 0 20px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    flex-shrink: 0;
    /* 设置最小和最大宽度作为默认值，实际宽度由elementor控件决定 */
    min-width: 80px;
    max-width: 250px;
    width: 150px; /* 默认宽度，将被内联样式覆盖 */
}

.eliyar-brand-item img {
    max-width: 100%;
    height: auto; /* 高度自动，保持宽高比 */
    width: 100%; /* 确保图片撑满容器宽度 */
    object-fit: contain; /* 确保图片不会变形 */
    transition: transform 0.3s ease;
}

.eliyar-brand-item:hover img {
    transform: scale(1.05);
}

/* 滑动动画 - 从左向右 */
@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* 滑动动画 - 从右向左 */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* 响应式设计 */
@media only screen and (max-width: 768px) {
    .eliyar-brand-item {
        padding: 5px;
        margin: 0 8px;
        /* 注意：不再设置固定的min-width和max-width，以便使用data-mobile-width */
        /* 宽度由JavaScript根据data-mobile-width属性设置 */
    }
    
    /* 调整较小屏幕的渐变遮罩边距 */
    .eliyar-brand-slider-container {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 8%, black 20%, black 80%, transparent 92%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, transparent 8%, black 20%, black 80%, transparent 92%, transparent 100%);
    }
}

@media only screen and (max-width: 480px) {
    .eliyar-brand-slider-container {
        padding: 20px 0;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 8%, black 20%, black 80%, transparent 92%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, transparent 8%, black 20%, black 80%, transparent 92%, transparent 100%);
    }
    
    .eliyar-brand-item {
        margin: 0 10px;
        /* 宽度由JavaScript根据data-mobile-width属性设置 */
    }
}