/* Steps Block — loaded via block.json on pages that use the block,
   and enqueued by template-parts/page-builder/steps_block.php for the Page Builder layout.
   Gathered from pages/_template-services.scss and _overrides.scss (overrides merged in).
   The slider is driven by steps-block-view.js, which sets --step-start / --step-width on .slider. */

.services-slider .body-wrapper {
  padding: 10% 9% 9%;
}

.services-slider .heading-text {
  margin-bottom: 100px;
}

.steps-block .heading-text * {
  color: #000;
}

.services-slider hr {
  border-color: #000;
}

.services-slider .slider {
  display: flex;
	margin-left: -20px;
	margin-right: -20px;
	width: calc(100% + 40px);
}

.services-slider .slider .item {
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}

.services-slider .slider .item .title {
  position: absolute;
  top: 20px;
  cursor: pointer;
  transition: all 0.5s;
}

.services-slider .slider .item .title p,
.services-slider .slider .item .content p {
  color: #000;
}

.services-slider .slider .item.active .title {
  top: -50px;
}

.services-slider .slider .item.active .title p {
  font-size: 35px;
}

.services-slider .slider .content {
  margin-top: 40px;
  opacity: 0;
}

.services-slider .slider .item.active .content {
  opacity: 1;
  transition: all 0.3s;
  transition-delay: 1s;
}

/* desktop slider: 4 steps in view, the active one widened to 35% and the other 3 sharing the rest.
   --step-start (steps scrolled off the left) shifts the row via the first step's margin. */
@media only screen and (min-width: 769px) {
  .services-slider .slider {
    overflow: hidden;
    padding-top: 55px; /* room for the raised active title */
  }

  .services-slider .slider .item {
    flex: 0 0 var(--step-width, 25%);
    transition: flex-basis 0.5s, margin-left 0.5s;
  }

  .services-slider .slider .item.active {
    flex-basis: var(--step-active-width, 35%);
  }

  .services-slider .slider .item:first-child {
    margin-left: calc(var(--step-start, 0) * var(--step-width, 25%) * -1);
  }
}

.slider-services-navigation {
	column-gap: 10px;
	display: flex;
	justify-content: center;
}


@media only screen and (max-width: 768px) {

  /* mobile: steps stack and open one at a time */
  .services-slider .slider {
    flex-direction: column;
  }

  .services-slider .slider .item {
    margin-bottom: 100px;
  }

  .services-slider .slider .content {
    display: none;
  }

  .services-slider .slider .item.active .content {
    display: block;
  }
}

@media only screen and (max-width: 552px) {
  .services-slider .body-wrapper {
    padding: 20% 9.5% 20% 8%;
  }

  .services-slider .heading-text {
    flex-direction: column;
    margin-bottom: 100px;
  }

  .services-slider .heading-text h4 {
    width: auto;
    margin-bottom: 15px;
  }

  .services-slider .heading-text p {
    width: auto;
    font-size: 15px;
  }
}