/* 个人展示轮播图样式定义 - 这是用于直接展示团队成员信息的轮播图样式 */

/* CSS变量定义 - 确保个人卡片保持4:5(8:10)的比例 */
:root {
    /* 基本尺寸 - 保持4:5(8:10)比例 */
    --card-width: 150px;
    --card-height: 187px;
    --card-margin: 10px;
    --visible-cards: 8; /* 默认显示8个卡片 */
    --total-visible-width: calc(var(--visible-cards) * (var(--card-width) + var(--card-margin)) - var(--card-margin));
    
    /* 响应式尺寸 - 同样保持4:5(8:10)比例 */
    --card-width-mobile: 170px;
    --card-height-mobile: 212px;
    
    /* 其他变量定义 */
    --card-border-radius: 15px;
}

/* 个人展示容器 - 已在主体内容中，但允许控制按钮超出1200px宽度范围 */
#personal-showcase {
    position: relative;
    padding: 40px 0;
    overflow: visible;
    max-width: 100%;
    min-height: 340px; /* 确保有足够高度容纳悬停上移的卡片 */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* 卡片滑动容器 - 包含所有个人卡片 */
.personal-slides {
    /* 基本样式由JavaScript设置，这里保持简单 */
    position: relative;
    z-index: 10;
    margin: 0;
    flex: 1;
}

/* 隐藏滚动条但保持滚动功能 */
.personal-slides {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.personal-slides::-webkit-scrollbar {
    width: 0;
    height: 0; /* Chrome/Safari */
}

/* 个人卡片样式 - 定义单张卡片的基本样式，严格保持4:5(8:10)比例 */
.personal-card {
    flex-shrink: 0; /* 防止卡片被压缩 */
    width: var(--card-width);
    height: var(--card-height);
    background: rgba(26, 26, 26, 0.9);
    border-radius: var(--card-border-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    margin-right: var(--card-margin);
    cursor: pointer;
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
    transform-origin: center bottom;
}

/* 成员头像区域 */
.personal-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* 成员信息容器 - 包含姓名和团队信息 */
.personal-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 10px;
    text-align: center;
    z-index: 5;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
}

/* 成员姓名文本样式 */
.personal-name {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* 成员所属团队文本样式 */
.personal-team {
    font-size: 12px;
    color: #fff;
    text-transform: none;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 控制按钮通用样式 - 用于切换前后卡片的按钮 */
.personal-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

#personal-prev {
    left: -80px;
}

#personal-next {
    right: -80px;
}

.personal-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.1);
}

/* 个人卡片悬停效果 - 实现上移动画，确保悬停时卡片顶部刚好不被遮挡 */
.personal-card:hover {
    transform: translateY(-20px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

/* 确保所有卡片内容正确显示 */
.personal-card * {
    box-sizing: border-box;
}

/* 第一个成员卡片背景图片 - Bunny */
.personal-card:nth-child(1) .personal-image {
    background-image: url('../image/idol/smilegirl/Bunny/b1.jpg');
}

/* 第二个成员卡片背景图片 - Ivy */
.personal-card:nth-child(2) .personal-image {
    background-image: url('../image/idol/smilegirl/Ivy/l1.jpg');
}

/* 第三个成员卡片背景图片 - Sandya */
.personal-card:nth-child(3) .personal-image {
    background-image: url('../image/idol/smilegirl/Sandya1/s1.jpg');
}

/* 第四个成员卡片背景图片 - Xixi */
.personal-card:nth-child(4) .personal-image {
    background-image: url('../image/idol/smilegirl/Xi/x1.jpg');
}

/* 第五个成员卡片背景图片 - Zhenzhen */
.personal-card:nth-child(5) .personal-image {
    background-image: url('../image/idol/smilegirl/Zhen/z1.jpg');
}

/* 第六个成员卡片背景图片 - HANI */
.personal-card:nth-child(6) .personal-image {
    background-image: url('../image/idol/Helios/HANI/HANI.png');
}

/* 第七个成员卡片背景图片 - Minnie */
.personal-card:nth-child(7) .personal-image {
    background-image: url('../image/idol/Helios/Minnie/Minnie.png');
}

/* 第七个成员卡片背景图片 - ABI */
.personal-card:nth-child(8) .personal-image {
    background-image: url('../image/pp.png');
}

/* 第八个成员卡片背景图片 - baby */
.personal-card:nth-child(9) .personal-image {
    background-image: url('../image/idol/Helios/baby/baby.png');
}/* 响应式设计 - 在不同屏幕尺寸下的适配，保持4:5(8:10)比例 */
@media (max-width: 768px) {
    /* 确保容器在小屏幕上也允许卡片完全显示 */
    #personal-showcase {
        padding: 0 40px; /* 小屏幕上减少padding但仍保持足够空间 */
    }
    
    .personal-container,
    .personal-wrapper {
        overflow: visible;
    }
    
    .personal-card {
        width: var(--card-width-mobile) !important;
        height: var(--card-height-mobile) !important;
        min-width: var(--card-width-mobile) !important;
        max-width: var(--card-width-mobile) !important;
    }
    
    /* 修复类名 - 应该是personal-btn而不是personal-control */
    .personal-btn {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }
    
    /* 调整按钮位置以适应小屏幕 */
    #personal-prev {
        left: 5px;
    }
    
    #personal-next {
        right: 5px;
    }
    
    /* 优化小屏幕上的悬停效果，减少放大比例 */
    .personal-card:hover {
        transform: translateY(-10px) scale(1.1);
    }
}