/* 图片懒加载优化样式 */

/* 背景图片懒加载 */
.home-slider {
  background-color: #f5f5f7;
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
}

.home-slider.loaded {
  background-image: url("/assets/img/home/home.webp");
}

.slider-service-bg {
  background-color: #f5f5f7;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
}

.slider-service-bg.loaded {
  background-image: url("/assets/img/service/service.webp");
}

.slider-solution-bg {
  background-color: #f5f5f7;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
}

.slider-solution-bg.loaded {
  background-image: url("/assets/img/solution/solution.webp");
}

.slider-about-bg {
  background-color: #f5f5f7;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.3s ease;
}

.slider-about-bg.loaded {
  background-image: url("/assets/img/about/about.webp");
}

.slider-community-bg {
  background-color: #f5f5f7;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.3s ease;
}

.slider-community-bg.loaded {
  background-image: url("/assets/img/community/community.webp");
}

.slider-common-bg {
  background-color: #f5f5f7;
  background-size: 100% auto;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
}

.slider-common-bg.loaded {
  background-image: url("/assets/img/common-background.webp");
}

.slider-post-bg {
  background-color: #f5f5f7;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.3s ease;
}

.slider-post-bg.loaded {
  background-image: url("/assets/img/about/post.webp");
}

.slider-career-bg {
  background-color: #f5f5f7;
  background-size: 100% auto;
  background-attachment: fixed;
  background-position: center;
  background-repeat: repeat;
  transition: background-image 0.3s ease;
}

.slider-career-bg.loaded {
  background-image: url("/assets/img/career/jigsaw.jpg");
}

/* 图片元素懒加载 */
.lazy-img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lazy-img.loaded {
  opacity: 1;
}

/* 加载占位符 */
.img-placeholder {
  background-color: #f5f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}

/* 响应式优化 */
@media (max-width: 992px) {
  .home-slider,
  .slider-service-bg,
  .slider-solution-bg,
  .slider-about-bg,
  .slider-community-bg,
  .slider-common-bg,
  .slider-post-bg {
    padding: 6rem 0;
    background-size: cover;
    background-position: center;
  }
}

/* 移动端优化 */
@media (max-width: 768px) {
  .home-slider {
    height: 25rem;
    padding-top: 4rem;
  }
  
  .home-slider .block h1 {
    font-size: 2rem;
  }
  
  .home-slider .block h3 {
    font-size: 1.2rem;
  }
  
  .slider-post-bg {
    height: 15rem;
    padding: 2rem 0;
  }
  
  /* 确保按钮在小屏幕上保持单行 */
  .home-slider .block .btn-main {
    display: inline-block;
    white-space: nowrap;
    padding: 0.4rem 0.8rem;
    margin-right: 0.5rem;
    font-size: 0.9rem;
  }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
  .home-slider {
    height: 20rem;
    padding-top: 3rem;
  }
  
  .home-slider .block h1 {
    font-size: 1.5rem;
  }
  
  .home-slider .block h3 {
    font-size: 1rem;
  }
  
  .slider-post-bg {
    height: 12rem;
    padding: 1.5rem 0;
  }
  
  /* 超小屏幕按钮进一步优化 */
  .home-slider .block .btn-main {
    display: inline-block;
    white-space: nowrap;
    padding: 0.3rem 0.6rem;
    margin-right: 0.3rem;
    font-size: 0.8rem;
    min-width: auto;
  }
}