/*
 * o-proekte.css — страница «О проекте» (SC-0522, правка владельца В242).
 *
 * ФАЙЛ ЛЕЖИТ В СТАТИКЕ, А НЕ РЯДОМ СО СТРАНИЦЕЙ (SC-0499). Поток печати (профиль stream)
 * собирает один общий `sc-stream.css`, а CSS, импортированный на уровне роута
 * (`import "./x.css"`), в напечатанный HTML не кладёт — страница приехала бы на стенд без
 * единого правила `.op-`. Тот же приём уже применён у РКО, редакции и формы обратной связи:
 * ссылка `<link rel="stylesheet">` печатается в теле страницы и доезжает при любом профиле.
 *
 * ИМЕНА КЛАССОВ — префикс `op-` («о проекте»). Общие классы портала (`.wrap`, `.sec-head`)
 * переиспользуются как есть: заголовки секций набраны той же разметкой, что на всех страницах,
 * и здесь им меняется только цвет — по макету владельца H2 синие.
 *
 * ЦВЕТА — ТОЛЬКО ТОКЕНЫ `src/site/tokens.css`. Своих шрифтов страница не вводит.
 *
 * ОДНА ТОЧКА ПЕРЕЛОМА — 900 пикселей: ниже неё показатели и карточки становятся столбиком,
 * а сетка логотипов — двухколоночной. Выше 900 всё стоит в ряд, как в макете.
 */

/* ═══════════════════════════ ПЕРВЫЙ ЭКРАН ═══════════════════════════ */

/*
 * Полоса героя тянется во всю ширину окна, а её содержимое держит общая колонка портала
 * (`.wrap`, 1240 пикселей). Градиент — зелёный по макету: светлая мята слева вверху уходит в
 * тёмный зелёный справа внизу. Тёмная половина нужна не для красоты: белые подписи под
 * цифрами читаются именно на ней, на светлой мяте они бы поплыли.
 */
.op-hero {
  background: linear-gradient(135deg, #3fbf8f 0%, var(--green-d) 55%, #0d7a57 100%);
  color: #fff;
  padding: 18px 0 48px;
  margin-bottom: 40px;
}
/*
 * ПРАВИЛО ПРО ПРЯМОГО РЕБЁНКА, А НЕ ПРО ЛЮБОЙ `.wrap` ВНУТРИ (SC-0523). С правкой В246 внутри
 * героя появилась вторая колонка — своя у блока крошек. Прежнее `.op-hero .wrap` доставало и
 * до неё, и крошки уезжали на середину, вслед за заголовком. Центрируется только собственная
 * колонка первого экрана.
 */
.op-hero > .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/*
 * ═══════════ ХЛЕБНЫЕ КРОШКИ ПЕРВОГО ЭКРАНА (SC-0523, правка владельца В246) ═══════════
 *
 * Крошки печатает ОБЩИЙ компонент портала (`sections/blocks/Breadcrumbs.tsx`), и трогать его
 * ради одной страницы нельзя: та же разметка стоит на сотнях страниц разделов. Поэтому здесь
 * переопределяются его классы — `.sb-crumbs` (собственные отступы блока), `a` (ссылка),
 * `[aria-current="page"]` (текущая страница) и `li + li::before` (косая черта). Все правила
 * прижаты к `.op-hero__crumbs`, за пределы первого экрана этой страницы они не выходят.
 *
 * ЦВЕТА — БЕЛЫЕ С ПРОЗРАЧНОСТЬЮ. Подложка тёмно-зелёная, и серый `--ink-3` канона на ней
 * почти не виден. Ссылка приглушена до 80 % белого, текущая страница — чистый белый: так
 * видно, где ты стоишь, без единого лишнего значка.
 */
.op-hero__crumbs {
  margin-bottom: 26px;
}
/* Свой верхний отступ блока (18 пикселей канона) здесь лишний: расстояние до шапки задаёт
   padding самого героя, иначе крошки провалились бы вглубь зелёного поля. */
.op-hero__crumbs .sb-crumbs {
  padding: 0;
  background: none;
  border: 0;
}
.op-hero__crumbs .sb-crumbs ol {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}
.op-hero__crumbs .sb-crumbs a {
  color: rgba(255, 255, 255, 0.8);
}
.op-hero__crumbs .sb-crumbs a:hover {
  color: #fff;
}
/* Обводка фокуса своя: канон рисует её цветом `--green-d`, а он и есть подложка героя —
   на зелёном по зелёному кольцо пропало бы вовсе. */
.op-hero__crumbs .sb-crumbs a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 4px;
}
.op-hero__crumbs .sb-crumbs [aria-current="page"] {
  color: #fff;
}
.op-hero__crumbs .sb-crumbs li + li::before {
  color: rgba(255, 255, 255, 0.45);
}
.op-hero__h1 {
  margin: 0;
  font-size: clamp(34px, 5.4vw, 60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
}
.op-hero__lead {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  color: #fff;
}

/* Полоса показателей: три равные доли, разделённые тонкой белой чертой (в столбик её нет). */
.op-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.op-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
.op-stat + .op-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}
.op-stat__num {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.op-stat__cap {
  max-width: 30ch;
  font-size: 15px;
  line-height: 1.4;
  color: #fff;
}

/* ═══════════════════════════ ОБЩЕЕ ДЛЯ СЕКЦИЙ ═══════════════════════════ */

/*
 * H2 у всех секций страницы синие — так в макете. Правило намеренно узкое (только внутри
 * `.op-sec`), чтобы не перекрасить заголовки на других страницах: файл общий по имени, но
 * подключает его одна страница, и наследством от неё никто пользоваться не должен.
 */
.op-sec {
  margin-bottom: 44px;
}
.op-sec .sec-head h2 {
  color: var(--blue-2);
}
/*
 * Лид секции стоит ПОД заголовком, а не рядом с ним. Общий `.sec-head` — это флекс «заголовок
 * слева, ссылка справа»: строка про обратную связь уезжала бы к правому краю и читалась как
 * подпись к кнопке. В макете она подзаголовок, поэтому у секций страницы шапка блочная.
 */
.op-sec .sec-head {
  display: block;
}
.op-sec .sec-head p {
  max-width: 72ch;
  margin-top: 6px;
}

/* ═══════════════════════════ ПРЕИМУЩЕСТВА ═══════════════════════════ */

.op-adv__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.op-adv__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.op-adv__card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-md);
}
/* Квадратная подложка знака: цвет у каждой карточки свой (см. модификаторы ниже). */
.op-adv__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  background: var(--blue-soft);
  color: var(--blue-2);
}
/* Знак берётся из общего спрайта портала: геометрия, заливка и обводка живут там, здесь
   остаётся только размер. Цвет знак наследует от подложки (`currentColor` внутри символа). */
.op-adv__icon svg {
  width: 26px;
  height: 26px;
}
.op-adv__card--amber .op-adv__icon {
  background: var(--amber-soft);
  color: #b3720a;
}
.op-adv__card--green .op-adv__icon {
  background: var(--green-soft);
  color: var(--green-d);
}
.op-adv__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}
.op-adv__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ═══════════════════════════ ПАРТНЁРЫ ═══════════════════════════ */

/*
 * Сетка знаков: четыре колонки по пять рядов, как в макете. Каждая ячейка одинаковой высоты,
 * знак стоит по её центру.
 *
 * РАЗМЕР ЗНАКА ЗАДАН НЕ ЖЁСТКОЙ ВЫСОТОЙ, А ПОТОЛКАМИ (SC-0523, правка владельца В247). Прежде
 * стояло `height: 40px` на всех: квадратная фигура превращалась в квадратик 40×40, а словесный
 * логотип — в полоску шириной 40 и высотой четыре пикселя. Теперь у каждого файла свои ширина
 * и высота показа (набор `assets/service/partners/`, таблица `partners.generated.ts`), а CSS
 * только не даёт им вырасти выше 48 пикселей и шире ячейки: квадраты стоят 48×48, словесные
 * логотипы — во всю отведённую ширину, и ряд читается одной строкой, а не лесенкой.
 */
.op-partners__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.op-partners__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
/*
 * ПОТОЛОК ШИРИНЫ ОБЯЗАН БЫТЬ В ПИКСЕЛЯХ, А НЕ ТОЛЬКО В ПРОЦЕНТАХ. Файлы набора сделаны с
 * двойной плотностью (словесный логотип — 400 пикселей в ширину), и при `width: auto` браузер
 * берёт СОБСТВЕННЫЙ размер файла, а не число из атрибута разметки. С одним лишь `max-width:
 * 100%` логотип Сбербанка растягивался на всю ячейку — 257 пикселей вместо двухсот. `min()`
 * держит оба ограничения сразу: не шире двухсот и не шире ячейки на узком экране.
 */
.op-partners__logo {
  width: auto;
  height: auto;
  max-width: min(200px, 100%);
  max-height: 48px;
  object-fit: contain;
}

/* ═══════════════════════════ ФОРМА ═══════════════════════════ */

/*
 * Блок «Напишите нам» — та же форма, что на странице обратной связи (`FeedbackForm`), со своим
 * заголовком и лидом. Своих правил у формы здесь нет: их приносит `feedback-form.css`, ссылку
 * на который печатает сам компонент. Обёртке остаётся цвет заголовка и нижний отступ страницы.
 */
.op-write {
  margin-bottom: 56px;
}
.op-write .sec-head h2 {
  color: var(--blue-2);
}

/* ═══════════════════════════ УЗКИЙ ЭКРАН ═══════════════════════════ */

@media (max-width: 900px) {
  .op-hero {
    padding: 14px 0 36px;
  }
  .op-hero__crumbs {
    margin-bottom: 20px;
  }
  .op-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  /* В столбик вертикальная черта не нужна — разделяет горизонтальная. */
  .op-stat + .op-stat {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    padding-top: 24px;
  }
  .op-adv__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .op-partners__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .op-partners__cell {
    min-height: 80px;
    padding: 12px;
  }
  /* На узком экране ячейка вдвое уже, и потолок высоты опускается вслед за ней: иначе
     квадратная фигура в 48 пикселей начинала бы теснить словесные логотипы соседнего ряда. */
  .op-partners__logo {
    max-height: 40px;
  }
}

/* Движения на странице ровно одно — подсветка карточки под курсором; читателю, попросившему
   покой, она не нужна. */
@media (prefers-reduced-motion: reduce) {
  .op-adv__card {
    transition: none;
  }
}