/* ── Banner Services: full-height hero layout ── */

/* Cancel the 150px default and take over vertical positioning */
.th-port-slider-content-wrap:has(.service-title-wrap) {
  padding-top: 0;
  display: flex;
  align-items: center;
  left: 0;
  padding-left: 80px;
  padding-right: 80px;
  box-sizing: border-box;
}

.service-title-wrap {
  width: 100%;
  padding-top: 80px;   /* clear the fixed navbar */
  padding-bottom: 20px;
}

/* ── 2-column grid ── */
.service-title-list {
  column-count: 2;
  column-gap: 40px;
  max-height: none;
  overflow: visible;
}

/* ── Individual titles ──
   Right column has 3 items but some wrap to 2 lines → divide by ~6.
   Left column has 4 items → divide by ~5.
   We use the more conservative divisor (6) so nothing overflows.       */
.service-title-list .th-port-slider-title {
  margin: 0;
  break-inside: avoid;
  white-space: normal;           /* allow long titles to wrap */
  font-size: clamp(44px, calc((100vh - 120px) / 6.0), 118px);
  line-height: 1.05;
}

.service-title-list .th-port-slider-title a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 0;
}

.service-title-list .th-port-slider-title .spin {
  width: clamp(22px, 2.2vw, 36px);
  height: clamp(22px, 2.2vw, 36px);
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 1199px) {
  .th-port-slider-content-wrap:has(.service-title-wrap) {
    padding-left: 50px;
    padding-right: 50px;
  }
}

@media (max-width: 991px) {
  .th-port-slider-content-wrap:has(.service-title-wrap) {
    padding-left: 30px;
    padding-right: 30px;
  }
  /* Mobile: 1 column, 7 items → divide by 7.5 */
  .service-title-list {
    column-count: 1;
  }
  .service-title-list .th-port-slider-title {
    font-size: clamp(28px, calc((100vh - 100px) / 8.5), 80px);
  }
}

@media (max-width: 575px) {
  .th-port-slider-content-wrap:has(.service-title-wrap) {
    padding-left: 20px;
    padding-right: 20px;
  }
  .service-title-list .th-port-slider-title {
    font-size: clamp(22px, 8vw, 40px);
  }
}