/**
 * Marquee Carousel Widget Styles
 *
 * @package SuopuChild\ElementorWidgets\SwiperEcosystem
 */

/* ===== CSS Variables ===== */
.suopu-marquee-carousel {
    --item-width: 250px;
    --item-gap: 20px;
    --image-height: 150px;
    --text-margin-top: 10px;
    --fade-width: 50px;
    --fade-color: #ffffff;
    --item-hover-y: -4px;
    --suopu-marquee-distance: 1000px;
    --suopu-marquee-duration: 20s;
    --suopu-marquee-direction: normal;
}

/* ===== 容器 ===== */
.suopu-marquee-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.suopu-marquee-carousel__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ===== 渐隐遮罩 ===== */
.suopu-marquee-carousel.has-fade-mask::before,
.suopu-marquee-carousel.has-fade-mask::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--fade-width);
    z-index: 10;
    pointer-events: none;
}

.suopu-marquee-carousel.has-fade-mask::before {
    left: 0;
    background: linear-gradient(to right, var(--fade-color), transparent);
}

.suopu-marquee-carousel.has-fade-mask::after {
    right: 0;
    background: linear-gradient(to left, var(--fade-color), transparent);
}

/* ===== Track 动画 ===== */
.suopu-marquee-carousel__track {
    display: flex;
    gap: var(--item-gap);
    width: max-content;
    animation: suopu-marquee-scroll var(--suopu-marquee-duration) linear infinite;
    animation-direction: var(--suopu-marquee-direction);
}

@keyframes suopu-marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-1 * var(--suopu-marquee-distance)));
    }
}

/* ===== Item ===== */
.suopu-marquee-carousel__item {
    flex: 0 0 auto;
    width: var(--item-width);
    display: flex;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.suopu-marquee-carousel__item:hover {
    transform: translateY(var(--item-hover-y));
}

.suopu-marquee-carousel__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

/* ===== 纯文字模式 ===== */
.suopu-marquee-carousel--text .suopu-marquee-carousel__link {
    justify-content: center;
}

/* ===== 图片模式 ===== */
.suopu-marquee-carousel__media {
    display: block;
    width: 100%;
    height: var(--image-height);
    overflow: hidden;
}

.suopu-marquee-carousel__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ===== 文字 ===== */
.suopu-marquee-carousel__text {
    display: block;
    width: 100%;
    transition: color 0.3s ease;
}

.suopu-marquee-carousel--media_text .suopu-marquee-carousel__text {
    margin-top: var(--text-margin-top);
}

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
    .suopu-marquee-carousel {
        --item-width: 220px;
        --item-gap: 15px;
        --image-height: 130px;
    }
}

@media (max-width: 768px) {
    .suopu-marquee-carousel {
        --item-width: 180px;
        --item-gap: 12px;
        --image-height: 100px;
        --fade-width: 30px;
    }
}

@media (max-width: 480px) {
    .suopu-marquee-carousel {
        --item-width: 150px;
        --item-gap: 10px;
        --image-height: 80px;
        --fade-width: 20px;
    }
}

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
    .suopu-marquee-carousel__track {
        animation-duration: calc(var(--suopu-marquee-duration) * 3);
    }
}

.suopu-marquee-carousel__item[data-cloned="true"] {
    pointer-events: none;
}

/* ===== Focus 样式 ===== */
.suopu-marquee-carousel__link:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

.suopu-marquee-carousel__link:focus:not(:focus-visible) {
    outline: none;
}

/* ===== Elementor 编辑器 ===== */
.elementor-editor-active .suopu-marquee-carousel {
    min-height: 200px;
}