.commitment-service-section {
  position: relative;
  /* 保证最小高度，以便Flexbox有空间进行上下对齐 */
  min-height: 600px; 
  background: url('../img/services/service-advantage-bg.png') no-repeat center center;
  background-size: cover;
  /* 使用 CSS 混合模式实现深蓝遮罩，比单纯的 opacity 更好看 */
  box-shadow: inset 0 0 0 1000px rgba(12, 24, 46, 0.2);
}
/* 核心逻辑：容器需要相对定位，方便线条定位 */
.commitment-service-item {
  position: relative;
  padding-left: 25px; /* 为线条留出空间 */
  display: flex;
  flex-direction: column;
}

/* 橙色装饰线 */
.commitment-brand-line {
  position: absolute;
  left: 0;
  width: 3px;
  background-color: #ff6600;
}

/* 1, 3列：线条从内容顶部开始，向下延伸（高度随内容） */
.commitment-type-bottom .commitment-brand-line {
  top: 0;
  bottom: 0;
}

/* 2, 4列：线条从容器顶部一直延伸到底部 */
.commitment-type-top-long {
  height: 100%;
}
.commitment-type-top-long .commitment-brand-line {
  top: -40px; /* 向上延伸出一段距离 */
  bottom: -300px; /* 向下大幅度延伸，模拟穿透到底部的效果 */
}

.commitment-header-line { width: 4px; height: 28px; background-color: #ff6600; }
.commitment-text-justify { text-align: justify; }

@media (min-width: 992px) {
  .commitment-stagger-row { height: 480px; align-items: stretch; }
  /* 保持溢出隐藏，防止长线条超出容器 */
  .commitment-service-grid-container { overflow: hidden; padding-bottom: 50px; }
}