/* ===== 微生物解决方案部分样式 ===== */

/* 主容器 */
.microbial-solution {
  min-height: clamp(560px, 92svh, 1200px);
  margin-bottom: clamp(6rem, 8vw, 9rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem) 0;
}

/* 背景盒子 */
.ms-bg-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* 内容容器  */
.ms-wrap {
  --page-max: 1150px;
  --side-pad: clamp(16px, 4vw, 48px);
  width: min(var(--page-max), 100%);
  padding-inline: var(--side-pad);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 9vw, 6rem);
}

/* 项目容器 */
.ms-item {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 3rem);
  width: 100%;
}

/* 图片容器 */
.ms-img-box {
  flex-shrink: 0;
  width: clamp(250px, 50vw, 450px);
  overflow: hidden;
}

/* 微生物图片 */
.ms-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 文字容器 */
.ms-text-box {
  flex-grow: 1;
  min-height: clamp(120px, 25vw, 150px);
  width: clamp(250px, 55vw, 650px);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  box-sizing: border-box;
  display: flex;
  align-items: center;
}


/* 文字样式 */
.ms-text-box p {
  font-weight: 550;
  font-size: clamp(1.5rem, 2.7vw, 1.8rem);
  line-height: 1.6;
  color: #1dc59b;
  margin: 0;
  z-index: 1;

  text-shadow: 3px 3px 3px rgba(255, 255, 255, 1);
  position: relative;
}

/* 项目3特殊布局 */
.ms-item:nth-child(3) {
  align-items: flex-start;
}

.ms-left-column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: clamp(250px, 55vw, 650px);
  gap: 20px;
  /* 文字和new图片之间的间距 */
}

.ms-new-img-box {
  width: 100%;
  min-height: auto;
  /* 覆盖原有的min-height */
  padding: 0;
  /* 移除内边距 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.ms-new-img {
  width: 100%;
  max-width: 500px;
  /* 控制图片最大宽度 */
  height: auto;
  display: block;
  border-radius: 8px;
}

/* 确保文字容器高度自适应 */
.ms-item:nth-child(3) .ms-text-box {
  min-height: auto;
  width: 100%;
}

/* 小屏幕响应式调整 */
@media (max-width: 768px) {
  .ms-item:nth-child(3) {
    flex-direction: column;
  }

  .ms-left-column {
    width: 100%;
    gap: 15px;
  }

  .ms-item:nth-child(3) .ms-img-box {
    width: 100%;
    max-width: 160px;
    margin: 1rem auto 0;
  }

  .ms-new-img-box {
    border-radius: 50px;
    /* 保持与其他文字容器一致的圆角 */
    padding: 1.5rem;
    /* 恢复一些内边距 */
  }
}

/* 响应式调整 - 小屏幕堆叠显示 */
@media (max-width: 768px) {
  .ms-item {
    flex-direction: column;
    align-items: center;
  }

  .ms-img-box {
    width: 100%;
    max-width: 160px;
    margin: 0 auto 1rem;
  }

  .ms-text-box {
    width: 100%;
    min-height: 100px;
    border-radius: 50px;
  }
}