/* ============================================================
   СЕКЦИЯ «ХТО МИ»
   Высота в макете 1440×979 (мобилка 375×808), фон чистый чёрный.

   Вертикаль набрана потоком, а не абсолютом: в макете элементы
   стоят один под другим и ничего не наезжает друг на друга.
   Но координаты из Figma — это ВЕРХ КАПИТЕЛИ (leadingTrim: CAP_HEIGHT),
   а браузер считает от верха строчного бокса. Разница = половина
   свободного интерлиньяжа плюс надкапительная часть шрифта; для Inter
   это ≈ 0.236 кегля при lh 1.2 и ≈ 0.336 при lh 1.4. Поэтому все
   отступы ниже уже пересчитаны в «браузерные» и отличаются от
   чисел макета — сверять их надо по капители, а не по рамке строки.

   Вся секция набрана Inter: Khartia в макете здесь не встречается
   ни разу, это осознанное отклонение от дизайн-системы.
   ============================================================ */

.about {
  background: var(--bg);
}

.about__inner {
  /* 65.7 = 69 (капитель надзаголовка) − 3.3 надкапительной части */
  padding-top: calc(65.7 * var(--u));
  padding-bottom: calc(51.787 * var(--u));
}

.about__content {
  position: relative;
  z-index: 1;                       /* контент поверх декоративной сетки */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- надзаголовок ------------------------------------------- */

.about__eyebrow {
  align-self: stretch;
}

/* --- лид ----------------------------------------------------- */

.about__lead {
  /* 50.68 = 62 из макета минус надкапительная часть лида (7.82)
     и минус подкапительный хвост надзаголовка (3.5) */
  margin-top: calc(50.68 * var(--u));
  /* В макете бокс 837.4, но браузер набирает Inter чуть шире Figma,
     и «ГВАРДІЇ» срывалось на третью строку. Расширено до ближайшего
     значения, при котором переносы совпадают с макетом; блок центрирован,
     поэтому на видимую ось это не влияет. */
  width: calc(860 * var(--u));
  font-family: var(--font-text);
  font-weight: 400;
  font-size: calc(33.110687 * var(--u));
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  /* базовая заливка узла — белый в половину силы;
     красный и полностью белый куски размечены спанами */
  color: var(--white-50);
}

.about__lead-hi {
  color: var(--white);
}

/* --- три абзаца ---------------------------------------------- */

.about__text {
  margin-top: calc(55.9 * var(--u));
  /* та же поправка на ширину набора: 833 из макета не хватало последнему
     абзацу ровно на слово. 840 — верх «живой» колонки контента (Group 111),
     переносы всех трёх абзацев при нём совпадают с макетом */
  width: calc(840 * var(--u));
  font-size: max(13px, calc(20 * var(--u)));
  line-height: 1.4;
  letter-spacing: .02em;
  text-align: center;
  color: var(--white-50);
}

/* paragraphSpacing из Figma — это добавка к межстрочному, а не к боксу */
.about__text p + p {
  margin-top: calc(14 * var(--u));
}

/* --- стена флагов -------------------------------------------- */

/* Ячейка 41.25 и гэп 12.375 — это базовый модуль 30/9, увеличенный
   в 1.375 раза. На мобилке 48 клеток кладутся в 8 колонок (Frame 116
   макета, 334.13 шириной): клетка 33.08, гэп — те же 30 % клетки. */
.about__flags {
  margin-top: calc(47.72 * var(--u));
  display: grid;
  grid-template-columns: repeat(16, calc(41.25 * var(--u)));
  gap: calc(12.375 * var(--u));
}

.about__flag {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;                 /* ручной флаг шире ячейки — кропаем */
  background: var(--grey-15);       /* подложка компоненты: видна, пока нет картинки */
}

.about__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;                /* scaleMode FILL из макета */
}

/* Клетка 20 — біло-червоно-білий прапор Білорусі. Готового ассета немає,
   тому намальовано стилями: біле поле й червона смуга рівно в середній
   третині. Частки однакові на обох брейкпойнтах, тому відсотки. */
.about__flag--pennant {
  background: transparent;
}

.about__flag--manual {
  --flag-red: #c8102e;   /* червоний прапора, поза основною палітрою */
  background: var(--white);
}
.about__flag--manual::after {
  content: '';
  position: absolute;
  left: 0;
  top: 34%;
  width: 103%;                      /* в макете смуга шире ячейки */
  height: 33%;
  background: var(--flag-red);
}

/* --- кнопка --------------------------------------------------- */

.about__cta {
  margin-top: calc(57.739 * var(--u));
}

/* ============================================================
   МОБИЛКА (макет 375×808)
   Всё прижато к левому полю 20, кроме кнопки — она по центру.
   Сетка флагов перестраивается с 16 колонок на 8; порядок клеток
   тот же самый, перенос делает грид.
   ============================================================ */

@media (max-width: 599px) {

  .about__inner {
    padding-top: calc(54.7 * var(--u));
    padding-bottom: calc(16.83 * var(--u));
  }

  .about__content {
    align-items: flex-start;
    padding-left: calc(20 * var(--u));
  }

  .about__eyebrow {
    align-self: auto;
    text-align: left;
  }

  .about__lead {
    margin-top: calc(38.78 * var(--u));
    width: calc(335 * var(--u));
    font-size: calc(20 * var(--u));
    text-align: left;
  }

  .about__text {
    margin-top: calc(11.69 * var(--u));
    /* 335 = поля 20/20 по правке дизайнера (11.08.2026). В макете здесь
       342 при полях 17/16, но на мобильной поля везде равные. */
    width: calc(335 * var(--u));
    font-size: max(11px, calc(12 * var(--u)));
    text-align: left;
  }

  .about__text p + p {
    margin-top: calc(8 * var(--u));
  }

  .about__flags {
    margin-top: calc(39.63 * var(--u));
    grid-template-columns: repeat(8, calc(33.082558 * var(--u)));
    gap: calc(9.924767 * var(--u));
  }

  /* кнопка в макете центрирована по всей ширине экрана,
     поэтому компенсируем левое поле контента */
  .about__cta {
    margin-top: calc(47.215 * var(--u));
    align-self: center;
    margin-left: calc(-20 * var(--u));
  }
}