/* Members页面新布局样式 */
.members-page-container {
    min-height: 100vh;
    padding: 0;
    margin: 0;
    padding-top: 50px; /* 大幅减小顶部间距，让照片更靠近主导航栏 */
}

/* 左侧导航栏 - 使用sticky定位，跟随页面滚动 */
.team-nav-sidebar-fixed {
    position: sticky !important;
    top: 103px !important; /* 距离顶部的距离 */
    left: 0;
    width: 140px; /* 调整宽度为140px */
    height: fit-content !important; /* 自适应内容高度 */
    max-height: calc(100vh - 123px) !important; /* 最大高度：视口高度 - 顶部距离 */
    background: linear-gradient(135deg, #ffb3ba 0%, #ffdfba 50%, #ffa07a 100%); /* 粉橙渐变色 */
    padding: 1rem 0.6rem 0.8rem 0.6rem; /* 减小底部内边距 */
    overflow-y: auto;
    z-index: 1050 !important; /* 提高z-index，确保在footer上方 */
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 0 12px 12px 0; /* 右侧圆角 */
}

/* 主要照片容器 - 16:9比例，使用padding-bottom方法 */
.main-photo-container {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9比例 (9/16 = 0.5625) */
    position: relative;
    overflow: hidden;
    margin-bottom: 0.2rem; /* 减小底部间距 */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 2px solid #ffb3ba; /* 粉色边框 */
}

.main-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持覆盖整个容器 */
    object-position: center center;
    display: block;
    border-radius: 12px;
}

/* 轮播图片容器 - 传送带样式，50:9超宽比例 */
.members-carousel-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 18%; /* 50:9比例 (9/50 = 0.18) */
    overflow: hidden;
    margin-bottom: 2rem; /* 增加底部间距 */
    background-color: #ffffff; /* 改为白色背景 */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef; /* 添加淡灰色边框 */
}

/* 传送带轮播样式 */
.members-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    width: 200%; /* 两倍宽度：100%原图 + 100%复制图，实现无缝循环 */
    height: 100%;
    animation: conveyor-belt 55s linear infinite; /* 调整速度：55秒完成一轮，每张图片约5秒 */
    gap: 12px; /* 减小图片之间的间隔 */
    padding: 15px; /* 增加轨道内边距，让图片更小 */
    align-items: center; /* 垂直居中 */
}

.carousel-slide {
    flex: 0 0 auto; /* 不强制宽度，让图片保持自然比例 */
    width: 196px; /* 再次减少宽度约30%（280px → 196px） */
    height: calc(100% - 30px); /* 动态高度，减去轨道的上下padding */
    border-radius: 8px; /* 图片圆角 */
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 图片阴影 */
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 0.3s ease; /* 悬停效果 */
}

.carousel-slide:hover img {
    transform: scale(1.05); /* 悬停时轻微放大 */
}

/* 传送带动画 - 修复循环问题 */
@keyframes conveyor-belt {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* 移动50%，正好是11张图片的距离，然后无缝循环 */
    }
}

/* 传送带模式不需要导航点和箭头 */





/* 加载指示器 */
.carousel-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    color: white;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.carousel-loading.hidden {
    display: none;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #00c1a4;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .members-carousel-container {
        width: 100%;
        height: 0;
        padding-bottom: 32%; /* 移动端进一步减少高度比例 */
        margin: 1rem 0;
        max-width: none;
    }
    
    .members-carousel {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .carousel-arrow {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    
    .carousel-arrow.prev {
        left: 10px;
    }
    
    .carousel-arrow.next {
        right: 10px;
    }
    

}

/* 图片加载动画 */
.carousel-slide img {
    animation: fadeIn 0.5s ease-in-out;
}

/* 左侧导航栏样式 - 紧凑设计 */
.team-nav-title {
    color: white;
    font-size: 1.1rem; /* 减小字体 */
    font-weight: 600;
    margin-bottom: 1.5rem; /* 减小间距 */
    padding-bottom: 0.8rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    text-align: center;
}

.team-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 0.8rem; /* 减小间距 */
}

.team-nav-item {
    display: flex;
    align-items: center;
    padding: 0.8rem 1rem; /* 减小内边距 */
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-radius: 8px; /* 减小圆角 */
    transition: all 0.3s ease;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.9rem; /* 减小字体 */
    border: 1px solid transparent;
}

.team-nav-item:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    transform: translateX(5px); /* 减小移动距离 */
    border-color: rgba(255, 255, 255, 0.3);
}

.team-nav-item.active {
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateX(5px);
}

.team-nav-icon {
    margin-right: 0.6rem; /* 减小间距 */
    width: 32px; /* 增大图片图标宽度 */
    height: 32px; /* 增大图片图标高度 */
    object-fit: contain; /* 保持图片比例 */
    /* filter: none; */ /* 移除滤镜，正常显示图片 */
}

/* 右侧内容区域调整 - 大幅扩大 */
.main-content-area {
    margin-left: 140px; /* 调整为与导航栏宽度匹配 */
    padding: 0.2rem 0; /* 移除左右内边距，让内容占满整个宽度 */
    min-height: 100vh;
}

/* 内容区域样式 */
.content-area {
    padding: 0 1rem; /* 只为人物介绍内容添加左右内边距 */
    margin-top: 1rem; /* 减小顶部间距 */
}

/* 顶部照片容器超大幅扩展 */
.main-photo-container {
    margin-left: -10rem; /* 向左扩展再增加一倍 */
    margin-right: -10rem; /* 向右扩展再增加一倍 */
    width: calc(100% + 20rem); /* 总宽度增加20rem */
}

/* 轮播容器进一步扩大占用面积 */
.members-carousel-container {
    margin-left: -15rem; /* 向左扩展更多 */
    margin-right: -15rem; /* 向右扩展更多 */
    width: calc(100% + 30rem); /* 总宽度增加30rem，比主照片更大 */
}

.section-content {
    padding: 2rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
    border: 1px solid #e9ecef;
}

.section-content h2 {
    color: #00c1a4;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.8rem;
}



/* 团队区域图片样式 - 16:9比例 */
.team-section-image {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9比例 (9/16 = 0.5625) */
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 2px solid #ffb3ba; /* 简单的粉色边框 */
}

.section-team-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 12px;
    display: block !important; /* 强制显示 */
    opacity: 1 !important; /* 确保不透明 */
    z-index: 10 !important; /* 确保在最上层 */
}

.section-content h3 {
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.section-content p {
    color: #555;
    line-height: 1.7;
    font-size: 1rem;
}

/* 成员卡片样式调整 */
.section-content .row.mb-3 {
    border: none; /* 移除边框 */
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); /* 调整阴影 */
    border-radius: 12px; /* 增加圆角 */
    transition: transform 0.3s ease;
    overflow: visible; /* 允许图片溢出，以便显示放大的图片 */
    position: relative; /* 为图片定位提供参考 */
}

.section-content .row.mb-3:hover {
    transform: translateY(-5px); /* 悬停效果 */
}

/* 图片容器列的样式 */
.section-content .row.mb-3 .col-12.col-md-2 {
    padding: 0 !important; /* 移除列的padding */
    overflow: visible !important; /* 允许图片超出容器边界 */
    display: flex !important; /* 使用flex布局 */
    align-items: flex-start !important; /* 顶部对齐，防止遮盖文字 */
    min-height: 100% !important; /* 确保容器有足够高度 */
    padding-top: 1rem !important; /* 添加顶部间距 */
}

/* 右侧图片容器的特殊设置 */
.section-content .row.mb-3 .col-12.col-md-2.order-2 {
    overflow: visible !important; /* 确保右侧图片容器也允许溢出 */
    align-items: flex-start !important; /* 右侧图片也使用顶部对齐 */
    padding-top: 1rem !important; /* 右侧图片也添加顶部间距 */
}

.section-content .row.mb-3 img {
    border: none; /* 移除原边框 */
    box-shadow: 0 0 0 4px #ffb3ba, 0 2px 10px rgba(255, 179, 186, 0.3); /* 粉色边框阴影和投影阴影 */
    width: 115% !important; /* 适度增大图片面积15%，减少对文字的侵占 */
    height: 240px; /* 备用固定高度，适应3:4比例并增大20% */
    aspect-ratio: 3/4; /* 设置3:4比例，适应长比宽的图片 */
    object-fit: cover; /* 填充整个容器，保持比例 */
    margin: 0 0 0 15px !important; /* 适度右移图片，减少对文字区域的侵占 */
    padding: 0 !important; /* 移除所有padding */
    border-radius: 8px; /* 轻微圆角 */
    display: block; /* 确保块级显示 */
    position: relative; /* 相对定位 */
    z-index: 2; /* 确保图片在其他内容之上 */
}

/* 右侧图片（order-2）的特殊样式 - 增加左移距离 */
.section-content .row.mb-3 .order-2 img {
    margin: 0 0 0 -25px !important; /* 右侧图片进一步左移25px，增强视觉效果 */
}

/* 为部分个人照片下方添加额外空隙 */
.section-content .row.mb-3:nth-child(even) {
    margin-bottom: 3rem !important; /* 偶数位置的成员卡片增加下边距 */
}

/* 每隔三个成员增加更大的空隙 */
.section-content .row.mb-3:nth-child(3n) {
    margin-bottom: 3.5rem !important; /* 每三个成员后增加更大的间距 */
}

/* 团队间的分隔空隙 */
.section-content .row.mb-3:last-child {
    margin-bottom: 4rem !important; /* 每个团队最后一个成员增加更大的下边距 */
}

/* 支持aspect-ratio的浏览器将使用动态高度 */
@supports (aspect-ratio: 3/4) {
    .section-content .row.mb-3 img {
        height: auto; /* 覆盖固定高度 */
    }
}

.section-content .row.mb-3 .py-5 {
    padding-top: 1rem !important; /* 减少顶部padding，因为图片现在顶部对齐 */
    padding-bottom: 2rem !important;
    padding-left: 2.5rem !important; /* 增加左侧padding，防止图片遮挡字母 */
}

/* 右侧图片对应的文字区域样式调整 - 适应图片左移 */
.section-content .row.mb-3 .order-1.py-5 {
    padding-top: 1rem !important; /* 右侧文字区域也减少顶部padding */
    padding-right: 3rem !important; /* 进一步增加右侧padding，适应图片更大的左移 */
    padding-left: 1.5rem !important; /* 减少左侧padding，因为图片左移释放了空间 */
}

.section-content .row.mb-3 h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #00c1a4;
}

.section-content .row.mb-3 .text-muted {
    font-size: 1.1rem;
}

.section-content .hover-text p {
    font-size: 0.95rem;
}

/* 响应式调整 */
@media (max-width: 991.98px) {
    .members-page-container {
        padding-top: 50px; /* 移动端进一步减小顶部间距 */
    }

    .team-nav-sidebar-fixed {
        position: relative;
        top: 0;
        width: 100%;
        height: auto;
        max-height: none; /* 移动端移除高度限制 */
        margin-bottom: 0.5rem; /* 进一步减小底部间距 */
        padding: 0.6rem; /* 减小内边距 */
        border-radius: 12px; /* 移动端全圆角 */
    }

    .main-content-area {
        margin-left: 0;
        padding: 0.8rem 0; /* 移动端也移除左右内边距 */
    }

    .content-area {
        padding: 0 0.5rem; /* 移动端减小内边距 */
    }

    .main-photo-container {
        margin-left: -5rem; /* 移动端也再扩大一倍 */
        margin-right: -5rem;
        width: calc(100% + 10rem);
    }
    
    .members-carousel-container {
        margin-left: -8rem; /* 移动端轮播容器更大扩展 */
        margin-right: -8rem;
        width: calc(100% + 16rem);
    }

    /* 移动端16:9比例调整 */
    .team-section-image {
        padding-bottom: 56.25%; /* 移动端也使用16:9比例 */
    }

    .team-nav-icon {
        width: 16px; /* 移动端稍小的图标 */
        height: 16px;
        margin-right: 0.4rem;
    }

    .main-photo-container {
        height: 0;
        padding-bottom: 56.25%; /* 移动端也使用16:9比例 */
        margin-bottom: 0.2rem;
    }

    .main-photo {
        transform: scaleX(1.05) scaleY(0.95); /* 移动端稍微减少变形 */
    }

    /* 移动端轮播容器已通过padding-bottom设置4:3比例，不需要固定高度 */

    .carousel-track {
        gap: 8px; /* 移动端减小间隔 */
        padding: 10px; /* 减小内边距 */
    }

    .carousel-slide {
        flex: 0 0 auto; /* 移动端也不强制宽度 */
        width: 98px; /* 移动端再次减少宽度约30%（140px → 98px） */
        height: calc(100% - 20px); /* 移动端动态高度，减去轨道的上下padding */
        border-radius: 6px; /* 减小圆角 */
    }

    .team-nav-menu {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .team-nav-item {
        padding: 0.5rem 0.7rem;
        font-size: 0.8rem;
        background: rgba(255, 255, 255, 0.2);
    }

    .team-nav-icon {
        display: none;
    }

    .team-nav-title {
        text-align: center;
        margin-bottom: 0.8rem;
        border-bottom: none;
        padding-bottom: 0;
        font-size: 1rem;
    }

    .section-content {
        padding: 1rem;
    }

    .section-content h2 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .section-content .row.mb-3 img {
        width: 115% !important; /* 移动端也适度增大图片面积15% */
        height: 192px !important; /* 移动端备用固定高度，增大20% */
        aspect-ratio: 3/4 !important; /* 移动端也使用3:4比例 */
        object-fit: cover !important;
        border-radius: 6px !important;
        margin: 0 auto 0 10px !important; /* 移动端适度右移，减少对文字的侵占 */
        padding: 0 !important;
    }
    
    /* 移动端图片容器样式调整 */
    .section-content .row.mb-3 .col-12.col-md-2 {
        align-items: flex-start !important; /* 移动端也使用顶部对齐 */
        padding-top: 0.5rem !important; /* 移动端较小的顶部间距 */
    }
    
    /* 移动端右侧图片的特殊样式 - 增加左移距离 */
    .section-content .row.mb-3 .order-2 img {
        margin: 0 auto 0 -20px !important; /* 移动端右侧图片也进一步左移20px */
    }
    
    /* 移动端右侧图片容器样式调整 */
    .section-content .row.mb-3 .col-12.col-md-2.order-2 {
        align-items: flex-start !important; /* 移动端右侧图片也使用顶部对齐 */
        padding-top: 0.5rem !important; /* 移动端右侧图片也添加顶部间距 */
    }
    
    /* 移动端支持aspect-ratio的浏览器将使用动态高度 */
    @supports (aspect-ratio: 3/4) {
        .section-content .row.mb-3 img {
            height: auto !important; /* 覆盖固定高度 */
        }
    }
}

/* 平板设备调整 */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .team-nav-sidebar-fixed {
        width: 160px; /* 平板上适当缩小但保持可读性 */
        top: 103px !important; /* 同样再下降30px */
        height: 55vh; /* 平板设备稍小的高度 */
        max-height: 55vh;
    }

    .main-content-area {
        margin-left: 160px; /* 平板设备调整为与导航栏宽度匹配 */
        padding: 0.2rem 0; /* 平板端也移除左右内边距 */
    }

    .team-nav-item {
        font-size: 0.85rem;
        padding: 0.7rem 0.9rem;
    }

    .team-nav-title {
        font-size: 1rem;
    }
}

/* 确保左侧导航栏不受右侧内容影响 */

.content-section-full-width {
    width: 100vw;
    position: relative;
    left: calc(-50vw + 50%);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Members footer full-width fix (scoped to members page) */
footer {
    width: 100% !important;
    max-width: none !important;
    z-index: 1 !important; /* 设置很低的z-index，确保导航栏在其上方 */
    position: relative !important;
}
footer .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* 确保页面内容有足够的底部空间，避免被footer遮挡 */
.members-page-container {
    padding-bottom: 100px; /* 为footer预留空间 */
}

/* 桌面端确保导航栏正确定位 */
@media (min-width: 1200px) {
    .team-nav-sidebar-fixed {
        position: fixed !important;
        top: 103px !important; /* 再下降30px后的最终位置 */
        left: 0 !important;
        width: 140px !important; /* 桌面端宽度140px */
        height: fit-content !important; /* 自适应内容高度，减少底部空白 */
        max-height: calc(100vh - 123px) !important; /* 最大高度与主设置保持一致 */
    }
}

/* 回到顶部按钮样式 */
.back-to-top-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 80px; /* 椭圆形宽度 */
    height: 110px; /* 椭圆形高度，长轴在上下方向 */
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border-radius: 40px / 55px; /* 椭圆形边框，长轴在上下方向 */
    box-shadow: 0 4px 15px rgba(255, 179, 186, 0.4);
    background: linear-gradient(135deg, #ffb3ba 0%, #ffdfba 50%, #ffa07a 100%);
    padding: 8px; /* 增加padding为吉祥物图案预留更多空间 */
}

.back-to-top-button.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 179, 186, 0.6);
}

.back-to-top-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 40px / 55px; /* 椭圆形边框，与容器匹配，长轴在上下方向 */
    display: block;
    transform: scale(1.2); /* 放大吉祥物图案 */
}

/* 移动端调整 */
@media (max-width: 768px) {
    .back-to-top-button {
        bottom: 20px;
        right: 20px;
        width: 60px; /* 移动端椭圆形宽度 */
        height: 80px; /* 移动端椭圆形高度，长轴在上下方向 */
        border-radius: 30px / 40px; /* 移动端椭圆形边框，长轴在上下方向 */
        padding: 6px; /* 移动端padding */
    }
    
    .back-to-top-image {
        border-radius: 30px / 40px; /* 移动端图片椭圆形边框，长轴在上下方向 */
        transform: scale(1.1); /* 移动端稍微小一点的放大倍数 */
    }
}