/* ======== 通用样式 ======== */
.custom-slider-wrapper{
  width:100%;
  display:flex;
  justify-content:center;
  padding-top: 20px; /* 增加顶部间距 */
  margin-bottom: 30px;
}

/* 普通布局 */
.custom-slider-wrapper.normal-layout .custom-slider-container{
  width:1440px;
  height:480px;
  position:relative;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.12);
}

/* 全宽布局 - 保持圆角 */
.custom-slider-wrapper.fullwidth-layout .custom-slider-container{
  width:100%;
  max-width:100%;
  height:600px;
  position:relative;
  overflow:hidden;
  border-radius:12px; /* 保持圆角 */
  box-shadow:0 6px 24px rgba(0,0,0,.12); /* 保持阴影 */
  margin: 0 auto; /* 居中显示 */
}

.custom-slider-container{
  transition: all 0.3s ease;
}

/* ===== 左侧图片区 ===== */
.slider-left{
  position:absolute;
  inset:0;
  cursor:pointer;
  overflow:hidden;
}
.slider-left .bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .45s ease;
}
.slider-left .bg-img.fade{opacity:0;}

/* ===== 文字阴影 ===== */
.slider-left .desc-box{
  position:absolute;
  left:40px;
  bottom:30px;
  z-index:2;
  max-width:60%;
}
.slider-left h2{
  font-size:28px;
  font-weight:800;
  margin:0 0 10px;
  color:#fff;
  text-shadow:0 4px 12px rgba(0,0,0,.8);
}
.slider-left p{
  font-size:16px;
  line-height:1.6;
  margin:0;
  color:rgba(255,255,255,.95);
  text-shadow:0 3px 8px rgba(0,0,0,.7);
}

/* ===== 右栏毛玻璃菜单 ===== */
.slider-right{
  position:absolute;
  top:0;
  right:0;
  width:260px;
  height:100%;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-left:1px solid rgba(255,255,255,.08);
  z-index:3;
  border-top-right-radius:12px; /* 右上角圆角 */
  border-bottom-right-radius:12px; /* 右下角圆角 */
}
.slider-right .menu-item{
  color:#fff;
  padding:14px 18px;
  cursor:pointer;
  font-size:16px;
  border-radius:6px;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
  transition:background .25s ease,color .25s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 8px; /* 添加左右边距 */
}
.slider-right .menu-item:hover,
.slider-right .menu-item.active{
  background:rgba(255,255,255,.25);
  color:#fff;
}

/* ===== 响应式：移动端优化 ===== */
@media (max-width:1600px){
  .custom-slider-wrapper.normal-layout .custom-slider-container{width:95%;height:440px;}
  .custom-slider-wrapper.fullwidth-layout .custom-slider-container{height:500px;}
}

@media (max-width:1200px){
  .custom-slider-wrapper.normal-layout .custom-slider-container{height:400px;}
  .custom-slider-wrapper.fullwidth-layout .custom-slider-container{height:450px;}
  .slider-left .desc-box{max-width:70%;}
}

@media (max-width:992px){
  :root{ --gap-mobile:10px; } /* 左右留白 */

  .custom-slider-wrapper{justify-content:stretch;}
  .custom-slider-wrapper.normal-layout .custom-slider-container,
  .custom-slider-wrapper.fullwidth-layout .custom-slider-container{
    width:calc(100% - (var(--gap-mobile) * 2));
    margin-left:var(--gap-mobile);
    margin-right:var(--gap-mobile);
    height:auto;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
    position:relative;
  }

  /* 移动端优化：减少内边距和字体大小 */
  .slider-left .desc-box{
    left:16px;
    bottom:16px;
    max-width:86%;
    padding: 12px;
    background: rgba(0,0,0,0.3); /* 添加半透明背景增强可读性 */
    border-radius: 8px;
    backdrop-filter: blur(4px);
  }
  
  .slider-left h2{
    font-size:20px;
    margin-bottom: 6px;
    line-height: 1.3;
  }
  
  .slider-left p{
    font-size:14px;
    line-height: 1.4;
    opacity: 0.95;
  }

  .slider-left{position:relative;height:300px;}
  .slider-right{display:none!important;}
}

@media (max-width:768px){
  .slider-left{height:250px;}
  .slider-left .desc-box{
    max-width:90%;
    left:12px;
    bottom:12px;
    padding: 10px;
  }
  .slider-left h2{font-size:18px;}
  .slider-left p{font-size:13px;}
}

@media (max-width:480px){
  .slider-left{height:200px;}
  .slider-left .desc-box{
    left:10px;
    bottom:10px;
    padding: 8px;
  }
  .slider-left h2{
    font-size:16px;
    margin-bottom:4px;
  }
  .slider-left p{
    font-size:12px;
    line-height: 1.3;
  }
}

/* 大屏幕全宽布局优化 */
@media (min-width: 1400px) {
  .custom-slider-wrapper.fullwidth-layout .custom-slider-container{
    max-width: 1400px; /* 在大屏幕上限制最大宽度 */
    margin: 0 auto; /* 居中显示 */
  }
}

/* 移动端触摸优化 */
@media (hover: none) and (pointer: coarse) {
  .slider-right .menu-item{
    padding: 16px 18px; /* 增大触摸区域 */
    min-height: 44px; /* 最小触摸尺寸 */
  }
}