/* 轮播图高度差异样式 */

/* 设置轮播图容器为相对定位，以便适应不同高度的幻灯片 */
.hero-slider {
  position: relative;
  min-height: 500px; /* 最小高度，确保容器不会太小 */
  transition: height 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 平滑过渡高度变化，使用更平滑的缓动函数 */
  overflow: visible; /* 允许内容溢出，确保高度差异可见 */
}

/* 设置每个幻灯片的基本样式 */
.slide {
  position: absolute;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease, transform 0.8s ease;
  transform: translateX(50px);
}

/* 当前活动幻灯片样式 */
.slide.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* 为每个幻灯片设置不同的高度 */
.slide:nth-child(1) {
  min-height: 560px; /* 第一个幻灯片高度 - 最高 */
}

.slide:nth-child(2) {
  min-height: 480px; /* 第二个幻灯片高度 - 最低 */
}

.slide:nth-child(3) {
  min-height: 520px; /* 第三个幻灯片高度 - 中等 */
}

/* 为每个幻灯片添加独特的内容布局 */
.slide:nth-child(1) .hero-content {
  padding-top: 20px;
}

.slide:nth-child(2) .hero-content {
  padding-top: 0;
}

.slide:nth-child(3) .hero-content {
  padding-top: 10px;
}

/* 为每个幻灯片添加微妙的视觉提示，表明高度不同 */
.slide::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slide.active::after {
  opacity: 1;
}

/* 确保内容在不同高度下正确对齐 */
.hero-content, .hero-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .slide:nth-child(1),
  .slide:nth-child(2),
  .slide:nth-child(3) {
    min-height: auto; /* 在移动设备上使用自动高度 */
    padding: 40px 0;
  }
  
  .slide.active {
    display: block;
  }
  
  .hero-slider {
    min-height: auto;
  }
}