/* Minlong Solution List Component */
.minlong-solution-list {
  padding: var(--component-gap) 0;
  background: #fff;
}

/* Section Header */
.minlong-solution-list .solution-header {
  margin-bottom: 140px;
}

.minlong-solution-list .solution-subtitle {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-weight: 400;
  line-height: 1.625;
  color: #666666;
  max-width: 900px;
}

.minlong-solution-list .solution-title {
  font-family: var(--semibold-font-family);
  font-size: var(--title-size-h3);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-primary);
  margin: 0;
}

/* Solutions List */
.minlong-solution-list .solution-items {
  display: flex;
  flex-direction: column;
  gap: 140px;
}

/* Solution Item */
.minlong-solution-list .solution-item {
  display: flex;
  gap: 0;
  align-items: stretch;
  position: relative;
}

/* Odd items: Image left, Content right */
.minlong-solution-list .solution-item.odd {
  flex-direction: row;
}

/* Even items: Content left, Image right */
.minlong-solution-list .solution-item.even {
  flex-direction: row-reverse;
}
.minlong-solution-list .solution-item.odd  .solution-content{
  right:0;
}
.minlong-solution-list .solution-item.odd  .solution-content .content-wrapper{
  padding-left:160px;
}
.minlong-solution-list .solution-item.even  .solution-content{
  left:0;
}
.minlong-solution-list .solution-item.even  .solution-content .content-wrapper{
  padding-right:160px;
}
/* Image Section */
.minlong-solution-list .solution-image {
  flex: 0 0 52%;
  width: 52%;
  position: relative;
  z-index: 1;
}

.minlong-solution-list .image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  aspect-ratio: 73/46;
}

.minlong-solution-list .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image Gradient Overlay */
.minlong-solution-list .image-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* Odd items: Gradient from left to right */
.minlong-solution-list .solution-item.odd .image-gradient {
  background: linear-gradient(90deg, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 1) 100%);
}

/* Even items: Gradient from right to left */
.minlong-solution-list .solution-item.even .image-gradient {
  background: linear-gradient(270deg, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 1) 100%);
}

/* Content Section */
.minlong-solution-list .solution-content {
  flex: 0 0 52%;
  width: 52%;
  background: linear-gradient(90deg, rgba(245, 245, 245, 0.00) 0%, #F5F5F5 100%);
  display: flex;
  align-items: center;
  position: absolute;
  top: -60px;
  z-index: 0;
}
.minlong-solution-list .solution-item.even .solution-content{
  background: linear-gradient(90deg, #F5F5F5 0%, rgba(245, 245, 245, 0.00) 100%);
}
.minlong-solution-list .content-wrapper {
  padding: 60px 40px 80px;
  width: 100%;
}

.minlong-solution-list .content-title {
  font-family: var(--semibold-font-family);
  font-size: var(--title-size-h3);
  font-weight: 600;
  line-height: 1.5;
  color: #333333;
  margin: 0 0 var(--component-gap-sm);
  display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;  /* 限制显示行数 */
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
}

/* Content Divider */
.minlong-solution-list .content-divider {
  position: relative;
  height: 1px;
  background: var(--color-primary);
  margin-bottom: var(--text-gap-lg);
}

.minlong-solution-list .divider-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 1px;
  background: var(--color-primary);
}

.minlong-solution-list .content-desc {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-weight: 400;
  line-height: 1.625;
  color: #666666;
  margin: 0 0 var(--text-gap-lg);
  display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 5;  /* 限制显示行数 */
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
}

.minlong-solution-list .content-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  background: transparent;
  border: 1px solid var(--color-primary);
}
.minlong-solution-list .content-link:hover{
  background:var(--color-primary);
  color:#fff;
}
/* Responsive Styles */
@media screen and (max-width: 1500px) {
  .minlong-solution-list .solution-header {
    margin-bottom: var(--component-gap);
  }
  .minlong-solution-list .solution-items {
    gap: var(--component-gap);
  }

  .minlong-solution-list .content-wrapper {
    padding: 50px 60px;
  }
  .minlong-solution-list .solution-items{
    gap:120px;
  }
}

@media screen and (max-width: 1280px) {
  .minlong-solution-list .content-wrapper {
    padding: 40px 50px;
  }
  .minlong-solution-list .solution-content{
    top:-40px;
  }
  .minlong-solution-list .solution-item.odd .solution-content .content-wrapper{
    padding-left: 70px;
  }
  .minlong-solution-list .solution-item.even .solution-content .content-wrapper{
    padding-right: 70px;
  }
  .minlong-solution-list .solution-header {
    margin-bottom: var(--component-gap);
  }
}

@media screen and (max-width: 992px) {
  .minlong-solution-list .solution-item {
    flex-direction: column !important;
  }

  .minlong-solution-list .solution-image,
  .minlong-solution-list .solution-content {
    flex: 0 0 100%;
    width: 100%;
    position: static;
  }


  /* All gradients from top to bottom on mobile */
  .minlong-solution-list .image-gradient {
    background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 1) 100%) !important;
  }

  .minlong-solution-list .content-wrapper {
    padding: 30px 40px;
  }

  .minlong-solution-list .solution-items {
    gap: var(--component-gap-sm);
  }
  .minlong-solution-list .content-title{
    margin-bottom:40px;
  }
}

@media screen and (max-width: 768px) {
  .minlong-solution-list .content-wrapper {
    padding: 25px 30px !important;
  }
  
  .minlong-solution-list .solution-subtitle {
    font-size: var(--text-size-sm);
  }
}

@media screen and (max-width: 576px) {
  .minlong-solution-list .content-wrapper {
    padding: 20px 25px;
  }

  .minlong-solution-list .solution-header {
    margin-bottom: var(--component-gap-sm);
  }

  .minlong-solution-list .solution-items {
    gap: var(--text-gap);
  }
}

@media screen and (max-width: 820px) {
    .minlong-solution-list .solution-item.odd .solution-content .content-wrapper {
        padding-left: 20px;
    }

    .minlong-solution-list .content-wrapper {
        padding: 30px 20px;
    }
.minlong-solution-list .solution-item.even .solution-content .content-wrapper {
        padding-right: 20px;
    }

}