/* 中誉特色案例组件样式 */
.zhongyu-feature-case {
  padding: 120px 0 158px;
  background: var(--color-primary);
  position: relative;
  overflow: hidden;
}

@media (min-width: 1800px) {
  .zhongyu-feature-case .container {
    max-width: 1600px;
  }
}

/* 背景装饰 */
.zhongyu-feature-case::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"%3E%3Cpath d="M0 0h800v600H0z" fill="%23fff" opacity="0.02"/%3E%3C/svg%3E');
  opacity: 0.1;
  pointer-events: none;
}

/* 标题区域 */
.zhongyu-feature-case-header {
  margin-bottom: 80px;
  position: relative;
  z-index: 1;
}

.zhongyu-feature-case-title {
  font-family: var(--title-font-family, 'Roboto', sans-serif);
  font-size: var(--zhongyu-title, 36px);
  font-weight: 700;
  line-height: 1.17;
  color: #FFFFFF;
  margin: 0 0 8px 0;
}

.zhongyu-feature-case-subtitle {
  font-family: var(--font-family, 'Roboto', sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.17;
  color: #FFFFFF;
  margin: 0;
}

/* 案例展示区域 */
.zhongyu-feature-case-content {
  display: flex;
  gap: 50px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

/* 案例项目 */
.zhongyu-feature-case-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

/* 案例图片 */
.zhongyu-feature-case-image {
  position: relative;
  aspect-ratio: 580/328;
  overflow: hidden;
  border-radius: 0;
}

.zhongyu-feature-case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

/* 图片遮罩层 */
.zhongyu-feature-case-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(3, 42, 89, 0.8);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 播放按钮 */
.zhongyu-feature-case-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 2;
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.zhongyu-feature-case-play:hover,
.zhongyu-feature-case-play:focus {
  text-decoration: none;
  color: inherit;
  outline: none;
}

.zhongyu-feature-case-play svg {
  width: 66px;
  height: 66px;
  display: block;
}

/* 案例信息 */
.zhongyu-feature-case-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 24px;
  background: transparent;
  border: 1.15px solid #F5F5F5;
  border-top: none;
  min-height: 220px;
}

.zhongyu-feature-case-text {
  flex: 1;
}

.zhongyu-feature-case-case-title {
  font-family: var(--font-family, 'Roboto', sans-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.17;
  color: #EBEBEB;
  margin: 0 0 21px 0;
}

.zhongyu-feature-case-description {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}

.zhongyu-feature-case-description svg {
  width: 16px;
  height: 16px;
  color: #FFFFFF;
  flex-shrink: 0;
  margin-top: 2px;
}

.zhongyu-feature-case-description p {
  font-family: var(--font-family, 'Roboto', sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.17;
  color: #FFFFFF;
  margin: 0;
}

/* 了解更多按钮 */
.zhongyu-feature-case-button {
  margin-top: auto;
}

.zhongyu-feature-case-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family, 'Roboto', sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.17;
  color: #EBEBEB;
  text-decoration: none;
  transition: all 0.3s ease;
}

.zhongyu-feature-case-link:hover {
  color: #FFFFFF;
  text-decoration: none;
}

.zhongyu-feature-case-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.zhongyu-feature-case-link:hover svg {
  transform: translateX(4px);
}

.zhongyu-feature-case-link:active {
  transform: translateX(2px);
}

/* Hover效果 - 中间项目默认应用 */
.zhongyu-feature-case-item-hover .zhongyu-feature-case-overlay {
  opacity: 1;
}

.zhongyu-feature-case-item-hover .zhongyu-feature-case-play {
  opacity: 1;
}

.zhongyu-feature-case-item:hover .zhongyu-feature-case-info {
  background: #FFFFFF;
}

.zhongyu-feature-case-item:hover .zhongyu-feature-case-case-title {
  color: #231815;
}

.zhongyu-feature-case-item:hover .zhongyu-feature-case-description svg {
  color: var(--color-primary);
}

.zhongyu-feature-case-item:hover .zhongyu-feature-case-description p {
  color: #595757;
}

.zhongyu-feature-case-item:hover .zhongyu-feature-case-link {
  color: var(--color-primary);
}

.zhongyu-feature-case-item:hover .zhongyu-feature-case-link:hover {
  color: #231815;
}

/* 普通项目的hover效果 */
.zhongyu-feature-case-item:hover .zhongyu-feature-case-overlay {
  opacity: 1;
}

.zhongyu-feature-case-item:hover .zhongyu-feature-case-play {
  opacity: 1;
}

.zhongyu-feature-case-item:hover .zhongyu-feature-case-image img {
  transform: scale(1.05);
}

/* ========================================
   响应式设计 - 桌面优先断点系统
   
   断点说明（从大到小依次覆盖）：
   - 默认: ≥1200px (桌面大屏)
   - lg: <1200px   (桌面小屏)
   - md: <992px    (平板)
   - sm: <768px    (手机横屏)
   - xs: <576px    (手机竖屏)
   ======================================== */

/* Large (lg) - <1200px */
@media (max-width: 1199.98px) {
  .zhongyu-feature-case {
    padding: 100px 0;
  }

  .zhongyu-feature-case-header {
    margin-bottom: 60px;
  }


  .zhongyu-feature-case-content {
    gap: 40px;
  }

  .zhongyu-feature-case-info {
    padding: 34px 24px;
    min-height: 216px;
  }
}

/* Medium (md) - <992px */
@media (max-width: 991.98px) {
  .zhongyu-feature-case {
    padding: 80px 0;
  }

  .zhongyu-feature-case-header {
    margin-bottom: 50px;
  }



  .zhongyu-feature-case-content {
    flex-direction: column;
    gap: 30px;
  }

  .zhongyu-feature-case-item {
    max-width: 100%;
  }

  .zhongyu-feature-case-image {
    aspect-ratio: 16/9;
  }

  .zhongyu-feature-case-info {
    padding: 30px 20px;
    min-height: auto;
  }

  .zhongyu-feature-case-case-title {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .zhongyu-feature-case-description {
    margin-bottom: 20px;
  }
}

/* Small (sm) - <768px */
@media (max-width: 767.98px) {
  .zhongyu-feature-case {
    padding: 60px 0;
  }

  .zhongyu-feature-case-header {
    margin-bottom: 40px;
  }



  .zhongyu-feature-case-content {
    gap: 25px;
  }

  .zhongyu-feature-case-info {
    padding: 25px 15px;
  }

  .zhongyu-feature-case-case-title {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .zhongyu-feature-case-description {
    margin-bottom: 15px;
  }

  .zhongyu-feature-case-description p {
    font-size: 13px;
  }

  .zhongyu-feature-case-link {
    font-size: 14px;
  }
}

/* Extra Small (xs) - <576px */
@media (max-width: 575.98px) {
  .zhongyu-feature-case {
    padding: 40px 0;
  }

  .zhongyu-feature-case-header {
    margin-bottom: 30px;
  }



  .zhongyu-feature-case-content {
    gap: 20px;
  }

  .zhongyu-feature-case-info {
    padding: 20px 12px;
  }

  .zhongyu-feature-case-case-title {
    font-size: 15px;
    margin-bottom: 10px;
  }

  .zhongyu-feature-case-description {
    margin-bottom: 12px;
  }

  .zhongyu-feature-case-description p {
    font-size: 12px;
  }

  .zhongyu-feature-case-link {
    font-size: 13px;
  }

  .zhongyu-feature-case-play svg {
    width: 50px;
    height: 50px;
  }
}

/* 确保组件样式隔离 */
.zhongyu-feature-case *,
.zhongyu-feature-case *::before,
.zhongyu-feature-case *::after {
  box-sizing: border-box;
}


.zhongyu-feature-case {
  animation: fadeInUp 0.6s ease-out;
}


.zhongyu-feature-case .fancybox-video{
  display: flex;
  justify-content: center;
  align-items: center;
}