/* Development History Timeline Styles - 参考year.html实现 */

/* 时间轴主容器 */
.development_timeline_section {
  padding: 4rem 0 8rem;
  background: url(../images/bg13.jpg) no-repeat center/cover;
}

.development_timeline_section .title_second_1 {
    text-align: center;
    margin-bottom: 7rem;
}

.development_timeline_section .section_header {
  text-align: center;
  margin-bottom: 60px;
}

.development_timeline_section .section_title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 15px;
  letter-spacing: 2px;
}

.development_timeline_section .section_subtitle {
  font-size: 1.1rem;
  color: #6c757d;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 时间轴容器 - 左右布局 */
.timeline_container {
  display: flex;
  max-width: 100%;
  margin: 0 auto;
  gap: 6rem;
  align-items: flex-start;
  background: #fff;
  padding: 7rem 7rem;
}

/* 左侧年份导航 */
.timeline_years {
  width: 41rem;
  flex-shrink: 0;
  position: relative;
}

.timeline_years::before {
  content: '';
  position: absolute;
  left: 37rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #f0f0f0;
  transform: translateX(-50%);
  z-index: 0;
}

/* 年份滑块样式 - 5个年份，每个80px高度 */
.years_slider {
  height: 44rem; /* 5 * 80px = 400px */
  overflow: hidden !important;
  /* background: red; */
}

.years_slider .slick-list {
  height: 50rem !important;
  overflow: hidden !important;
}

.years_slider .slick-track {
  height: 100% !important;
}

.year_slide {
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: 80px !important; /* 固定每个slide高度 */
  position: relative;
  box-sizing: border-box;
}

/* 确保Slick正确计算slide高度 */
.years_slider .slick-slide.slick-current {
  height: 11rem !important;
  /* max-height: 10rem !important; */
  /* min-height: 10rem !important; */
}

.years_slider .slick-slide {
    height: 7rem !important;
    width: 30rem !important;
    position: relative;
}

.year_slide.slick-slide.adjacent-slide {
    height: 10rem !important;
    /* max-height: 9rem !important; */
    /* min-height: 0 !important; */
}

.year_item {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

/* 年份样式已在下方重新定义，这里移除重复定义 */

/* 默认年份样式 - 最小最淡（不可见的slides） */
.years_slider .slick-slide .year_item h3 {
  font-size: 3.4rem !important;
  font-weight: 500 !important;
  color: #d6d8db !important;
  margin: 0;
  transition: all 0.4s ease;
  cursor: pointer;
  opacity: 0.4;
  width: 100%;
  text-align: center;
}

.years_slider .slick-slide .year_dot {
  position: absolute;
  right: -7.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  background: #fff;
  border: 1px solid #E6E6E6;
  border-radius: 50%;
  transition: all 0.4s ease;
  opacity: 1;
  z-index: 3;
}

/* 相邻年份样式 - 通过JavaScript动态添加adjacent-slide类名 */
.years_slider .slick-slide.adjacent-slide .year_item h3 {
  font-size: 4.7rem !important;
  font-weight: 600 !important;
  color: #B5C9DD;
  opacity: 0.7;
  transform: scale(1.0);
}

.years_slider .slick-slide.adjacent-slide .year_dot {
  width: 1.2rem;
  height: 1.2rem;
  background: #fff;
  border: 1px solid #E3E4E6;
  opacity: 1;
  transform: translateY(-50%) scale(1.0);
  right: -7.7rem;
}

/* 当前激活年份样式 - 最大最明显 */
.years_slider .slick-slide.slick-current .year_item h3 {
  /* font-size: 2.4rem !important; */
  /* font-weight: 700 !important; */
  /* color: #007bff !important; */
  opacity: 1;
  transform: scale(1.15);
  text-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
  font-family: DINCond, DINCond;
  font-weight: 900;
  font-size: 8.8rem !important;
  color: #084397 !important;
  line-height: 27px;
  text-shadow: 0px 1px 4px #3972e24f;
  /* text-align: left; */
  font-style: normal;
  text-transform: none;
}

.years_slider .slick-slide.slick-current .year_dot {
  width: 1.7rem;
  height: 1.7rem;
  background: #fff;
  border: .35rem solid #1B56C9;
  /* box-shadow: 0 0 0 3px #007bff, 0 2px 8px rgba(0, 123, 255, 0.3); */
  opacity: 1;
  transform: translateY(-50%) scale(1.2);
  right: -7.9rem;
}

/* 右侧事件内容 */
.timeline_events {
  flex: 1;
  /* background: #fff; */
  /* border-radius: 12px; */
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
  overflow: hidden;
}

.events_slider {
  height: 400px;
}

.event_slide {
  height: 400px !important;
  display: flex !important;
  align-items: center;
}

.event_content {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  padding: 0;
  gap: 6rem;
}

.event_image {
  width: 35rem;
  height: 29rem;
  flex-shrink: 0;
  /* border-radius: 8px; */
  overflow: hidden;
  /* background: #f8f9fa; */
}

.event_image img {
  width: auto;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease;
  max-width: 100%;
  max-height: 100%;
}

.event_content:hover .event_image img {
  transform: scale(1.05);
}

.event_text {
  flex: 1;
}

.event_text h4 {
  font-size: 2.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
  margin-top: 0;
}

.event_text p {
  font-size: 1.9rem;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

/* 特殊事件样式（2011年） */
.event_content.special_event {
  /* background: linear-gradient(135deg, #007bff, #0056b3); */
  /* color: white; */
}

.event_content.special_event .event_text h4 {
  /* color: white; */
}

.event_content.special_event .event_text p {
  /* color: rgba(255, 255, 255, 0.9); */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .timeline_container {
    flex-direction: column;
    gap: 30px;
  }
  
  .timeline_years {
    width: 100%;
    order: 2;
  }
  
  .timeline_years::before {
    display: none;
  }
  
  .years_slider {
    height: auto;
  }
  
  .timeline_events {
    order: 1;
  }
  
  .event_content {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
  }
  
  .event_image {
    width: 100%;
    max-width: 300px;
    height: 200px;
  }
}