/* --- 1. Swiper 容器微调 --- */
.myDoctorSwiper {
    width: 100%;
    padding-bottom: 40px !important; /* 底部留白给圆点 */
    overflow: visible; /* 防止阴影被切掉 */
}

/* --- 2. 单个卡片样式 --- */
.myDoctorSwiper .swiper-slide {
    /* 固定宽度，建议 180px - 200px */
    width: 190px !important; 
    
    /* 卡片外观 */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 柔和阴影 */
    border: 1px solid #f0f0f0;
    
    /* 内部元素垂直排列 */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 10px;
    box-sizing: border-box;
    
    /* 这里的 margin 由 Swiper 的 spaceBetween 控制，或者手动加一点 */
    margin-right: 15px !important; 
}

/* --- 3. 图片样式 --- */
.doc-img {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* 正圆形 */
    object-fit: cover; /* 防止图片变形 */
    margin-bottom: 15px;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* --- 4. 文字样式 --- */
.doc-name {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-bottom: 8px;
}

.doc-title {
    font-size: 12px;
    color: #007bff; /* 蓝色职称，显专业 */
    margin-bottom: 4px;
}

.doc-dept {
    font-size: 12px;
    color: #999;
}

/* --- 1. 给滑块本身加上过渡动画 (关键) --- */
.myDoctorSwiper .swiper-slide {
    /* 确保滑块有圆角，防止图片溢出 */
    border-radius: 12px; 
    
    /* 初始状态：无阴影或极淡阴影 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
    
    /* 【核心】添加平滑过渡，让浮动不卡顿 */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* 保持背景白色 */
    background: #fff;
}

/* --- 2. 鼠标悬停时的整体浮动效果 --- */
.myDoctorSwiper .swiper-slide:hover {
    /* 【动作】整体向上移动 10像素 */
    transform: translateY(-10px); 
    
    /* 【光影】阴影变大、变虚，模拟离地更高的感觉 */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15); 
    
    /* 可选：边框微微变亮，增加精致感 */
    border-color: #e0e0e0; 
}

/* --- 3. 内部卡片的微调 (防止内部元素乱跑) --- */
.doctor-card-inner {
    /* 确保内部元素跟随父级一起动，不需要单独写 transform */
    height: 100%; 
    padding: 20px 10px; /* 保持内边距一致 */
}