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

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

/* Зазор между секциями (20 в макете) сложен в паддинги: обычно
   в верхний следующей, а перед тонированными — в нижний предыдущей,
   иначе белый зазор окрасился бы фоном тёмной секции. */
.n-hero     { padding-top:  84px; padding-bottom:  40px; }
.n-problem  { padding-top: 140px; padding-bottom: 140px; } /* +20 перед тёмной */
.n-how      { padding-top: 100px; padding-bottom: 100px; } /* тёмная */
.n-proof    { padding-top: 120px; padding-bottom: 140px; } /* +20 перед тёмной */
.n-model    { padding-top: 100px; padding-bottom: 100px; } /* тёмная */
.n-team     { padding-top: 120px; padding-bottom: 120px; }
.n-scope    { padding-top: 120px; padding-bottom: 140px; }
.n-cta      { padding-top: 140px; padding-bottom: 140px; }

/* ── 1 · Hero ──────────────────────────────────────────────────
   Визуал героя — иллюстрация A (решение пользователя 2026-09-11);
   до этого стояла схема экрана (блок 35), правила ниже для неё
   оставлены на случай возврата, когда придут настоящие скриншоты. */

.n-hero .hero-split__visual {
  background: transparent;
  align-items: stretch;
  padding: 0;
  min-height: 0;
}

/* Панель больше НЕ тянется на высоту колонки (правка 2026-09-11).
   Растяжение работало, пока в панели было пять строк; после облегчения
   их три, и между строками и итогом оставалось 280 px пустоты — та же
   ловушка, что на WorkHub (блок 35 в components.md). Панель прижата
   к верху, высоту задаёт содержимое. */
.n-hero .hero-split__visual { align-items: flex-start; }

/* Иллюстрация вместо панели (решение пользователя 2026-09-11).
   Кадр 4 : 3 в колонке 658 × 706 вписан целиком (contain): у него
   тот же тёплый фон #FDF9F7, что у плитки, поэтому поля сверху и снизу
   не видны как рамка. Elementor: контейнер Warm White → Image, Fit Contain. */
.n-hero .hero-split__visual--illu {
  background: var(--bg-warm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.n-hero .hero-split__visual--illu > img { width: 100%; height: 100%; object-fit: contain; }

/* ── 2 · Проблема ──────────────────────────────────────────────
   Список того, что обычно уходит в бэклог, — тегами: в копии это
   короткие вопросы («Need a new object? A Flow?»), а не абзац. */

.n-problem__lead,
.n-how__lead,
.n-scope__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 940px;
}

.n-problem__asks { margin-top: var(--space-xs); }

.n-problem .versus { margin-top: var(--space-xl); }

/* ── 3 · Как это работает ──────────────────────────────────────
   Цепочка «Describe → Review → Deploy» стоит сразу под заголовком:
   в брифе она названа «fast product summary», то есть должна
   читаться раньше подробностей. */

.n-how__chain { margin-top: var(--space-xs); }

/* ── 4 · Доказательство продукта ───────────────────────────────
   Четыре микро-примера из брифа — лентой «запрос → результат»
   (блок 45 ask-flow, выбор пользователя 2026-09-11). Своих правил
   на странице нет: вся раскладка в библиотеке. */

/* ── 5 · Операционная модель ───────────────────────────────────
   Тёмная секция: два столбца текста, под ними лок-ап. */

.n-model__cols {
  display: flex;
  gap: var(--col-gap);
  align-items: flex-start;
}

.n-model__cols > * { flex: 1 1 0; min-width: 0; }

.n-model__close {
  margin-top: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ── 6 · Для кого ──────────────────────────────────────────────
   Аудиторий четыре, а icon-grid по умолчанию трёхколоночный: при
   четырёх карточках последняя ячейка осталась бы пустой. Две колонки
   закрывают ряд ровно — берём библиотечный модификатор `icon-grid--2`,
   а не пишем то же правило на странице. */

/* ── 7 · Что остаётся людям ────────────────────────────────────
   Текст и теги сложных работ слева, иллюстрация справа. Перечень из
   копии — не абзац, а список: тегами он читается как область. */

.n-scope__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--col-gap);
  align-items: center;
  margin-top: var(--space-xl);
}

.n-scope__aside-label { color: var(--gray-500); }

/* Правка 2026-09-11 (замечание пользователя): теги перенесены влево под
   текст, справа — иллюстрация «рутина — NOVA, сложное — специалистам».
   Elementor: контейнер row 50 / 50 → Image. */
.n-scope__lead  { min-width: 0; }
.n-scope__tags  { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-2xs); }
.n-scope__media { background: var(--bg-warm); aspect-ratio: 1216 / 896; overflow: hidden; }
.n-scope__media > img { width: 100%; height: 100%; object-fit: cover; display: block; }

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

  .n-hero     { padding-top: 64px; padding-bottom: 32px; }
  .n-problem,
  .n-how,
  .n-team     { padding-top: 112px; padding-bottom: 96px; }
  .n-proof,
  .n-scope    { padding-top: 96px;  padding-bottom: 112px; }
  .n-model    { padding-top: 80px;  padding-bottom: 80px; }
  .n-cta      { padding-top: 112px; padding-bottom: 112px; }

  .n-model__cols { flex-direction: column; }

  /* Иллюстрация уходит под текст и не растягивается шире 640 */
  .n-scope__row   { grid-template-columns: 1fr; }
  .n-scope__media { max-width: 640px; }
}

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

  .n-hero     { padding-top: 48px; padding-bottom: 24px; }
  .n-problem,
  .n-how,
  .n-proof,
  .n-team,
  .n-scope,
  .n-cta      { padding-top: 72px; padding-bottom: 72px; }
  .n-model    { padding-top: 64px; padding-bottom: 64px; }

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