/* 中誉品牌故事组件样式 */
.zhongyu-brand-story {
  padding: 140px 0;
  background: #F8F8F8;
  position: relative;
  overflow: hidden;
}

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

/* 品牌信息区域 */
.zhongyu-brand-info {
  margin-bottom: 60px;
}

.zhongyu-brand-title {
  font-family: var(--title-font-family, 'Roboto', sans-serif);
  font-size: var(--zhongyu-inner-title, 64px);
  font-weight: 700;
  line-height: 1.17;
  background: linear-gradient(90deg, #0C3054 0%, #1B6ABA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 32px 0;
}

.zhongyu-brand-description {
  font-family: var(--font-family, 'Roboto', sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  color: #595757;
  margin: 0;
  max-width: 900px;
  white-space: pre-line;
  margin-bottom: 40px;
}

/* 数据统计区域 */
.zhongyu-brand-stats {
  display: flex;
  width: 100%;
  gap: 38px;
  flex-wrap: wrap;
}

.zhongyu-stat-card {
  /* width: 139px; */
  /* height: 139px; */
  border-radius: 80px 80px 80px 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 23px 9px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.zhongyu-stat-card:nth-child(odd) {
  background: #0C3054;
}

.zhongyu-stat-card:nth-child(even)  {
  background: #595757;
}


.zhongyu-stat-card {
  width: calc(20% - 31px);
  aspect-ratio: 1/1;
  padding: 0;
  flex: 1;
}
.zhongyu-stat-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 80px 80px 80px 0;
  height: 100%;
}

.zhongyu-stat-number {
  font-family: var(--font-family, 'Roboto', sans-serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.17;
  color: #FFFFFF;
  text-align: center;
}
.zhongyu-stat-unit{
  font-size: 24px;
  color: #fff;
}

.zhongyu-stat-label {
  font-family: var(--font-family, 'Roboto', sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.17;
  color: #FFFFFF;
  text-align: center;
  white-space: pre-line;
}

/* 图片展示区域 - 静态网格 */
.zhongyu-images-grid {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
}

/* 移动端专用轮播容器（默认隐藏，JS控制显示） */
.zhongyu-images-swiper-mobile {
  display: none;
}

.zhongyu-image-item {
  flex: 1;
  
  border-radius: 5px;
  
  position: relative;
}

.zhongyu-image-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 248/165;
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}
.zhongyu-image-item h4{
  text-align: center;
  padding: 15px 0;
}


/* 图片轮播区域 */
.zhongyu-images-swiper,
.zhongyu-images-swiper-mobile {
  position: relative;
}

.zhongyu-images-swiper .swiper-wrapper,
.zhongyu-images-swiper-mobile .swiper-wrapper {
  align-items: center;
}

.zhongyu-images-swiper .swiper-slide,
.zhongyu-images-swiper-mobile .swiper-slide {
  width: 248px;
  height: auto;
}

/* 轮播按钮 */
.zhongyu-images-swiper .swiper-button-prev,
.zhongyu-images-swiper .swiper-button-next {
  width: 40px !important;
  height: 40px !important;
  background: #0C3054 !important;
  border-radius: 50% !important;
  color: #FFFFFF !important;
}

.zhongyu-images-swiper .swiper-button-prev:after,
.zhongyu-images-swiper .swiper-button-next:after {
  font-size: 16px !important;
  font-weight: bold !important;
}

.zhongyu-images-swiper .swiper-button-prev {
  left: 0 !important;
}

.zhongyu-images-swiper .swiper-button-next {
  right: 0 !important;
}



/* 轮播分页器 */
.zhongyu-images-swiper .swiper-pagination,
.zhongyu-images-swiper-mobile .swiper-pagination {
  bottom: -30px !important;
}

.zhongyu-images-swiper .swiper-pagination-bullet,
.zhongyu-images-swiper-mobile .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #0C3054;
  opacity: 0.3;
}

.zhongyu-images-swiper .swiper-pagination-bullet-active,
.zhongyu-images-swiper-mobile .swiper-pagination-bullet-active {
  opacity: 1;
  background: #1B6ABA;
}
.zhongyu-brand-info-wrap{
  display:flex;
  gap: 80px;
  margin-bottom: 55px;
}
.zhongyu-brand-info-left{
  width:42.75%;
  aspect-ratio: 648/456;
  border-radius: 5px;
}
.zhongyu-brand-info-left img{
  width:100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.zhongyu-brand-info-right{
  flex:1;
}
.zhongyu-stat-number-wrap{
  text-align: center;
}
/* ========================================
   响应式设计 - 桌面优先断点系统
   
   断点说明（从大到小依次覆盖）：
   - 默认: ≥1200px (桌面大屏)
   - lg: <1200px   (桌面小屏)
   - md: <992px    (平板)
   - sm: <768px    (手机横屏)
   - xs: <576px    (手机竖屏)
   ======================================== */

/* Large (lg) - <1200px */
@media (max-width: 1800px) {
  .zhongyu-stat-number{
    font-size: 30px;
  }
  .zhongyu-stat-unit{
    font-size: 18px;
  }
  .zhongyu-stat-label{
    font-size: 14px;
  }
}
@media (max-width: 1600px) {
  .zhongyu-stat-number{
    font-size: 20px;
  }
  .zhongyu-stat-unit{
    font-size: 16px;
  }
  .zhongyu-stat-label{
    font-size: 12px;
  }
  .zhongyu-brand-stats{
    gap: 15px;
  }
  .zhongyu-brand-info-wrap{
    gap:50px;
  }
}
@media (max-width: 1199.98px) {
  .zhongyu-brand-story {
    padding: 100px 0;
  }

  .zhongyu-brand-info {
    margin-bottom: 50px;
  }



  .zhongyu-brand-description {
    font-size: 15px;
    line-height: 1.9;
  }

  .zhongyu-brand-stats {
    gap: 15px;
    margin-bottom: 35px;
  }

  .zhongyu-stat-card {
    width: 120px;
    height: 120px;
  }

  .zhongyu-stat-number {
    font-size: 32px;
  }

  .zhongyu-stat-label {
    font-size: 14px;
  }

  .zhongyu-image-item {
    flex: 1;
  }

  .zhongyu-images-swiper .swiper-slide {
    width: 220px;
  }
  .zhongyu-brand-info-wrap{
    flex-direction:column-reverse;
    gap: 0;
    margin-bottom: 20px;
  }
  .zhongyu-brand-info-left{
    width:100%;
  }
}

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

  .zhongyu-brand-info {
    margin-bottom: 40px;
  }

  .zhongyu-brand-title {
    margin-bottom: 16px;
  }

  .zhongyu-brand-description {
    font-size: 14px;
    line-height: 1.8;
  }

  .zhongyu-brand-stats {
    gap: 12px;
    margin-bottom: 30px;
  }

  .zhongyu-stat-card {
    width: 100px;
    height: 100px;
    padding: 18px 8px;
  }

  .zhongyu-stat-content {
    width: 90px;
  }

  .zhongyu-stat-number {
    font-size: 28px;
  }

  .zhongyu-stat-label {
    font-size: 13px;
  }

  .zhongyu-images-grid {
    gap: 15px;
  }

 

  .zhongyu-images-swiper .swiper-slide {
    width: calc((100% - 30px) / 3);
  }
}

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

  .zhongyu-brand-info {
    margin-bottom: 30px;
  }

  .zhongyu-brand-title {
    margin-bottom: 12px;
  }

  .zhongyu-brand-description {
    font-size: 13px;
    line-height: 1.7;
  }

  .zhongyu-brand-stats {
    gap: 10px;
    margin-bottom: 25px;
    justify-content: center;
  }

  .zhongyu-stat-card {
    width: 90px;
    height: 90px;
    padding: 15px 6px;
    border-radius: 60px 60px 60px 0;
  }

  .zhongyu-stat-content {
    width: 75px;
  }

  .zhongyu-stat-number {
    font-size: 24px;
  }

  .zhongyu-stat-label {
    font-size: 12px;
  }

  .zhongyu-images-grid {
    gap: 12px;
    justify-content: center;
  }


  .zhongyu-images-swiper {
    /* padding: 0 40px; */
  }

  .zhongyu-images-swiper .swiper-slide {
    width: calc((100% - 12px) / 2);
  }

  .zhongyu-images-swiper .swiper-button-prev,
  .zhongyu-images-swiper .swiper-button-next {
    width: 32px !important;
    height: 32px !important;
  }

  .zhongyu-images-swiper .swiper-button-prev:after,
  .zhongyu-images-swiper .swiper-button-next:after {
    font-size: 14px !important;
  }
}

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

  .zhongyu-brand-info {
    margin-bottom: 25px;
  }

  .zhongyu-brand-title {
    margin-bottom: 10px;
  }

  .zhongyu-brand-description {
    font-size: 12px;
    line-height: 1.6;
  }

  .zhongyu-brand-stats {
    gap: 8px;
    margin-bottom: 20px;
  }

  .zhongyu-stat-card {
    width: 90px;
    height: 90px;
    padding: 12px 5px;
    border-radius: 50px 50px 50px 0;
    flex: none;
  }

  .zhongyu-stat-content {
    width: 65px;
  }

  .zhongyu-stat-number {
    font-size: 20px;
  }

  .zhongyu-stat-label {
    font-size: 10px;
  }

  .zhongyu-images-grid {
    gap: 10px;
  }

  .zhongyu-image-item {
    width: 100%;
  }

  .zhongyu-images-swiper {
    /* padding: 0 35px; */
  }

  .zhongyu-images-swiper .swiper-slide {
    width: 100%;
  }

  .zhongyu-images-swiper .swiper-button-prev,
  .zhongyu-images-swiper .swiper-button-next {
    width: 28px !important;
    height: 28px !important;
  }

  .zhongyu-images-swiper .swiper-button-prev:after,
  .zhongyu-images-swiper .swiper-button-next:after {
    font-size: 12px !important;
  }
}

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

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.zhongyu-brand-story {
  animation: fadeInUp 0.6s ease-out;
}