/* ==========================================================================
   2 блок — «Кто мы такие?» — секция #about
   Три колонки: тезисы слева и справа, аутлайн-заголовок по центру,
   между колонками вертикальные линии-разделители.

   Все размеры — rem от макета 1920 (см. base.css: корневой кегль тянется
   по ширине окна). В px здесь ничего быть не должно: px-блок посреди
   rem-текста не сжимается вместе со страницей и на любой ширине, кроме
   1920, разъезжается с сеткой — ровно эта бага тут и была.
   ========================================================================== */

/* Два числа переехали в переменные: каждое читается в двух местах — само
   расстояние и дорожка залипания заголовка (.about__pin ниже), которая
   обязана кончаться ровно на строке «Дальше — больше». Разъедутся — и
   заголовок начнёт гаснуть не там. */
#about {
  --about-mid-top: 7.875rem;  /* 126px — отступ средней колонки сверху */
  --about-gap: 19.5rem;       /* 312px — от сетки тезисов до «Дальше — больше» */
}

/* Строки-подписи над блоком и под ним. 1416px @1920 */
.about__row { max-width: 88.5rem; }

.about__caption { margin-bottom: 2.1875rem; }     /* 35px */
.about__more    { margin-top: var(--about-gap); }

/* В средней колонке этой строки живёт линия-перемычка до 3 блока — ей нужен
   контейнер позиционирования (у колонок сетки тезисов он от .has-lines-3). */
.about__more > * { position: relative; }

/* Сетка тезисов. 1408px @1920 */
.about__grid { max-width: 88rem; }

/* Колонки стартуют «лесенкой»: левая ниже центра, правая ещё ниже */
.about__col--left  { padding-top: 26rem; }      /* 416px */
.about__col--mid   { padding-top: var(--about-mid-top); }
.about__col--right { padding-top: 35.5625rem; } /* 569px */

/* Отступ между тезисами задаём соседством, а не margin-bottom с обнулением
   у последнего: последний ребёнок колонки — .about__line, :last-child на
   тезис не наведёшь. */
.about__item + .about__item { margin-top: 18.6875rem; } /* 299px */

/* Дорожка, внутри которой заголовок висит на месте, пока мимо едут тезисы.
   Держим через sticky, а не смещением на скролле: JS-transform приезжает
   кадром позже, чем компоновщик уже прокрутил страницу, и картинка мелко
   дрожит. Sticky считает тот же компоновщик — дрожать нечему.
   Прозрачность гасит main.js: её запаздывание на кадр глазу не видно.

   Дорожка обязана дотянуться до «Дальше — больше»: sticky отпускает на
   нижней границе своего контейнера, а колонка кончается на --about-gap
   раньше — заголовок гас, не доходя до этой строки. Отсюда bottom с
   отрицательным отступом.

   Вынута из потока, потому что в потоке её высота стала бы высотой всей
   строки-сетки и утащила бы вниз и «Дальше — больше», и линии-разделители:
   те считаются от границ колонок. Absolute же не добавляет колонке ничего,
   а top повторяет её padding-top, чтобы картинка осталась на месте. */
.about__pin {
  position: absolute;
  top: var(--about-mid-top);
  left: 0;
  right: 0;
  bottom: calc(var(--about-gap) * -1);
  align-items: flex-start;  /* иначе flex растянул бы картинку на всю дорожку */
}

.about__pic {
  position: sticky;
  top: 11.875rem;         /* 190px @1920 — высота, на которой заголовок замирает */
  max-width: 28.0625rem;  /* 449px */
  max-height: 31.125rem;  /* 498px */
}

/* Ниже 992px кегль перестаёт тянуться по ширине окна (base.css), и та же
   величина в rem означает уже другую долю экрана: удержание растянулось бы
   на несколько экранов подряд. main.js смотрит на position картинки и
   вместе со статикой отключает выцветание. */
@media (max-width: 991.98px) {
  .about__pin { position: static; bottom: auto; }
  .about__pic { position: static; }
}

/* --- Мобильный макет (954:1682, y 1173…2603) ------------------------------
   Трёх колонок нет: всё выстроено в одну колонку по центру страницы (x=249),
   сквозь неё идёт вертикальная линия с разрывом на строке «Дальше — больше».
   Порядок тезисов при этом ЧЕРЕДУЕТСЯ между десктопными колонками:
   левый 1 → правый 1 → левый 2 → правый 2 → левый 3 → правый 3 → левый 4.

   Отсюда display: contents на колонках — он убирает их из дерева боксов, и
   тезисы становятся прямыми элементами flex-строки .about__grid. Только тогда
   к ним применим order: свойство работает лишь между соседями по флексу.
   Цена приёма — порядок задан через nth-child, то есть завязан на порядок
   элементов в разметке; правя её, править и здесь.

   Вертикаль по макету, координаты от начала секции (y=1173):
       0…15      «кратко про нас»
       42…1059   линия
       133…349   заголовок, 2 строки 150/108
       408…963   семь тезисов, шаг между блоками 55
       1088…1103 «Дальше — больше»
       1130…1429 вторая линия
------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  #about { padding-bottom: 20.4375rem; }   /* 327px до начала 3 блока */

  .about__row,
  .about__grid { max-width: none; }

  .about__caption { margin-bottom: 7.375rem; }  /* 118px до заголовка */

  .about__col--left,
  .about__col--mid,
  .about__col--right { display: contents; }

  /* Тезисы и заголовок — каждый на всю строку. Ширину задаём им самим:
     колонки с display: contents боксов не имеют, и их правила не работают. */
  .about__item,
  .about__head {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 3.4375rem;   /* 55px — единый шаг между тезисами */
  }

  /* Десктопный шаг между тезисами внутри одной колонки (299px) здесь не нужен:
     соседство по колонке на мобилке ничего не значит. */
  .about__item + .about__item { margin-top: 3.4375rem; }

  .about__head {
    margin-top: 0;
    margin-bottom: 0.25rem;  /* 55 + 4 = 59px от низа заголовка до тезисов */
  }

  /* Заголовок-картинка и десктопные линии-разделители не участвуют */
  .about__pin,
  .about__line { display: none; }

  .about__more { margin-top: 7.8125rem; }  /* 125px от последнего тезиса */

  /* Вертикаль по центру страницы, двумя отрезками с разрывом на строке
     «Дальше — больше». Отсчёт от верха секции — как в макете. */
  #about::before,
  #about::after {
    content: "";
    position: absolute;
    left: 50%;
    /* Линия 1.5px должна стоять ПО ЦЕНТРУ x=249, а не начинаться с него:
       в макете она размазана на пиксели 248 и 249 по 0.75 покрытия (оттого
       и тон 199-200 вместо сплошного 192). Без сдвига уезжает вправо. */
    transform: translateX(-50%);
    /* Толщина и цвет — как у всех линий страницы (см. «Линии страницы»
       в layout.css). Классом .rule-v не обойтись: это псевдоэлементы. */
    width: var(--line-w);
    background: var(--c-line);
    pointer-events: none;
  }

  #about::before { top: 2.625rem;  height: 64.625rem; }  /* 42 → 1060 */

  /* Нижний отрезок кончается НЕ заданной высотой, а низом секции. Высотой
     (18.75rem) он кончался там, где секция должна была кончиться по макету, —
     а стоит тексту тезисов перенестись иначе, чем в замерах, и секция
     оказывается короче: линия вылезает за неё и наезжает на сетку 3 блока.
     bottom: 0 привязывает конец к настоящему краю секции. */
  #about::after  { top: 72.625rem; bottom: 0; }          /* 1130 → низ секции */
}

/* Вертикальная линия по центру колонки. Начало и конец у каждой свои —
   задаются через --line-top / --line-bottom прямо в разметке.
   Цвет --c-line, как у линий сетки: в макете эти вертикали и сетка 3 блока
   имеют один тон (199 при фоне 224), а перемычка вообще переходит в линию
   сетки. Инлайновая rgba(16,16,16,0.15) из старой вёрстки давала 192 —
   на стыке была видна ступенька по тону.

   Отдельный случай — перемычка под «Дальше — больше»: она уходит за пределы
   секции и стыкуется с центральной линией сетки 3 блока. Её --line-bottom
   складывается из нижнего поля секции (--sp-section, 12.5rem) и верхнего
   margin'а .benefits (20.5rem) = -33rem. По горизонтали стыковать нечего:
   и та и другая линия стоят по центру страницы. */
.about__line {
  position: absolute;
  z-index: -1;
  left: 50%;
  /*transform: translateX(-50%);*/
  width: var(--line-w);
  top: var(--line-top, 0);
  bottom: var(--line-bottom, 0);
  /*background: var(--c-line);*/
  /*border: 1.5px solid rgba(16, 16, 16, 0.15);*/
  background-image: linear-gradient(to right, var(--c-line) 0 var(--line-w), transparent var(--line-w));
}

/* Линии средней колонки продолжаются центральной линией сетки 3 блока, а та
   рисуется от границы колонки ВПРАВО (градиент в .has-lines начинает полосу
   на самой границе). Поэтому здесь тоже ставим левым краем на 50%, без
   центрирующего transform: иначе линия уезжает на пол-ширины и на стыке
   видно ступеньку в полпикселя. */
.about__line--grid { transform: none; }

/* Порядок тезисов на мобилке. Вынесен отдельным блоком, потому что читается
   как таблица: слева — чей это элемент в разметке, справа — какое он место
   занимает в мобильной колонке. */
@media (max-width: 991.98px) {
  .about__col--mid   > :nth-child(3) { order: 1; }  /* заголовок */
  .about__col--left  > :nth-child(1) { order: 2; }  /* единственная компания */
  .about__col--right > :nth-child(1) { order: 3; }  /* итальянское оборудование */
  .about__col--left  > :nth-child(2) { order: 4; }  /* лучшая цена */
  .about__col--right > :nth-child(2) { order: 5; }  /* собственная экспертиза */
  .about__col--left  > :nth-child(3) { order: 6; }  /* вы выбираете вкус */
  .about__col--right > :nth-child(4) { order: 7; }  /* готовы погрузиться (моб. вариант) */
  .about__col--left  > :nth-child(4) { order: 8; }  /* этичность */
}