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

   Характер по брифу — «control, overview, structure and calm»:
   в отличие от NOVA тёмная секция здесь одна, и стоит она там, где
   разговор про безопасность. Схемы экрана светлые.

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

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

/* ── 1 · Hero ──────────────────────────────────────────────────
   Визуал героя — иллюстрация (решение пользователя 2026-09-14).
   До этого здесь стояла нарисованная схема дашборда: настоящих
   снимков WorkHub нет, и панель показывала придуманные цифры.
   Кадр 4 : 3 вписан целиком; его тёплый фон совпадает с подложкой,
   поэтому поля по краям не читаются рамкой.
   Elementor: контейнер Warm White → Image, Fit Contain. */
.w-hero .hero-split__visual {
  align-items: center;
  padding: 0;
  min-height: 0;
  aspect-ratio: 4 / 3;
}

.w-hero .hero-split__visual--illu { background: var(--bg-warm); }
.w-hero .hero-split__visual--illu > img { width: 100%; height: 100%; object-fit: contain; }

/* Шесть плиток дашборда: три ряда по две. Клиент перечислил
   шесть показателей, и в два столбца они читаются как сводка,
   а не как длинный список. */
.w-hero .ui-panel__tiles { grid-template-columns: repeat(2, 1fr); }

/* ── Общий лид секции ──────────────────────────────────────────
   Ширина ограничена: строка длиннее ~90 символов теряет строку
   при возврате взгляда (ui-text-measure). */

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

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

/* ── 2 · Проблема ──────────────────────────────────────────────
   Вариант A доски (решение пользователя 2026-09-11): текст и теги
   с иконками слева, фото справа. Бриф WorkHub допускает фото только
   как реальную отраслевую сцену — «руководитель проекта на объекте».
   Пока кадра нет, стоит место под фото той же высоты; кадр встанет
   картинкой с object-fit: cover (в Elementor — фон контейнера Cover). */

.w-problem__row  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); align-items: stretch; }
.w-problem__text { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }

/* Иллюстрация в стиле A вместо фото с объекта (решение пользователя
   2026-09-14). Кадр держит свою пропорцию 4 : 3 и прижат к верху колонки:
   ряд растягивает ячейки по высоте текста, а растянутый кадр обрезался бы
   сверху и снизу. Подпись-заглушка удалена вместе со стилем.
   Elementor: контейнер Warm White → Image, Fit Contain, Aspect Ratio 4 : 3. */
.w-problem__photo {
  align-self: start;
  aspect-ratio: 4 / 3;
  background: var(--bg-warm);
  overflow: hidden;
}

.w-problem__photo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── 4 · Доказательство продукта ───────────────────────────────
   Блок 47 areas: четыре области словами, без интерфейса и цифр
   (решение пользователя 2026-09-14). Сетка 2 × 2 из нарисованных
   экранов убрана вместе с .proof-grid. */

.w-proof .areas { margin-top: var(--space-xl); }

/* ── 5 · Интеграции ────────────────────────────────────────────
   Диаграмма «центр и системы вокруг» (блок 38) и пример под ней. */

.w-integrations .hub { margin-top: var(--space-xl); }
.w-integrations__note { max-width: 940px; margin-top: var(--space-xl); }

/* ── 6 · Доступ подрядчиков ────────────────────────────────────
   Текст и четыре меры защиты тегами с иконками слева, иллюстрация
   справа (решение пользователя 2026-09-14; до этого стоял экран прав
   доступа — блок 44). Секция тёмная, поэтому кадр нарисован светлой
   линией по фону Near Black: подложка кадра и полоса — один цвет,
   рамки вокруг картинки нет. Кадр держит свою пропорцию 4 : 3 и
   прижат к верху колонки, как и текст.
   Elementor: контейнер Near Black → Image, Fit Contain, Aspect 4 : 3. */

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

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

/* ── 8 · Что даёт объединение ──────────────────────────────────
   Сравнение «до / после» и список выигрышей под ним. */

.w-gains .versus { margin-top: var(--space-xl); }
.w-gains__close  { margin-top: var(--space-xl); max-width: 940px; display: flex; flex-direction: column; gap: var(--space-md); }

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

  .w-hero         { padding-top: 64px; padding-bottom: 32px; }
  .w-hero .hero-split__visual { aspect-ratio: 4 / 3; }
  .w-problem,
  .w-capabilities,
  .w-proof,
  .w-industries   { padding-top: 112px; padding-bottom: 96px; }
  .w-integrations { padding-top: 112px; padding-bottom: 112px; }
  .w-access       { padding-top: 80px;  padding-bottom: 80px; }
  .w-gains        { padding-top: 96px;  padding-bottom: 112px; }
  .w-cta          { padding-top: 112px; padding-bottom: 112px; }

  .w-problem__row,
  .w-access__row  { grid-template-columns: 1fr; }
}

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

  .w-hero { padding-top: 48px; padding-bottom: 24px; }
  .w-problem,
  .w-capabilities,
  .w-proof,
  .w-integrations,
  .w-industries,
  .w-gains,
  .w-cta  { padding-top: 72px; padding-bottom: 72px; }
  .w-access { padding-top: 64px; padding-bottom: 64px; }

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