/**
 * Swiper Honor Widget Styles
 * 
 * @package SuopuChild\ElementorWidgets\SwiperEcosystem
 */

/* ===== 基础容器样式 ===== */
.suopu-swiper-honor {
    position: relative;
    width: 100%;
    padding: 60px 0;
    overflow: hidden;
}

/* ===== PC端布局 ===== */
.suopu-swiper-honor .honor-pc-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 左侧图片轮播区域 */
.suopu-swiper-honor .honor-left {
    flex: 0 0 auto;
    width: 50%;
    height: 1250px; /* 默认值：推荐配置（激活500px），会被 Elementor 后台"图片容器高度"覆盖 */
    position: relative;
}

.suopu-swiper-honor .honor-left .container {
    width: 100%;
    height: 100%;
    overflow: hidden; /* ✅ 隐藏超出容器的slides */
}

.suopu-swiper-honor .honor-left .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.suopu-swiper-honor .honor-left .slide {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
    flex-shrink: 0;
    /* ✅ height由Swiper的slidesPerView: 3自动平均分配 */
    /* ✅ 约为 (1200px - 40px间距) / 3 ≈ 387px */
}

/* 非激活的slide - 降低透明度 */
.suopu-swiper-honor .honor-left .slide:not(.swiper-slide-active) {
    opacity: 0.5;
}

/* 激活的slide - 完全不透明 */
.suopu-swiper-honor .honor-left .swiper-slide-active {
    opacity: 1;
    z-index: 10;
}

/* 所有.img的基础样式 - 填满slide高度 */
.suopu-swiper-honor .honor-left .img {
    width: 100%;
    height: 100%; /* ✅ 填满整个slide（约387px） */
    max-height: 100%;
    overflow: hidden;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.5s ease;
    transform: scale(0.6); /* ✅ 非激活：缩小到60%，居中对齐 */
}

/* 激活slide的图片容器 - 放大到130% */
.suopu-swiper-honor .honor-left .swiper-slide-active .img {
    transform: scale(1.3); /* ✅ 激活：放大到130%，居中对齐 */
}

.suopu-swiper-honor .honor-left .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
    max-width: 370px;
}

/* 非激活slide的图片 - 半透明和模糊效果 */
.suopu-swiper-honor .honor-left .slide:not(.swiper-slide-active) .img img {
    opacity: 0.6;
    filter: blur(2px);
}

/* 激活slide的图片 - 完全不透明 */
.suopu-swiper-honor .honor-left .swiper-slide-active .img img {
    opacity: 1;
    filter: none;
}

/* 右侧文字轮播和导航区域 */
.suopu-swiper-honor .honor-right {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.suopu-swiper-honor .honor-right .container {
    width: calc(100% - 80px);
    height: 1000px;
    overflow: hidden;
    margin: 0;
}

.suopu-swiper-honor .honor-right .wrapper {
    display: flex;
    flex-direction: column;
}

.suopu-swiper-honor .honor-right .slide {
    height: 140px;
    line-height: 1.1;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #999999;
    transition: all 0.4s ease;
    cursor: pointer;
    opacity: 1;
    filter: none;
}

/* 中心激活项样式 - 默认值，可被 Elementor 后台设置覆盖 */
.suopu-swiper-honor .honor-right .swiper-slide-active {
    font-size: 42px !important;
    font-weight: 700;
    color: #d71d1e !important;
    opacity: 1 !important;
    filter: none !important;
}

/* 距离中心 ±1 位置的文字项 - 默认值，可被 Elementor 后台设置覆盖 */
.suopu-swiper-honor .honor-right .slide[data-number-num='1'],
.suopu-swiper-honor .honor-right .slide[data-number-num='-1'] {
    font-size: 30px !important;
    color: #999999 !important;
    opacity: 1 !important;
    filter: none !important;
}

/* 距离中心 ±2 位置的文字项 - 默认值，可被 Elementor 后台设置覆盖 */
.suopu-swiper-honor .honor-right .slide[data-number-num='2'],
.suopu-swiper-honor .honor-right .slide[data-number-num='-2'] {
    font-size: 24px !important;
    color: #cccccc !important;
    opacity: 1 !important;
    filter: none !important;
}

/* 距离中心 ±3 位置的文字项 - 默认值，可被 Elementor 后台设置覆盖 */
.suopu-swiper-honor .honor-right .slide[data-number-num='3'],
.suopu-swiper-honor .honor-right .slide[data-number-num='-3'] {
    font-size: 20px !important;
    color: #cccccc !important;
    opacity: 1 !important;
    filter: none !important;
}

/* 距离中心 ±4 及以上位置的文字项 */
.suopu-swiper-honor .honor-right .slide[data-number-num='4'],
.suopu-swiper-honor .honor-right .slide[data-number-num='-4'],
.suopu-swiper-honor .honor-right .slide[data-number-num='5'],
.suopu-swiper-honor .honor-right .slide[data-number-num='-5'],
.suopu-swiper-honor .honor-right .slide[data-number-num='6'],
.suopu-swiper-honor .honor-right .slide[data-number-num='-6'],
.suopu-swiper-honor .honor-right .slide[data-number-num='7'],
.suopu-swiper-honor .honor-right .slide[data-number-num='-7'] {
    font-size: 18px !important;
    color: #dddddd !important;
    opacity: 1 !important;
    filter: none !important;
}

.suopu-swiper-honor .honor-right .slide:hover {
    color: #d71d1e;
}

/* 导航箭头 */
.suopu-swiper-honor .honor-right .page {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.suopu-swiper-honor .honor-right .page .pn {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 2px solid #333333;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    color: #333333;
}

.suopu-swiper-honor .honor-right .page .pn::before {
    content: '';
    width: 14px;
    height: 14px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    display: block;
}

.suopu-swiper-honor .honor-right .page .pn.prev::before {
    transform: rotate(-45deg);
    margin-bottom: -4px;
}

.suopu-swiper-honor .honor-right .page .pn.next {
    margin-top: 20px;
}

.suopu-swiper-honor .honor-right .page .pn.next::before {
    transform: rotate(135deg);
    margin-top: -4px;
}

.suopu-swiper-honor .honor-right .page .pn:hover {
    background-color: #d71d1e;
    border-color: #d71d1e;
    color: #ffffff;
}

.suopu-swiper-honor .honor-right .page .pn.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* 移动端导航箭头保持原样式 */
.suopu-swiper-honor .honor-mobile-layout .page {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.suopu-swiper-honor .honor-mobile-layout .page .pn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.suopu-swiper-honor .honor-mobile-layout .page .pn::before {
    content: '';
    width: 12px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    display: block;
}

.suopu-swiper-honor .honor-mobile-layout .page .pn.prev::before {
    transform: rotate(-45deg);
    margin-bottom: -4px;
}

.suopu-swiper-honor .honor-mobile-layout .page .pn.next::before {
    transform: rotate(135deg);
    margin-top: -4px;
}

.suopu-swiper-honor .honor-mobile-layout .page .pn:hover {
    background-color: #d71d1e;
    color: #ffffff;
}

.suopu-swiper-honor .honor-mobile-layout .page .pn.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ===== 移动端布局 ===== */
.suopu-swiper-honor .honor-mobile-layout {
    display: none;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

.suopu-swiper-honor .honor-mobile-layout .container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.suopu-swiper-honor .honor-mobile-layout .wrapper {
    display: flex;
}

.suopu-swiper-honor .honor-mobile-layout .slide {
    width: 100%;
    flex-shrink: 0;
}

.suopu-swiper-honor .honor-mobile-layout .img {
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.suopu-swiper-honor .honor-mobile-layout .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.suopu-swiper-honor .honor-mobile-layout .name {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    text-align: center;
}

.suopu-swiper-honor .honor-mobile-layout .page {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.suopu-swiper-honor .honor-mobile-layout .page .pn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.suopu-swiper-honor .honor-mobile-layout .page .pn::before {
    content: '';
    width: 12px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    display: block;
}

.suopu-swiper-honor .honor-mobile-layout .page .pn.prev::before {
    transform: rotate(-135deg);
}

.suopu-swiper-honor .honor-mobile-layout .page .pn.next::before {
    transform: rotate(45deg);
}

.suopu-swiper-honor .honor-mobile-layout .page .pn:hover {
    background-color: #d71d1e;
    color: #ffffff;
}

/* ===== 响应式设计 ===== */
@media (min-width: 1025px) {
    /* PC端确保左右各占50% */
    .suopu-swiper-honor .honor-left {
        width: 50% !important;
    }

    .suopu-swiper-honor .honor-right {
        width: 50% !important;
    }
}

@media (max-width: 1024px) {
    .suopu-swiper-honor .honor-pc-layout {
        gap: 30px;
    }

    .suopu-swiper-honor .honor-left {
        width: 350px;
        height: 500px;
    }

    /* .honor-left .slide 高度由 Elementor 后台响应式设置控制 */

    .suopu-swiper-honor .honor-right .container {
        height: 600px;
    }

    .suopu-swiper-honor .honor-right .slide {
        height: 100px;
    }

    .suopu-swiper-honor .honor-right .swiper-slide-active {
        font-size: 28px !important;
    }

    .suopu-swiper-honor .honor-right .slide[data-number-num='1'],
    .suopu-swiper-honor .honor-right .slide[data-number-num='-1'] {
        font-size: 22px !important;
    }

    .suopu-swiper-honor .honor-right .slide[data-number-num='2'],
    .suopu-swiper-honor .honor-right .slide[data-number-num='-2'] {
        font-size: 18px !important;
    }

    .suopu-swiper-honor .honor-right .slide[data-number-num='3'],
    .suopu-swiper-honor .honor-right .slide[data-number-num='-3'] {
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {
    .suopu-swiper-honor .honor-pc-layout {
        display: none;
    }

    .suopu-swiper-honor .honor-mobile-layout {
        display: block;
    }
}

@media (max-width: 480px) {
    .suopu-swiper-honor .honor-mobile-layout .img {
        height: 250px;
    }

    .suopu-swiper-honor .honor-mobile-layout .name {
        font-size: 16px;
    }

    .suopu-swiper-honor .honor-mobile-layout .page .pn {
        width: 35px;
        height: 35px;
    }
}

/* ===== Elementor 编辑器预览样式 ===== */
.elementor-editor-active .suopu-swiper-honor {
    min-height: 400px;
}

/* ===== 动画效果 ===== */
.suopu-swiper-honor .slide {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.suopu-swiper-honor .swiper-slide-active {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 辅助类 ===== */
.suopu-swiper-honor .pointer {
    cursor: pointer;
}

.suopu-swiper-honor .trans {
    transition: all 0.3s ease;
}

/* ===== 水平布局样式 (Horizontal Layout) ===== */
/* 独立命名，避免与垂直布局冲突 */
/* 仅PC端，移动端不受影响 */

/* 水平布局主容器 */
.suopu-swiper-honor.layout-horizontal .honor-pc-layout.layout-horizontal {
    display: flex;
    flex-direction: column;
    gap: 80px;
    width: 100%; /* ✅ 全屏宽度 */
    max-width: 100%; /* ✅ 取消1400px限制 */
    margin: 0 auto;
    padding: 60px 0; /* ✅ 只保留上下padding，左右为0实现完全全屏 */
}

/* ===== 水平布局 - 上方图片轮播区域 ===== */
.suopu-swiper-honor.layout-horizontal .honor-horizontal-images {
    width: 100%; /* ✅ 全屏宽度 */
    max-width: 100%; /* ✅ 确保不受限制 */
    height: 600px; /* 默认容器高度，可被Elementor覆盖 */
    position: relative;
    overflow: visible; /* ✅ 改为visible，让底部阴影可见 */
    padding-bottom: 60px; /* ✅ 增加底部空间，避免阴影被裁剪 */
}

.suopu-swiper-honor.layout-horizontal .honor-horizontal-images .swiper-container-horizontal {
    width: 100%;
    height: 100%;
    overflow: visible; /* ✅ 确保阴影不被裁剪 */
}

.suopu-swiper-honor.layout-horizontal .honor-horizontal-images .swiper-wrapper-horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: visible; /* ✅ 确保阴影不被裁剪 */
}

.suopu-swiper-honor.layout-horizontal .honor-horizontal-images .swiper-slide-horizontal {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
    flex-shrink: 0;
    overflow: visible; /* ✅ 确保阴影不被裁剪 */
}

/* 非激活的横向slide */
.suopu-swiper-honor.layout-horizontal .honor-horizontal-images .swiper-slide-horizontal:not(.swiper-slide-active) {
    opacity: 0.5;
}

/* 激活的横向slide */
.suopu-swiper-honor.layout-horizontal .honor-horizontal-images .swiper-slide-horizontal.swiper-slide-active {
    opacity: 1;
    z-index: 10;
}

/* 横向图片容器 */
.suopu-swiper-honor.layout-horizontal .honor-horizontal-images .horizontal-img-wrapper {
    width: auto;
    height: 100%;
    max-height: 100%;
    overflow: visible; /* ✅ 改为visible，让阴影可见 */
    border-radius: 8px;
    text-align: center;
    transition: transform 0.5s ease;
    transform: scale(0.6); /* 非激活默认缩小 */
}

/* 激活的横向图片容器 - 舞台灯光效果 */
.suopu-swiper-honor.layout-horizontal .honor-horizontal-images .swiper-slide-active .horizontal-img-wrapper {
    transform: scale(1.3); /* 激活时放大 */
    position: relative;
}

/* 舞台灯光效果 - 底部阴影 */
.suopu-swiper-honor.layout-horizontal .honor-horizontal-images .swiper-slide-active .horizontal-img-wrapper::after {
    content: '';
    position: absolute;
    bottom: -40px; /* ✅ 位于图片底部下方40px */
    left: 50%;
    transform: translateX(-50%);
    width: 130%; /* ✅ 比图片稍宽 */
    height: 50px; /* ✅ 增加高度 */
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.4) 0%,      /* ✅ 中心深灰色，较强 */
        rgba(0, 0, 0, 0.25) 25%,    /* ✅ 中间灰色 */
        rgba(0, 0, 0, 0.15) 50%,    /* ✅ 外围浅灰 */
        rgba(0, 0, 0, 0.05) 75%,    /* ✅ 边缘很淡 */
        transparent 100%             /* ✅ 完全透明 */
    );
    filter: blur(20px); /* ✅ 增加模糊效果，营造更强的灯光扩散感 */
    pointer-events: none; /* ✅ 不影响点击事件 */
    z-index: 1; /* ✅ 改为正值，确保可见 */
    animation: stageLightPulse 3s ease-in-out infinite; /* ✅ 脉动动画 */
}

/* 舞台灯光脉动动画 */
@keyframes stageLightPulse {
    0%, 100% {
        opacity: 0.8;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.1);
    }
}

/* 横向图片 */
.suopu-swiper-honor.layout-horizontal .honor-horizontal-images .horizontal-img-wrapper img {
    width: auto;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
    position: relative; /* ✅ 为z-index生效 */
    z-index: 2; /* ✅ 确保图片在阴影上方 */
}

/* ===== 水平布局 - 下方文字和导航区域 ===== */
.suopu-swiper-honor.layout-horizontal .honor-horizontal-texts-wrapper {
    display: flex;
    align-items: center;
    gap: 30px; /* ✅ 导航按钮和文字容器之间的间距 */
    width: 100%; /* ✅ 全屏宽度，不限制1200px */
    max-width: 100%; /* ✅ 取消最大宽度限制 */
    margin: 0 auto;
    position: relative;
    padding: 0 20px; /* ✅ 左右只留小边距，最大化文字显示空间 */
}

/* 左侧导航按钮 */
.suopu-swiper-honor.layout-horizontal .honor-horizontal-nav-prev {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.suopu-swiper-honor.layout-horizontal .honor-horizontal-nav-prev:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.suopu-swiper-honor.layout-horizontal .honor-horizontal-nav-prev::before {
    content: '';
    width: 12px;
    height: 12px;
    border-left: 3px solid white;
    border-bottom: 3px solid white;
    transform: rotate(45deg);
    margin-left: 4px;
}

/* 右侧导航按钮 */
.suopu-swiper-honor.layout-horizontal .honor-horizontal-nav-next {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.suopu-swiper-honor.layout-horizontal .honor-horizontal-nav-next:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.suopu-swiper-honor.layout-horizontal .honor-horizontal-nav-next::before {
    content: '';
    width: 12px;
    height: 12px;
    border-right: 3px solid white;
    border-top: 3px solid white;
    transform: rotate(45deg);
    margin-right: 4px;
}

/* 中间文字轮播容器 */
.suopu-swiper-honor.layout-horizontal .honor-horizontal-texts-container {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.suopu-swiper-honor.layout-horizontal .honor-horizontal-texts-swiper {
    width: 100%;
    height: 80px;
}

.suopu-swiper-honor.layout-horizontal .honor-horizontal-texts-swiper .swiper-wrapper-horizontal-text {
    display: flex;
    align-items: center;
}

.suopu-swiper-honor.layout-horizontal .honor-horizontal-texts-swiper .swiper-slide-horizontal-text {
    width: auto;
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 25px; /* ✅ 减小左右padding，让更多文字可见 */
    font-size: 18px; /* ✅ 默认值，会被JS动态覆盖 */
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.4s ease; /* ✅ 平滑过渡 */
    white-space: nowrap;
    position: relative;
}

/* ✅ 移除原有的非激活和激活样式，让JS完全控制 */
/* 这样可以实现更精细的渐进效果 */

/* 水平布局 - 响应式调整（仅PC端） */
@media (min-width: 1025px) {
    .suopu-swiper-honor.layout-horizontal .honor-horizontal-images {
        height: 600px;
    }
}

@media (max-width: 1024px) {
    /* 平板和移动端隐藏水平布局，使用移动端布局 */
    .suopu-swiper-honor.layout-horizontal .honor-pc-layout.layout-horizontal {
        display: none;
    }
}