/**
 * Media Carousel Widget Styles
 * 媒体评价轮播组件样式
 */

.media-carousel-widget {
    padding: 80px 20px;
}

.media-carousel-container {
    max-width: var(--max-width, 920px);
    margin: 0 auto;
}

/* 文字轮播区域 */
.media-carousel-widget .text-carousel {
    text-align: center;
    margin-bottom: var(--text-margin-bottom, 50px);
}

.media-carousel-widget .subtitle {
    color: #5E5E5E;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.media-carousel-widget .description {
    font-size: 1.75rem;
    line-height: 1.3;
    font-weight: 600;
    color: #181818;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

/* Logo缩略图轮播 */
.media-carousel-widget .logo-carousel {
    margin-bottom: var(--logo-margin-bottom, 30px);
}

.media-carousel-widget .logo-item {
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: default;
    pointer-events: none;
}

.media-carousel-widget .logo-item img {
    max-width: var(--logo-max-width, 140px);
    height: auto;
    display: block;
    opacity: var(--logo-opacity-inactive, 0.2);
    transition: opacity 0.3s ease;
}

.media-carousel-widget .logo-item.swiper-slide-active img {
    opacity: 1;
}

/* 导航按钮容器 */
.media-carousel-widget .navigation {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* 导航按钮样式 */
.media-carousel-widget .nav-button {
    width: 48px;
    height: 48px;
    background: #E3E8EB;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #072324;
}

.media-carousel-widget .nav-button:hover {
    background: #072324;
    color: #ffffff;
}

.media-carousel-widget .nav-button svg {
    width: 20px;
    height: 20px;
}

/* 文字轮播的淡入淡出效果 */
.media-carousel-widget .text-carousel .swiper-slide {
    opacity: 0 !important;
    transition: opacity 0.3s ease;
}

.media-carousel-widget .text-carousel .swiper-slide-active {
    opacity: 1 !important;
}

/* 响应式 */
@media (max-width: 768px) {
    .media-carousel-widget {
        padding: 40px 20px;
    }

    .media-carousel-widget .subtitle {
        font-size: 0.875rem;
    }

    .media-carousel-widget .description {
        font-size: 1.125rem;
        min-height: 100px;
    }

    .media-carousel-widget .logo-item img {
        max-width: 110px;
    }

    .media-carousel-widget .text-carousel {
        margin-bottom: 30px;
    }
}