/* ============================================================================
   About us — доводка под фреймы 0:2851 (1440) и 4:779 (390).
   Файл подключается после pages.css, поэтому правила с той же
   специфичностью здесь выигрывают. Все размеры десктопного фрейма
   заперты в @media (min-width: 1024px): без этого они перебивают
   мобильные правила pages.css, которые записаны слабее.
   ========================================================================= */

/* ── Водяной знак в интро (0:2897 / 4:794) ─────────────────────────────
   В макете это ЗАЛИТЫЙ текст rgba(242,13,47,.055) при opacity .5,
   а не коралловый с opacity .2: суммарная альфа отличается втрое. */
.page-about-us .about-hero__watermark {
  font-family: var(--font-display);
  font-size: 220px;
  line-height: 239px;
  color: rgba(242, 13, 47, .055);
  opacity: .5;
}

/* 0:2959 — обводка картинки лежит поверх неё: inset-тень родителя
   рисуется под содержимым и в кадре не видна вовсе. */
.page-about-us .offer-row__media {
  position: relative;
  display: block;
  box-shadow: none;
}

.page-about-us .offer-row__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 2px var(--color-ink);
  pointer-events: none;
}

.page-about-us .offer-row__media img { border-radius: var(--radius-xl); }

/* 0:2979 / 4:880 prematch-accent — светлая плашка с тёмной обводкой,
   а не тёмная заливка. Верно на обеих ширинах. */
.page-about-us .offer-note {
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-ink);
  color: var(--color-ink);
}

.page-about-us .offer-note__text { color: var(--color-muted); }

/* ── Десктопный фрейм 0:2851 ───────────────────────────────────────── */

@media (min-width: 1024px) {
  /* Боковой отступ секций about-us — 96, а не общий --gutter 80:
     0:2925 и 0:2945 обе набраны с pad(96,96), контент 1248. */
  .page-about-us .principles,
  .page-about-us .offer { padding-inline: 96px; }

  /* 0:2948 — Archivo Black 40/43.52, бокс 44; 0:2949 — 16/20.8, бокс 21.
     Строки 48 и 24 давали +7px и сдвигали вниз все три ряда. */
  .page-about-us .offer__title { line-height: 44px; }
  .page-about-us .offer__lead { line-height: 21px; }

  /* 0:2961 — разделитель это отдельный элемент нулевой высоты между рядами:
     40 сверху + линия + 40 снизу. Граница ряда занимает свой пиксель,
     поэтому паддинг 39, иначе на каждый ряд набегает лишний px. */
  .page-about-us .offer-row + .offer-row { padding-top: 39px; }

  /* 0:2952 — номер, группа «заголовок + описание» и кнопка с зазором 24 */
  .page-about-us .offer-row__text { gap: 24px; }
  .page-about-us .offer-row__body { display: flex; flex-direction: column; gap: 12px; }

  /* 0:2953 — 56/60.93, бокс 61 */
  .page-about-us .offer-row__num { line-height: 61px; }

  /* 0:2956 — 16/25.6, бокс 52 на две строки */
  .page-about-us .offer-row__lead { line-height: 26px; }

  /* 0:2957 — кнопка 206×50 при паддинге 16/32 и обводке 2px */
  .page-about-us .offer-row__cta {
    padding: 16px 32px;
    box-shadow: inset 0 0 0 2px var(--color-ink);
    line-height: 18px;
  }

  /* 0:2962 — во втором ряду картинка стоит слева, поэтому и колонки сетки
     меняются местами: order переставляет содержимое, но не сами колонки,
     и картинка 640 оказывалась в колонке 568. */
  .page-about-us .offer-row:nth-of-type(2) { grid-template-columns: 640px minmax(0, 568px); }

  /* 0:2973 — ряд «pre-match» устроен как остальные: текст 568 и блок 640 */
  .page-about-us .offer-row--wide { grid-template-columns: minmax(0, 568px) 640px; }

  /* 0:2979 — внутри плашки строка из двух колонок по 288, а не колонка */
  .page-about-us .offer-note {
    flex-direction: row;
    gap: 0;
    padding: 32px;
  }

  .page-about-us .offer-note__title { flex: 1; font-size: 18px; line-height: 20px; }
  .page-about-us .offer-note__text { flex: 1; font-size: 14px; line-height: 21px; }
}

/* ── Мобильный фрейм 4:779 ─────────────────────────────────────────── */

@media (max-width: 767px) {
  /* 4:794 — тот же знак кеглем 110 и с альфой .4 */
  .page-about-us .about-hero__watermark {
    font-size: 110px;
    line-height: 120px;
    opacity: .4;
  }

  /* 4:853 — шапка блока: 12/15.6, 32/38, 15/19.5 */
  .page-about-us .offer__kicker { font-size: 12px; line-height: 16px; }
  .page-about-us .offer__title { font-size: 32px; line-height: 38px; }
  .page-about-us .offer__lead { font-size: 15px; line-height: 20px; }

  /* 4:858 — номер, заголовок и описание идут одной группой с зазором 8,
     а кнопка отделена зазором 20 */
  .page-about-us .offer-row__text { gap: 8px; }
  .page-about-us .offer-row__body { display: flex; flex-direction: column; gap: 8px; }
  .page-about-us .offer-row__text > p:last-child { margin-top: 12px; }

  .page-about-us .offer-row__num { font-size: 44px; line-height: 48px; }
  .page-about-us .offer-row__title { font-size: 26px; line-height: 28px; }
  .page-about-us .offer-row__lead { font-size: 15px; line-height: 22.5px; }

  /* 4:862 — кнопка во всю ширину, 48 при паддинге 12/24 и обводке 2px */
  .page-about-us .offer-row__cta {
    display: flex;
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 12px 24px;
    box-shadow: inset 0 0 0 2px var(--color-ink);
  }

  /* 4:864 — картинка 180 высотой */
  .page-about-us .offer-row__media img { height: 180px; }

  /* 4:880 — плашка колонкой: паддинг 20, зазор 10 */
  .page-about-us .offer-note { gap: 10px; padding: 20px; }
  .page-about-us .offer-note__title { font-size: 16px; line-height: 17px; }
  .page-about-us .offer-note__text { font-size: 14px; line-height: 19.6px; }

  /* ── Реквизиты (4:811) ──────────────────────────────────────────────
     Горизонтальные разделители на планшетной ширине погашены
     (display:none) и остаются шириной 1px от десктопного правила —
     без обоих свойств линии не рисуются вовсе. */
  .page-about-us .facts__divider { display: block; width: auto; }

  /* 11:303 / 11:306 — колонки не равны: 164.5 слева и 185.5 справа,
     вертикальная линия проходит по 184.5, а не по середине. */
  .page-about-us .facts { grid-template-columns: 164.5fr 185.5fr; }

  /* 11:303 — левый факт без бокового отступа, правый с отступом 20 */
  .page-about-us .fact { padding-inline: 0; }
  .page-about-us .fact:nth-of-type(2),
  .page-about-us .fact:nth-of-type(4) { padding-left: 20px; }

  /* 11:304 — подпись коралловая, значение бежевое */
  .page-about-us .fact__label { color: var(--color-flame); }
  .page-about-us .fact__value { color: var(--color-paper); }
}

/* 0:2887 / 4:801 — акцент в заголовке приходится на «and racing.»,
   а не на вторую строку: в макете третья строка одна, а цвет меняется
   внутри неё. */
.page-about-us .about-hero__title > span:nth-child(2) { color: inherit; }
.page-about-us .about-hero__accent { color: var(--color-brand); }

/* ── Блоки «что предлагаем» на мобильном фрейме (4:857 / 4:866 / 4:875) ────
   Снимок в макете — рамка 350×180 во всю ширину колонки, а текст стоит без
   отступа слева: правило второго ряда «картинка слева, текст с отступом 24»
   снято с 1440 (0:2962) и лежало без медиазапроса, поэтому на 390 колонка
   уезжала вправо, а картинка сжималась до 315. */
@media (max-width: 767px) {
  .page-about-us .offer-row:nth-of-type(2) .offer-row__text { padding-left: 0; }
  .page-about-us .offer-row__media {
    display: block;
    width: 100%;
    height: 180px;
    border-radius: var(--radius-xl);
  }
  .page-about-us .offer-row__media img { width: 100%; height: 100%; border-radius: 0; }
}