/* ============================================================
   ПРО КОМАНДИРА
   Надзаголовок по центру страницы, под ним ряд «фото + текст».
   Вся секция набрана Inter Regular — Khartia здесь не встречается.

   Про вертикальные числа ниже: в макете у текстов leadingTrim
   CAP_HEIGHT, то есть их рамка начинается на верху ПРОПИСНЫХ.
   В браузере рамка строки выше «чернил» на половину интерлиньяжа
   плюс надстрочный просвет шрифта, поэтому макетные отступы
   уменьшены на эту поправку — иначе всё уехало бы вниз.
   ============================================================ */

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

.commander .band__inner {
  padding-bottom: calc(81 * var(--u));
}

/* контент рисуется поверх декоративной сетки (.grid-mod лежит на z-index 0) */
.commander__eyebrow,
.commander__row {
  position: relative;
  z-index: 1;
}

/* 73 в макете до верха прописных, поправка на строку — 3.32 */
.commander__eyebrow {
  margin: 0;
  padding-top: calc(69.68 * var(--u));
}

/* Композиция в макете асимметрична: левое поле 120, правое 92.
   Оставлено как нарисовано — колонка текста шире «сеточной». */
.commander__row {
  display: flex;
  align-items: flex-start;
  gap: calc(40 * var(--u));
  margin-top: calc(58.52 * var(--u));
  padding-left: calc(120 * var(--u));
}

/* «Красная плашка» над фото — не отдельный прямоугольник, а верхняя
   грань той же рамки: 14 px сверху против волосяной линии по трём
   остальным сторонам. Поэтому бордер один, с утолщённым верхом. */
.commander__photo {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: calc(373 * var(--u));
  margin: 0;
  border: 1px solid var(--accent);
  border-top-width: calc(14 * var(--u));
}

.commander__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 371 / 516;
  object-fit: cover;
  object-position: center;
}

.commander__col {
  flex: 0 0 auto;
  width: calc(815 * var(--u));
}

.commander__lead {
  margin: calc(3.13 * var(--u)) 0 0;
  /* В макете колонка 759, но её самая длинная строка занимает 755 —
     запас 4 px. Прописные у нас рендерятся на ~1.25 % шире, чем в Figma,
     и последнее слово срывалось на новую строку. Даём 775, чтобы
     разбивка на 5 строк совпала с макетом; правый край всё равно
     остаётся левее колонки основного текста. */
  max-width: calc(775 * var(--u));
  font-family: var(--font-text);
  font-weight: 400;
  font-size: max(15px, calc(29 * var(--u)));
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--white-50);
}

/* Полутона держим прозрачностью, а не серым из палитры:
   #FFF @50% на чёрном даёт #808080, такого токена в системе нет. */
.commander__name { color: var(--accent); }
.commander__rank { color: var(--white); }

.commander__text {
  margin-top: calc(17.13 * var(--u));
  font-family: var(--font-text);
  font-weight: 400;
  font-size: max(13px, calc(20 * var(--u)));
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--white-50);
}

.commander__text p { margin: 0; }
.commander__text p + p { margin-top: calc(14 * var(--u)); }

/* ============================================================
   Мобилка 375
   Сетки-прицела здесь нет (скрыта в общем слое), ряд разворачивается
   в колонку, надзаголовок прижат влево.
   ============================================================ */

@media (max-width: 599px) {
  /* Поля 20/20 по правке дизайнера (11.08.2026): в макете справа
     стоит 13, но это небрежность — на мобильной поля везде равные. */
  .commander .band__inner {
    padding: 0 calc(20 * var(--u)) calc(16 * var(--u));
  }

  .commander__eyebrow {
    padding-top: calc(54.68 * var(--u));
    text-align: left;
  }

  .commander__row {
    display: block;
    margin-top: calc(43.52 * var(--u));
    padding-left: 0;
  }

  .commander__photo {
    width: 100%;
    border-top-width: calc(12.84 * var(--u));
  }

  /* Кроп на мобилке в макете задан вручную и смещён вверх —
     видно больше макушки, чем дал бы center center. */
  .commander__photo img {
    aspect-ratio: 340 / 335;
    object-position: center 14.74%;
  }

  .commander__col { width: auto; }

  .commander__lead {
    margin-top: calc(15.26 * var(--u));
    max-width: none;
    font-size: max(14px, calc(20 * var(--u)));
  }

  .commander__text {
    margin-top: calc(11.7 * var(--u));
    font-size: max(11px, calc(12 * var(--u)));
  }

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