/*
  Тёмная карточка-чеклист (159:5368). Свечение верхнего левого угла —
  CSS radial-gradient + blur, не запечённый ассет (в Figma это отдельный
  blur-слой Ellipse 9, центр которого лежит почти на самом углу карточки —
  проще и надёжнее воспроизвести мягким свечением на CSS, чем растровым/
  SVG-ассетом с fixed-размерами, которые придётся точно позиционировать
  под резиновую рамку карточки).
*/
.service-checklist {
  padding: 0 30px;
}

.service-checklist__card {
  position: relative;
  max-width: var(--wide-content-width);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 50px;
  background: var(--color-checklist-bg);
}

.service-checklist__glow {
  position: absolute;
  top: -226px;
  left: -226px;
  width: 452px;
  height: 452px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(171, 188, 216, 0.35) 0%, rgba(171, 188, 216, 0) 70%);
  pointer-events: none;
}

.service-checklist__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 742px;
  overflow: hidden;
}

.service-checklist__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

.service-checklist__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(31, 34, 39, 0) 64%, var(--color-checklist-bg) 99.94%);
}

.service-checklist__content {
  position: relative;
  z-index: 1;
  max-width: 950px;
  padding: 60px 40px 60px 75px;
}

.service-checklist__heading {
  margin: 0 0 25px;
  max-width: 810px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-checklist-heading);
}

.service-checklist__list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-checklist__item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-body);
  line-height: var(--lh-trust-title);
  color: var(--color-checklist-item);
}

.service-checklist__item svg {
  flex-shrink: 0;
}

/*
  Мобильная адаптация (600px,
  база 390px). Структурная перестройка: на десктопе фото — справа во всю
  высоту карточки; на мобильном — снизу во всю ширину, под списком
  чек-пунктов. Декоративное свечение в мобильном макете отсутствует —
  не переносим (display:none). border-radius карточки 30 (не 50) — но
  .service-checklist__media отдельного радиуса не требует: card уже
  overflow:hidden + border-radius, этого достаточно, чтобы фото,
  прижатое ко всем четырём краям снизу, автоматически скруглилось по
  нижним углам карточки.
*/
@media (max-width: 599.98px) {
  .service-checklist {
    padding: 0 min(10px, calc(10 / 390 * 100vw));
  }

  .service-checklist__card {
    min-height: min(931px, calc(931 / 390 * 100vw));
    max-width: min(370px, calc(370 / 390 * 100vw));
    border-radius: min(30px, calc(30 / 390 * 100vw));
  }

  .service-checklist__glow {
    display: none;
  }

  .service-checklist__media {
    display: block;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: min(380px, calc(380 / 390 * 100vw));
  }

  .service-checklist__media img {
    object-position: 100% 50%;
  }

  .service-checklist__media::after {
    background: linear-gradient(
      180deg,
      var(--color-checklist-bg) 0%,
      rgba(31, 34, 39, 0.9) 20%,
      rgba(31, 34, 39, 0) 54.7%
    );
  }

  .service-checklist__content {
    max-width: none;
    padding: min(50px, calc(50 / 390 * 100vw)) min(40px, calc(40 / 390 * 100vw)) 0;
  }

  .service-checklist__heading {
    max-width: none;
    margin-bottom: min(25px, calc(25 / 390 * 100vw));
    /* 31px, не 32: контент-бокс здесь 290px (370 − 40 − 40), а фильтр typo
       склеивает предлог неразрывным пробелом — токен «В НАСТРОЕННОМ» при
       32px занимает 290.2px, ровно 100.1% бокса, отсюда прилипший к рамке
       правый край. При 31px — 281.2px (97% бокса).
       line-height 46px не трогать — под него посчитана высота карточки. */
    font-size: min(31px, calc(31 / 390 * 100vw));
    line-height: min(46px, calc(46 / 390 * 100vw));
  }

  .service-checklist__list {
    gap: min(20px, calc(20 / 390 * 100vw));
  }

  .service-checklist__item {
    font-size: min(13px, calc(13 / 390 * 100vw));
    line-height: min(20px, calc(20 / 390 * 100vw));
  }
}