/* Services Block Styles */
/* Стили для аккордеонов (spollers) загружаются через enqueue-assets.php */

/* Дополнительные стили для блока services можно добавить здесь */

.services__wrapper {
  align-items: flex-start;
  display: flex;
}

.services__label {
  width: 45%;
}

.services__content {
  width: 55%;
}

.spollers-services {
  background-color: var(--gray-1);
  margin-bottom: 0.75rem;
}

.spollers-services__item {
  border-radius: 0.5rem;
}

.spollers-services__item[open] {
  background-color: var(--primary-1);
}

.spollers-services__title {
  color: var(--gray-11);
  font-weight: 600;
  line-height: 1.2;
}

.spollers-services__title:after {
  color: var(--primary-4) !important;
}

.spollers-services__body {
  margin-left: 0.75rem;
  padding: 0.5rem 0.75rem 0.75rem;
}

.spollers-services__body:before {
  background-color: var(--primary-4);
  content: "";
  height: 90%;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.125rem;
}

.spollers-services__body p {
  color: var(--gray-11);
  font-size: 1.125rem;
  line-height: 1.4;
}

.spollers-services__body ul {
  padding-left: 0.75rem;
}

.spollers-services__body ul li {
  font-size: 1.125rem;
  line-height: 1.4;
  list-style: disc;
  margin-left: 1rem;
}

.spollers-services__body strong {
  font-weight: 43.75rem;
}

.dark-bg .spollers-services__item[open] {
  background-color: var(--primary-15);
}

.dark-bg .spollers-services__title {
  color: var(--gray-11);
}

.dark-bg .spollers__title {
  color: var(--gray-1);
}

.dark-bg p {
  color: var(--primary-7);
}

.dark-bg ul li {
  color: var(--gray-11);
}

@media (max-width: 47.99875rem) {
  .spollers-services__title {
    padding: 0.75rem 0.75rem 0.125rem 0.75rem;
  }
  .spollers-services__body {
    padding: 1rem 0.75rem 0.75rem 0.75rem;
  }
}

@media (max-width: 20em) {
  .spollers-services__title {
    font-size: 1.25rem;
  }
}

@media (min-width: 120em) {
  .spollers-services__title {
    font-size: 1.5rem;
  }
}

@media (min-width: 20em) and (max-width: 120em) {
  .spollers-services__title {
    font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);
  }
}

/* Медиа-запросы для services__wrapper, services__content, services__label */
@media (max-width: 61.99875em) {
  .services__wrapper {
    flex-direction: column;
  }

  .services__content,
  .services__label {
    width: 100%;
  }
}

@media (max-width: 20em) {
  .services__wrapper {
    gap: 0.75rem;
  }
}

@media (min-width: 20em) and (max-width: 120em) {
  .services__wrapper {
    gap: clamp(0.75rem, -1.1rem + 9.25vw, 10rem);
  }
}

@media (min-width: 120em) {
  .services__wrapper {
    gap: 10rem;
  }
}