/* ==========================================================================
   «Кто мы?» — секция с текстом и рисованными пометками
   Опорный кадр 1920. В макете секция стоит на x 57 и содержит:

     текст        x 100 (57 + 43), ширина 1681, Muller Regular 36 / 1.7
     сердечко     x 97,   ширина 257.81, высота 100.69
     заметка      x 1368, ширина 441.52, высота 233.75  («хочу дружить с вами!»)
     кнопки       ряд по центру, 681 × 97, зазор 89

   Пустая строка между абзацами в макете — обычная строка текста, отсюда
   отбивка ровно в одну строку (1.7em).

   Пометки (обводка, два подчёркивания) не стоят абсолютно в кадре секции:
   они привязаны к самим фразам, чтобы переносы строк на другой ширине
   не отрывали пометку от текста.
   ========================================================================== */

.about-story {
  padding-block: clamp(2.5rem, 4.8958vw, 5.875rem) clamp(3rem, 6.25vw, 7.5rem);
  padding-inline: var(--container-pad);
}

/* Фокус на секцию ставит браузер при возврате по #story — рамка тут лишняя */
.about-story:focus {
  outline: none;
}

.about-story__inner {
  max-width: 105.0625rem; /* 1681px */
  margin-inline: auto;
}

/* --- Текст ---------------------------------------------------------------- */

.about-story__text {
  font-size: clamp(1rem, 1.875vw, 2.25rem);
  line-height: 1.7;
}

.about-story__text p + p {
  margin-top: 1.7em;
}

/* --- Рисованные пометки ----------------------------------------------------
   Каждая пометка — SVG из макета, положенный поверх фразы псевдоэлементом:
   в поток она не попадает и строки переносятся так же, как без неё.

   Все три контура в макете отражены по вертикали — отсюда scaleY(-1).
   Размеры и сдвиги переведены в em от кегля 36px, на котором их рисовали:
   пометка тянется вместе с текстом на любой ширине экрана.
   -------------------------------------------------------------------------- */

.scribble {
  position: relative;
}

.scribble::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* Обводка вокруг «White Board Studio»: 407 × 77.16, выступает на 43 слева */
.scribble--circle::after {
  left: -1.194em;
  width: calc(100% + 2.417em);
  height: 2.143em;
  background-image: url("../../assets/images/about-circle.svg");
  transform: translateY(calc(-50% + 0.222em)) scaleY(-1);
}

/* Подчёркивание «Наш основной принцип»: 458 × 8.47, под нижними выносными */
.scribble--underline::after {
  left: -1.361em;
  width: calc(100% + 2.167em);
  height: 0.235em;
  background-image: url("../../assets/images/about-underline-lead.svg");
  transform: translateY(calc(-50% + 0.673em)) scaleY(-1);
}

/* Волна под «Наша цель»: 243.5 × 24 */
.scribble--wave::after {
  left: -0.722em;
  width: calc(100% + 2.042em);
  height: 0.667em;
  background-image: url("../../assets/images/about-underline-goal.svg");
  transform: translateY(calc(-50% + 0.861em)) scaleY(-1);
}

/* --- Рисунки под текстом ---------------------------------------------------
   Сердечко прижато к левому краю текста, заметка — к правому. По вертикали
   заметка начинается на 24 выше сердечка, отсюда её отрицательная поправка.
   -------------------------------------------------------------------------- */

.about-story__doodles {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 3rem);
  margin-top: clamp(0.5rem, 0.7813vw, 0.9375rem);
}

.about-story__heart {
  width: clamp(6rem, 13.4276vw, 16.1131rem); /* 257.81px */
  height: auto;
  margin-top: clamp(0.5rem, 1.2448vw, 1.4938rem); /* 23.9px */
}

/* В файле заметки обводка выходит за габариты узла — отсюда 444.5, а не 441.5 */
.about-story__note {
  width: clamp(9rem, 23.1518vw, 27.7822rem); /* 444.52px */
  height: auto;
}

/* --- Кнопки --------------------------------------------------------------- */

.about-story__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 4.6354vw, 5.5625rem); /* 89px */
  margin-top: clamp(2rem, 3.9583vw, 4.75rem); /* 76px */
}

.about-story__actions .btn {
  flex: 1 1 20rem;
  max-width: 42.5625rem; /* 681px */
}

/* --- Мобильные -------------------------------------------------------------
   Ниже 900px в ряд рисунки уже не встают: между ними остаётся считанные
   десятки пикселей, и заметка становится нечитаемой. Поэтому колонка —
   сердечко у левого края, заметка у правого, как и в макете, но друг под
   другом.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .about-story__doodles {
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .about-story__heart {
    width: min(45vw, 10rem);
    margin-top: 0;
  }

  .about-story__note {
    align-self: flex-end;
    width: min(62vw, 15rem);
  }
}