/* ══════════════════════════════════════════════════════════════
   Red Orange Technologies — Products, обзор (/products/).
   Макета в Figma нет. Страница собрана из библиотеки блоков и сводит
   три продуктовые страницы: NOVA for Salesforce, WorkHub, NOVAlab.
   Тексты — из тех же разделов docx, что и на самих страницах,
   плюс раздел «Our Products» из брифа структуры сайта.

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

.p-hero    { padding-top:  84px; padding-bottom:  40px; }
.p-lineup  { padding-top: 120px; padding-bottom: 120px; }
.p-own     { padding-top: 120px; padding-bottom: 140px; } /* +20 перед тёмной */
.p-cta     { padding-top: 140px; padding-bottom: 140px; }

/* ── 1 · Hero ──────────────────────────────────────────────────
   Блок 9 без плитки визуала: обзорной странице своя иллюстрация
   не нужна — визуальный якорь ниже дают сами полосы продуктов,
   каждая со схемой своего экрана. Заголовок прижат к верху
   по той же причине, что на NOVAlab: имя в одно слово. */

.p-hero .hero__top { align-items: flex-start; }

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

/* ── 2 · Полосы продуктов ──────────────────────────────────────
   Три полосы `split--in-grid`, вторая зеркальная. Между полосами
   зазор больше обычного: иначе три ряда сливаются в один блок. */

.p-lineup__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
}

.p-product__name { display: flex; flex-direction: column; gap: var(--space-2xs); }

/* ── 3 · Почему свои продукты ──────────────────────────────────
   Лид и теги решений, которые приходят после прототипа, слева;
   иллюстрация «от прототипа к платформе» справа (2026-09-11: раньше
   текст занимал 940 из 1360, и справа оставалось пустое поле).
   Elementor: контейнер row, 2 колонки по 50 %, gap 32 → Image. */

.p-own__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--col-gap);
  align-items: center;
}

.p-own__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

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

/* Тёплая плитка того же тона, что фон кадра: на белой секции
   иллюстрация читается плиткой, как визуалы карточек на главной */
.p-own__media { background: var(--bg-warm); aspect-ratio: 1216 / 896; overflow: hidden; }
.p-own__media > img { width: 100%; height: 100%; object-fit: cover; display: block; }

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

  .p-hero   { padding-top: 64px; padding-bottom: 32px; }
  .p-lineup { padding-top: 96px; padding-bottom: 96px; }
  .p-own    { padding-top: 96px; padding-bottom: 112px; }
  .p-cta    { padding-top: 112px; padding-bottom: 112px; }

  .p-lineup__rows { gap: var(--space-xl); }

  /* Иллюстрация уходит под текст: рядом с ней лид сжимается
     до 450 px, строки по 5–6 слов читаются хуже */
  .p-own__row { grid-template-columns: 1fr; }

  /* Во всю ширину 960 кадр выходит 945 × 696 и перевешивает текст
     над ним — держим его не шире 640 */
  .p-own__media { max-width: 640px; }
}

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

  .p-hero { padding-top: 48px; padding-bottom: 24px; }
  .p-lineup,
  .p-own,
  .p-cta  { padding-top: 72px; padding-bottom: 72px; }

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