/* ══════════════════════════════════════════════════════════════
   Red Orange Technologies — NOVAlab (/products/novalab/).
   Макета в Figma нет: страница собрана из библиотеки блоков по разделу 4
   `Red_Orange_Technologies_Landing_Pages_and_Visual_Direction.docx`
   (копия, SEO и бриф на визуал). Тексты дословные.

   Бриф: «NOVAlab is the page that should use the most custom illustration»
   — 60 % иллюстраций, 40 % product UI, 0 % фотографии. Ценность продукта
   в архитектуре, оркестрации и управлении, поэтому главный визуал —
   схема трёх зон, а не экран.

   Здесь только вертикальный ритм и раскладки, которых нет
   в components.css.
   ══════════════════════════════════════════════════════════════ */

/* Зазор между секциями (20 в макете) сложен в паддинги: обычно
   в верхний следующей, а перед тонированными — в нижний предыдущей. */
.l-hero        { padding-top:  84px; padding-bottom:  40px; }
.l-orchestr    { padding-top: 140px; padding-bottom: 140px; } /* +20 перед тёмной */
.l-data        { padding-top: 100px; padding-bottom: 100px; } /* тёмная */
.l-capabilities{ padding-top: 120px; padding-bottom: 120px; }
.l-pipeline    { padding-top: 120px; padding-bottom: 120px; }
.l-connect     { padding-top: 120px; padding-bottom: 120px; }
.l-agents      { padding-top: 120px; padding-bottom: 140px; } /* +20 перед тёмной */
.l-vendor      { padding-top: 100px; padding-bottom: 100px; } /* тёмная */
.l-cta         { padding-top: 140px; padding-bottom: 140px; }

/* ── 1 · Hero ──────────────────────────────────────────────────
   Взят блок 9 (широкий герой главной), а не блок 10: схема трёх зон
   требует полной ширины 1360, в половинную колонку hero-split она
   не помещается. Бейдж добавлен над заголовком — в блоке 9 его нет,
   потому что на главной заголовок первый на странице. */

/* Заголовок прижат к верху, а не к низу, как в блоке 9 на главной.
   Там заголовок в три строки и выравнивание по нижнему краю ставит
   его на одну линию с кнопками. Здесь имя продукта — одно слово,
   и от выравнивания по низу над ним оставалось 270 px пустоты. */
.l-hero .hero__top { align-items: flex-start; }

.l-hero__headline {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

/* Плитка визуала под схему: без серой заливки и фиксированной высоты
   фотографии — высоту задаёт сама схема. */
.hero__visual--diagram {
  min-height: 0;
  background: var(--bg-warm);
  padding: var(--space-lg);
}

/* ── Общий лид секции ──────────────────────────────────────────
   Строка длиннее ~90 символов теряется при возврате взгляда. */

.l-lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 940px;
}

.l-lead .tag-i-row { margin-top: var(--space-2xs); }

/* ── 2 · Оркестровка: лид + иллюстрация ───────────────────────
   Решение пользователя 2026-09-14: лид шёл одним столбцом 940 px,
   и правая половина секции пустовала. Теперь два равных столбца,
   кадр прижат к верху, как текст.

   Кадр иллюстрации — общий для секций NOVAlab (Orchestration, Agent
   Studio): подложка Warm White, пропорция 4 : 3, кадр вписан целиком.
   Фон картинки выровнен до одного цвета с подложкой, поля не видны.
   Elementor: контейнер Warm White → Image, Fit Contain, Aspect 4 : 3. */

.l-orchestr__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); align-items: start; }
.l-orchestr__row .l-lead { max-width: none; min-width: 0; }

.l-illu { background: var(--bg-warm); aspect-ratio: 4 / 3; overflow: hidden; }
.l-illu img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── 3 · Данные ────────────────────────────────────────────────
   Тёмная секция: текст слева, схема периметра (блок 42) справа.
   Решение пользователя 2026-09-11 — вариант A доски. */

.l-data__row  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); align-items: start; }
.l-data__text { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }

/* ── 5 · Конвейер ──────────────────────────────────────────────
   Восемь ступеней из брифа — конвейер с иконками (блок 43) в тёплой
   плитке и ветка к человеку от Risk и Confidence (вариант A доски).
   Ветка раньше жила только в тексте под схемой. */

.l-pipeline__plate {
  margin-top: var(--space-xl);
  padding: 40px var(--space-lg);
  background: var(--bg-warm);
}

/* Колонки ветки = колонки конвейера (10 узлов). Скобка от центра
   Risk (4-я колонка) до центра Confidence (7-я): при охвате четырёх
   колонок центр крайней — это 12.5 % от ширины охвата. */
.l-pipeline .track__branch { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.l-pipeline .track__arc,
.l-pipeline .track__box    { grid-column: 4 / 8; }
.l-pipeline .track__arc    { margin-inline: 12.5%; }

.l-pipeline__note { margin-top: var(--space-md); max-width: 940px; }

/* ── 7 · Агенты ────────────────────────────────────────────────
   Ряд «текст и типы агентов слева / иллюстрация справа». Пропорция 1 : 1.
   2026-09-14 схема экрана Agent Studio (блок 35) заменена иллюстрацией
   .l-illu: настоящего скриншота нет, а панель показывала выдуманного агента. */

.l-agents__row {
  display: flex;
  gap: var(--col-gap);
  align-items: flex-start;
  margin-top: var(--space-xl);
}

.l-agents__row > * { flex: 1 1 0; min-width: 0; }

.l-agents__text { display: flex; flex-direction: column; gap: var(--space-md); }

/* ── Планшет ≤ 1024 ────────────────────────────────────────── */
@media (max-width: 1024px) {

  .l-hero        { padding-top: 64px; padding-bottom: 32px; }
  .l-orchestr    { padding-top: 112px; padding-bottom: 112px; }
  .l-data,
  .l-vendor      { padding-top: 80px;  padding-bottom: 80px; }
  .l-capabilities,
  .l-pipeline,
  .l-connect     { padding-top: 96px;  padding-bottom: 96px; }
  .l-agents      { padding-top: 96px;  padding-bottom: 112px; }
  .l-cta         { padding-top: 112px; padding-bottom: 112px; }

  .hero__visual--diagram { padding: var(--space-md); }

  .l-data__row   { grid-template-columns: 1fr; }
  .l-orchestr__row { grid-template-columns: 1fr; }
  .l-agents__row { flex-direction: column; }
  /* В колонке flex-basis 0 побеждает aspect-ratio, и кадр схлопывался
     в нулевую высоту (тот же случай, что с финальным сплитом, блок 11). */
  .l-agents__row > * { flex: 0 0 auto; }
  .l-pipeline__plate { padding: var(--space-lg) var(--space-sm); }
}

/* ── Мобильный ≤ 767 ───────────────────────────────────────── */
@media (max-width: 767px) {

  .l-hero { padding-top: 48px; padding-bottom: 24px; }
  .l-orchestr,
  .l-capabilities,
  .l-pipeline,
  .l-connect,
  .l-agents,
  .l-cta  { padding-top: 72px; padding-bottom: 72px; }
  .l-data,
  .l-vendor { padding-top: 64px; padding-bottom: 64px; }

  .hero__visual--diagram { padding: var(--space-sm); }
  .l-pipeline__plate     { padding: var(--space-md) var(--space-sm); }

  .l-cta .btn { width: 100%; text-align: center; }
}