/* ==========================================================================
   О компании — макет 1:1785 (1920×3633).

   Вертикальный ритм макета (Y от верха фрейма):
     222  крошки            1:1877
     273  H1                1:1802   (по центру, колонка 1240)
     355  абзац             1:1803   (по центру, колонка 844, серый)
     489  фото склада       1:1804   1840×600, радиус 32
    1121  плитки статистики 1:1805   4×445×202, шаг 20

   ВНИМАНИЕ по абзацу 1:1803: его текстовый блок в макете 844×272, то есть
   восемь строк (355…627), а фото 1:1804 положено поверх него на 489 —
   в Figma видно только четыре строки, остальные закрыты картинкой. Это
   наложение слоёв в макете, а не короткий текст: вёрстка показывает абзац
   целиком и отбивает фото на 32, поэтому вся страница ниже уходит примерно
   на 160 вниз относительно координат макета. Внутренние расстояния секций
   при этом совпадают.
    1513  «Наши преимущества» 1:1847
    1619  карточки          1:1848   4×445×420, шаг 20
    2229  «История компании» 1:1822  карточка 1840×456, отступ 64
    2875  футер

   Промежутки между секциями — 190 (var(--section-gap)), внутри вступления —
   32 между абзацем, фото и плитками.
   ========================================================================== */

.about-head,
.about-intro,
.about-adv,
.about-history {
  /* Два значения из макета, которых нет в variables.css. Объявлены локально,
     чтобы не хардкодить hex в правилах; просьба перенести их в токены темы
     описана в отчёте по странице.
       #C4C4C4               — линейка в плитке статистики (нода 1:1808)
       rgba(10, 10, 10, .15) — затемнение поверх фото склада (нода 1:1804) */
  --about-rule: #C4C4C4;
  --about-photo-dim: rgba(10, 10, 10, .15);
}

/* --- Шапка страницы -------------------------------------------------------
   Нода 1:1801: заголовок и абзац центрированы, а крошки (1:1877) остались
   слева на x=40 — поэтому общий модификатор page-head--center не подходит,
   центрируем точечно. */

.about-head .page-head {
  /* Низ 32: в макете от абзаца до фото столько же, сколько от фото до плиток. */
  padding-bottom: var(--space-32);
}

.about-head .page-title { text-align: center; }

.about-head .page-lead {
  /* 844 — ширина текстового блока 1:1803, серый text_grey. */
  max-width: 844px;
  margin-inline: auto;
  text-align: center;
  color: var(--color-text-muted);

  /* Отбивка от заголовка здесь 24, а не общие 16: во фрейме 1:1801 заголовок
     1:1802 кончается на 58, а абзац 1:1803 начинается на 82. На «Партнёрам»
     (1:2498) и «Доставке» (1:2668) в макете действительно 16 — поэтому
     базовое значение в page-common.css не трогаем, правим только здесь. */
  margin-top: var(--space-24);
}

/* --- Вступление: фото + статистика ---------------------------------------- */

.about-intro {
  /* Половина промежутка 190 до следующей секции: вторую половину даёт
     верхний padding у .section. */
  padding-bottom: calc(var(--section-gap) / 2);
}

/* Фото склада, нода 1:1804. Кадр 1840×600, картинка кроется по центру,
   поверх — заливка 15 % чёрного из макета. Тени в макете нет. */
.about-photo {
  position: relative;
  height: 600px;
  margin-bottom: var(--space-32);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--about-photo-dim);
}

/* Плитки статистики, нода 1:1805.
   Карточка 445×202: отступ 32, радиус 24, зазор 12 между строками. */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.about-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.about-stat__value {
  font-size: var(--fs-48);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-48);
  color: var(--color-brand);
  white-space: nowrap;
}

/* Линейка нарисована слоем нулевой высоты (нода 1:1808): её 1 px не
   участвует в раскладке, иначе карточка вырастает до 203 вместо 202. */
.about-stat__line {
  height: 1px;
  margin-bottom: -1px;
  background: var(--about-rule);
}

.about-stat__label {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text);
}

/* --- Наши преимущества, нода 1:1846 --------------------------------------- */

.about-adv__title {
  margin-bottom: var(--space-48);
  text-align: center;
}

.about-adv__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* Карточка 445×420: иконка сверху, текст прижат к низу (в макете блок
   текста заканчивается на 388 = 420 − 32 при любом числе строк). */
.about-adv__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-32);
  min-height: 420px;
  padding: var(--space-32);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
}

/* Круг 82 белым по серому фону карточки, иконка 48 — синяя через currentColor. */
.about-adv__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 82px;
  height: 82px;
  padding: 17px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-brand);
}

.about-adv__icon svg { width: 48px; height: 48px; }

.about-adv__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.about-adv__card-title {
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-32);
}

/* Тот же приём, что и в плитке: линия нулевой высоты (нода 1:1854),
   но здесь она серая #757575, а не #C4C4C4. */
.about-adv__line {
  height: 1px;
  margin-bottom: -1px;
  background: var(--color-text-muted);
}

.about-adv__desc {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text-muted);
}

/* --- История компании, нода 1:1822 ---------------------------------------- */

.about-history {
  /* До футера в макете 190 (2685 → 2875), а не 95: у футера своего
     верхнего отступа нет. */
  padding-bottom: var(--section-gap);
}

.about-history__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  padding: var(--space-64);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
  /* Точки таймлайна наполовину заходят на отступ карточки — обрезаем,
     как overflow-clip у фрейма в макете. */
  overflow: hidden;
}

.about-history__title {
  font-size: var(--fs-48);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-48);
}

/* Пять колонок по 290 с шагом 355,5 внутри 1712 → зазор ровно 65,5.
   Колонки на 1fr, чтобы на 1440 сжимались, а не выпирали за карточку. */
.about-history__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 65.5px;
}

/* Штриховая линия, нода 1:1823: 1 px, синяя, штрих 2/2, на 68 от верха
   блока вех (в макете y=238 при старте вех на 170). */
.about-history__steps::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 68px;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--color-brand) 0 2px,
    transparent 2px 4px
  );
}

.about-history__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Точка 12×12 (ноды 1:1841…1:1845) центрирована на левой границе колонки
   и на линии. */
.about-history__step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 68px;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

.about-history__year {
  font-size: var(--fs-48);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-48);
  color: var(--color-brand);
}

.about-history__text {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text);
}

/* --- Адаптив ---------------------------------------------------------------
   Мобильных и планшетных кадров в макете нет (см. «Дыры макета» в
   _figma/00-INDEX.md) — брейкпоинты приняты вёрсткой и ждут согласования. */

@media (max-width: 1200px) {
  .about-photo { height: 420px; }
  .about-stats,
  .about-adv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-adv__card { min-height: 0; }
  .about-history__card { padding: var(--space-48); }
}

@media (max-width: 1100px) {
  /* Пять колонок в ряд перестают читаться — рассыпаем сетку, линия и точки
     теряют смысл. */
  .about-history__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-48);
  }
  .about-history__steps::before,
  .about-history__step::before { display: none; }
}

@media (max-width: 900px) {
  .about-head .page-lead { font-size: var(--fs-20); letter-spacing: var(--ls-20); }
  .about-photo { height: 320px; }
  .about-adv__card-title { font-size: var(--fs-24); letter-spacing: var(--ls-24); }
  .about-history__title,
  .about-history__year { font-size: var(--fs-32); letter-spacing: var(--ls-32); }
}

@media (max-width: 640px) {
  .about-photo { height: 220px; border-radius: var(--radius-lg); }
  .about-stats,
  .about-adv__grid,
  .about-history__steps { grid-template-columns: minmax(0, 1fr); }
  .about-adv__card,
  .about-history__card { padding: var(--space-24); border-radius: var(--radius-lg); }
  /* «3 000+» в одну строку на 390 не влезает — снимаем запрет переноса. */
  .about-stat__value { white-space: normal; }
}

/* --- Телефон: размеры, не попавшие в блоки выше ---------------------------- */
@media (max-width: 640px) {
  .about-stat__value { font-size: var(--fs-32); letter-spacing: var(--ls-32); }
  .about-history__card { gap: var(--space-24); }

  .about-adv__icon { width: 56px; height: 56px; padding: var(--space-12); }
  .about-adv__icon svg { width: 32px; height: 32px; }
}