/* ==========================================================================
   «Цифровой кластер в контуре нефтехимической группы»
   Текст слева, коллаж справа с выходом за правый край полотна.
   ========================================================================== */

.about {
  padding-block: 4.5rem;
  background: var(--c-lime);
  color: var(--c-spruce);
  overflow: hidden;
}

/* Высота = ровно высота коллажа: тогда поля секции сверху и снизу от снимка
   одинаковые (72px), без лишних пикселей.
   aspect-ratio считает высоту от собственной ширины блока, то есть от той же
   базы, от которой коллаж берёт свои 48%: 48 / (1744/1267) = 34.87% ширины,
   отсюда 1 / 0.3487 = 2.8676. Через vw не получится — vw включает полосу
   прокрутки, и снизу набегала бы лишняя щель.
   min-height — запас для браузеров без aspect-ratio. */
.about__inner {
  position: relative;
  display: flex;
  align-items: center;
  aspect-ratio: 2.8676;
  min-height: 34vw;
}

/* --- Коллаж справа. В макете уходит за правый край полотна. --- */

/* Доля, а не фиксированные пиксели: при 872px коллаж на узких экранах съезжал
   влево относительно текста, и заголовок попадал на непрозрачную часть снимка.
   В макете коллаж занимал 57.37% ширины — сузили до 48%: вместе с цифрой из
   левой колонки ушла половина её содержимого, прежний размер перевешивал,
   а заголовку не хватало места на строку «Цифровой кластер в контуре».

   Файл — about-collage-wide.png: тот же снимок в пропорции 1.376 вместо 1.101.
   Маска-лесенка пересобрана по пропорциям макета (полосы 24.2% / 46.8% / 29%
   высоты, сдвиг кромки 11.4% и 27.9% ширины, радиус скруглений 24px при
   ширине 1744) — кадрировать блок через `overflow` нельзя, это срезало
   скругления и ломало логику ступеней. Оригинал лежит рядом: about-collage.png. */
.about__figure {
  position: absolute;
  top: 0;
  left: 52%;
  width: 48%;
  max-width: none;
  pointer-events: none;
}

.about__figure img { width: 100%; height: auto; }

/* --- Заголовок и описание --- */

.about__text {
  position: relative;
  width: 100%;
}

/* Мера ограничена левым краем коллажа (52% окна) минус поле и зазор.
   Кегль ниже макетных 44px намеренно: ONY Track очень широкий, строка
   «Цифровой кластер в контуре» занимает в нём 748px при 44px — в колонку
   рядом с коллажем она не входит, и заголовок разваливался на четыре рваные
   строки («контуре» и «группы» повисали по одному слову). На 38px строка
   укладывается в меру с запасом, заголовок читается в две строки.
   Кегль привязан к ширине окна тем же коэффициентом, что и мера, — иначе
   на 1280px разбиение снова ломалось. */
.about__title {
  max-width: 48%;
  font-size: clamp(1.75rem, 2.5vw, 2.375rem);
}

.about__desc {
  max-width: 32rem;
  margin-top: 2.25rem;
}

/* --- Технологический стек: необязательная строка плашек под описанием --- */

.about__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 32rem;
  margin-top: 1.75rem;
}

.about__stack-item {
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--t-spruce-30);
  border-radius: var(--r-btn);
  font-size: 0.875rem;
  line-height: 1.125rem;
  color: var(--c-spruce);
  white-space: nowrap;
}

@media (max-width: 1180px) {
  /* Коллаж уходит из абсолютного позиционирования в поток и встаёт под текст. */
  .about__inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    aspect-ratio: auto;
  }

  .about__text { order: 1; }
  .about__title { max-width: none; }

  .about__figure {
    position: static;
    order: 2;
    width: 100%;
    margin: 3rem 0 0;
  }

  /* На телефоне подставляется прямоугольный кадр без маски-лесенки
     (см. <picture> в разметке): текст идёт над снимком, и ступени,
     рассчитанные на боковое соседство с текстом, читались как брак.
     Скругление возвращаем рамкой — в маске оно было нарисовано. */
  .about__figure img { border-radius: var(--r-photo); }
}

/* Альбомный планшет и узкое окно ноутбука (1025–1180px): возвращаем макетную
   схему «текст слева, коллаж справа». В стопке коллаж вставал на всю ширину
   и секция выходила выше экрана. Блок отменяет врезку на 1180px только
   в своём диапазоне. Сама врезка раньше стояла на 1200px — порог выровнен
   с остальными блоками, иначе на 1181–1200px секция одна вставала стопкой. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .about__inner {
    flex-direction: row;
    aspect-ratio: 2.8676;
    min-height: 34vw;
  }

  /* Без нижней границы в 28px: на 1025px строка «Цифровой кластер в контуре»
     при 28px шире колонки. */
  .about__title { max-width: 48%; font-size: 2.5vw; }
  .about__desc { max-width: 46%; margin-top: 1.75rem; }
  .about__stack { max-width: 46%; margin-top: 1.25rem; }

  .about__figure {
    position: absolute;
    width: 48%;
    margin: 0;
  }

  .about__figure img { border-radius: 0; }
}

@media (max-width: 560px) {
  .about { padding-top: 4rem; }
  .about__desc { margin-top: 1.5rem; }
}