/* Обратите внимание. Figma: Screen 5/pc 611:3950 (1920×647, top 4289),
   Screen 5/mb 611:4575 (390×1079, top 5394).
   Секция идёт сразу за «Экспертными видео» (pc 3692+597=4289, mb 4833+561=5394) — зазора нет. */

/* Слайд стоит на top 72 внутри секции. Отступ задан padding-ом секции, а не margin-ом слайда:
   margin первого потокового ребёнка схлопывается наружу и уносит вниз всю секцию.
   min-height: 647px вместо жесткой высоты: контент растягивает секцию. */
.attention {
  min-height: 647px;
  padding-top: 72px;
}

/* Блоб Ellipse 14 (611:3951): 1880×578, центр (960, 321) внутри секции.
   SVG 2680×1378 (поле 400 под blur 200), центр (1340, 689). */
.attention__blob {
  left: 50%;
  top: -368px;                   /* 321 − 689 */
  width: 2680px;
  height: 1378px;
  margin-left: -1340px;
}

/* Блоб Ellipse 13 корневого фрейма (611:3789): 1374×236, left 245, top 4804 на странице →
   центр (932, 4922), внутри секции (4289..4936) центр по Y = 633. SVG 2174×1036, центр (1087, 518).
   Свечение выходит за низ секции и уходит под подвал (в Figma блоб лежит ниже фреймов секций). */
.attention__glow {
  left: 50%;
  top: 115px;                    /* 633 − 518 */
  width: 2174px;
  height: 1036px;
  margin-left: -1115px;          /* (932 − 960) − 1087 */
}

/* Слайд 611:3952: 1398×503, top 72, radius 32, фон #FFFFFF.
   min-height: 503px вместо жесткой высоты: дополнительные пункты растягивают слайд. */
.attention__slide {
  position: relative;
  min-height: 503px;
  border-radius: var(--r-card);
  background: var(--white);
  overflow: hidden;
}

/* Текстовая колонка в потоке: 1398 − 597 (фото) = 801px.
   Отступы: top 72, bottom 72, left 96 из Figma. */
.attention__text {
  padding: 72px 0 72px 96px;
  width: 801px;
}
.attention__title {
  width: fit-content;
  margin: 0 0 36px 0;           /* зазор до списка: 151 − 72 − 43 = 36 */
  font-weight: 700;
  font-size: 36px;
  line-height: 43px;            /* точная высота 43px для совпадения с baseline */
  color: var(--black);
  white-space: nowrap;
}

.attention__title br {
  display: none;                 /* перенос строки — только в mb (611:4580) */
}

/* Нумерация рисуется через ::before счётчиком list-item, штатный маркер выключен:
   в Figma номера — отдельные текстовые узлы с точными координатами.
   Список в flex-потоке: шаг по Y 104 − высота пункта 72 = gap 32. */
.attention__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0;                     /* сбрасываем дефолтные margin/padding <ol> */
  padding: 0;
  list-style: none;
}

/* Номера 611:3958–611:3960 — left 96, тексты 611:3954–611:3956 — left 118/121/121.
   Разница 22/25 воспроизведена padding-left, ширина = отступ + ширина текста.
   Пункты в flex-потоке, relative нужен для абсолютного ::before с номером. */
.attention__item {
  position: relative;
  width: 378px;                  /* дефолтная ширина для новых пунктов */
  padding-left: 25px;
  font-size: 14px;
  line-height: 24px;
  color: var(--black);
}

.attention__item::before {
  position: absolute;
  left: 0;
  top: 0;
  content: counter(list-item) ".";
}

.attention__item--1 {
  width: 375px;                  /* 22 + 353 */
  padding-left: 22px;
}

.attention__item--2 {
  width: 378px;                  /* 25 + 353 */
}

.attention__item--3 {
  width: 342px;                  /* 25 + 317 */
}

/* Фото 611:3957: 597×503, left 801, top 0, radius 32, заливка FILL → object-fit: cover.
   Слой-картинка остаётся абсолютным: приколот к правому краю слайда. */
.attention__photo {
  position: absolute;
  left: 801px;
  top: 0;
  width: 597px;
  height: 503px;
  border-radius: var(--r-card);
  object-fit: cover;
}

@media (max-width: 1199px) {
  /* mb: слайд 611:4577 стоит на top 0 внутри Screen 5/mb */
  .attention {
    min-height: 1079px;
    height: auto;
    padding-top: 0;
  }

  /* Блоб Ellipse 11 (611:4576): 390×832, повёрнут на 90° → визуально 832×390,
     центр (195, 372) внутри секции. SVG 1632×1190, центр (816, 595) — экспорт уже
     в повёрнутой ориентации, поворот в CSS не нужен. Тот же ассет, что в «Технологии». */
  .attention__blob {
    top: -223px;                 /* 372 − 595 */
    width: 1632px;
    height: 1190px;
    margin-left: -816px;
  }

  /* В mb-макете такого свечения нет */
  .attention__glow {
    display: none;
  }

  /* Слайд 611:4577: 362×1029, top 0 */
  .attention__slide {
    min-height: 1029px;
    height: auto;
  }

  /* Текст-блок 611:4578: left 26, top 54, width 307 в потоке */
  .attention__text {
    margin: 54px 0 0 26px;
    padding: 0;
    width: 307px;
  }

  /* Заголовок 611:4579/4580: фрейм с padding 10, текст 287×66 (две строки по 33) */
  .attention__title {
    width: 100%;
    margin: 0;
    padding: 10px;
    font-size: 28px;
    line-height: normal;
    white-space: normal;
  }

  .attention__title br {
    display: inline;
  }
  /* В mb зазоров между пунктами списка нет, отступы внутри padding-а */
  .attention__list {
    gap: 0;
  }

  /* Пункты 611:4581/4583/4585: фреймы 307×116 с padding 10,
     маркер списка с отступом 21 → текст 266 шириной, четыре строки по 24 */
  .attention__item,
  .attention__item--1,
  .attention__item--2,
  .attention__item--3 {
    position: relative;          /* ::before с номером считает координаты от пункта */
    width: 307px;
    min-height: 116px;
    height: auto;
    padding: 10px 10px 10px 31px;
  }

  .attention__item::before {
    left: 10px;
    top: 10px;
  }

  /* Фото 611:4587: 361×503, left 0.5, top 526 */
  .attention__photo {
    left: 0.5px;
    top: 526px;
    width: 361px;
    height: 503px;
  }
}