/* Services Section Specific Styles */

.services {
  position: relative;
}

.service-card {
  padding: 20px 10px;
}

/* Cascade effect - ascending order (1st lowest, 4th highest) */
.services .row > div:nth-child(1) .service-card {
  margin-top: 86px;
}

.services .row > div:nth-child(2) .service-card {
  margin-top: 56px;
}

.services .row > div:nth-child(3) .service-card {
  margin-top: 26px;
}

.services .row > div:nth-child(4) .service-card {
  margin-top: 0;
}

/* Flat layout - no cascade */
.services-flat .row > div:nth-child(1) .service-card,
.services-flat .row > div:nth-child(2) .service-card,
.services-flat .row > div:nth-child(3) .service-card,
.services-flat .row > div:nth-child(4) .service-card {
  margin-top: 0;
}

.services-flat .service-image .img-placeholder {
  border-radius: 25px;
}

.service-image {
  display: flex;
  justify-content: center;
}

.service-image img,
.service-image .img-placeholder {
  max-width: 100%;
  height: auto;
  border-radius: 25px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .service-card {
    margin-bottom: 30px;
  }

  /* Reset cascade on tablet */
  .services .row > div:nth-child(1) .service-card,
  .services .row > div:nth-child(2) .service-card,
  .services .row > div:nth-child(3) .service-card,
  .services .row > div:nth-child(4) .service-card {
    margin-top: 0;
  }

  /* Улучшенный line-height для заголовка */
  .services h2 {
    line-height: 1.3;
  }
}

@media (max-width: 768px) {
  /* Уменьшаем padding для больших изображений */
  .service-card {
    padding: 20px 0;
  }

  /* Изображения на полную ширину колонки */
  .service-image .img-placeholder,
  .service-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }

  /* Улучшенный line-height для заголовка */
  .services h2 {
    line-height: 1.4;
  }

  /* Отступы для текста карточки */
  .service-card h3,
  .service-card p {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 576px) {
  /* Убираем padding полностью на маленьких экранах */
  .service-card {
    padding: 15px 0;
  }

  /* Изображения на полную ширину с уменьшенным border-radius */
  .service-image .img-placeholder,
  .service-image img {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 15px !important;
  }

  /* Кнопка на всю ширину на мобильных */
  .services .btn-primary-custom,
  .services .btn-outline-custom {
    width: 100%;
    max-width: 100%;
  }

  /* Отступы для текста */
  .service-card h3,
  .service-card p {
    padding-left: 8px;
    padding-right: 8px;
  }
}