/* ============================================================================
   ok-layout.css — HOME-SHELL-V2 · пакет HC-02
   ----------------------------------------------------------------------------
   Классы-контракт раскладки: контейнер, секция, сетки, карточка, стопка,
   кластер, скролл-ряд. Спека: 06_GLOBAL_LAYOUT_CONTRACT §2 + §3 (10 правил).

   ★ ЯДРО ПАКЕТА — .ok-container. Значения НЕ придуманы, а ЗАМЕРЕНЫ живьём
     (решение Архитектора D-08): мастер «02 Главная.dc.html» в headless Chrome,
     viewport 1440 → max-width 1280px и padding 32px у 28/28 контейнеров,
     разброс 0, content-width 1216px, box-sizing border-box, margin:0 auto.

   РЕГРЕСС 0: все классы здесь — НОВЫЕ (.ok-*). Греп по okna-child,
   twentytwentyone и mu-plugins: ни одного вхождения `.ok-` — пересечений с
   текущей вёрсткой нет, подключение файла ничего не перекрашивает.

   СТАРОЕ ↔ НОВОЕ (06 §4, миграция — НЕ здесь, а в HC-14):
     сейчас на боевом 27 контейнеров `max-width:1280px; padding:0 40px`
     (--okna-cw 1200 + 2·40) → контент 1200.
     цель  1280 / pad 32 → контент 1216  (+16px контента, −8px боковой отступ).

   ЗАВИСИМОСТЬ: ok-tokens.css → ok-foundation.css → ok-layout.css (deps enqueue).
   ============================================================================ */


/* ═══ [1] КОНТЕЙНЕР ════════════════════════════════════════════════════════ */
/* 06 §2 + §3 правило 2: padding УЧТЁН ВНУТРИ max-width (border-box),
   контент = 1280 − 2·32 = 1216. Правило 4: шапка, главная и футер живут на
   ОДНОМ базовом контейнере. */
.ok-container{
  width:100%;
  max-width:var(--ok-container-max);        /* ★ 1280px — замер D-08 */
  margin-inline:auto;                       /* ★ margin:0 auto — замер D-08 */
  padding-inline:var(--ok-container-pad-desktop); /* ★ 32px — замер D-08 */
  box-sizing:border-box;
}

/* 06 §2: по умолчанию = base; отдельный модификатор нужен, чтобы блоки могли
   объявить намерение «шире», не переписывая значение. */
.ok-container--wide{ max-width:var(--ok-container-max); }

/* 06 §2 + §3 правило 6: узкие тексты — семантический модификатор, не хардкод. */
.ok-container--content{ max-width:var(--ok-content-reading); }

/* 06 §3 правило 8: контент внутри full-bleed секции всё равно в контейнере.
   Утилита для случая, когда фон уже растянут родителем. */
.ok-container--flush{ padding-inline:0; }


/* ═══ [2] СЕКЦИЯ ═══════════════════════════════════════════════════════════ */
/* Вертикальный ритм — гайд §4, подтверждён мастером (`padding:72px 0` ×20). */
.ok-section{ padding-block:var(--ok-section-space-desktop); }

/* Уменьшенный шаг (06 §2). Значение = планшетный шаг 56px — производная от
   канона, чтобы не плодить новых чисел. */
.ok-section--compact{ padding-block:var(--ok-section-space-tablet); }

/* Последняя секция перед футером — гайд §4: `72px 0 84px`. */
.ok-section--last{
  padding-block:var(--ok-section-space-desktop) var(--ok-section-last-pb);
}

/* 06 §3 правило 7: ФОН секции не ограничен контейнером (full-bleed).
   Чередование A↔B — гайд §2. */
.ok-section--a{ background:var(--ok-section-a); }
.ok-section--b{ background:var(--ok-section-b); }
.ok-section--dark{ background:var(--ok-dark); color:var(--ok-on-dark); }


/* ═══ [3] СЕТКИ ════════════════════════════════════════════════════════════ */
/* Гайд §4 / 06 §2. minmax(0,1fr) вместо 1fr — иначе длинное слово в ячейке
   распирает грид и даёт горизонтальный overflow (06 §3 правило 10). */
.ok-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--ok-gap-cards);
}
.ok-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ok-grid--4,
.ok-grid--products{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--ok-gap-products);
}
/* Двухколоночный блок «текст + медиа» — гайд §4. */
.ok-grid--split{
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:var(--ok-gap-cols);
}


/* ═══ [4] КАРТОЧКА ═════════════════════════════════════════════════════════ */
/* База — гайд §7. Hover-подъём объявляем здесь же (06 §2 относит .ok-card к
   контракту раскладки); компонентные вариации — позже в ok-components.css. */
.ok-card{
  background:var(--ok-section-a);
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);
  padding:24px;
}
.ok-card--feature{
  border-radius:var(--ok-radius-feature);
  padding:26px 28px;
}
.ok-card--hoverable{ transition:transform .2s ease, box-shadow .2s ease; }
.ok-card--hoverable:hover{
  transform:translateY(-4px);
  box-shadow:var(--ok-shadow-card-hover);
}
@media (prefers-reduced-motion:reduce){
  .ok-card--hoverable{ transition:none; }
  .ok-card--hoverable:hover{ transform:none; }
}


/* ═══ [5] СТОПКА / КЛАСТЕР ═════════════════════════════════════════════════ */
/* Гайд §4: «раскладку групп — только flex/grid + gap», не инлайновые отступы. */
.ok-stack{ display:flex; flex-direction:column; gap:16px; }
.ok-stack--tight{ gap:10px; }
.ok-stack--loose{ gap:24px; }

.ok-cluster{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--ok-gap-chips);
}


/* ═══ [6] СКРОЛЛ-РЯД ══════════════════════════════════════════════════════ */
/* 06 §3 правило 9: горизонтальный скролл марок/кейсов на мобилке — ОСОЗНАННЫЙ
   bleed, не баг. Правило 10 при этом не нарушается: скроллится САМ ряд
   (overflow-x на нём), страница горизонтально не едет. */
.ok-scroll-row{
  display:flex;
  gap:var(--ok-gap-products);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ok-scroll-row::-webkit-scrollbar{ display:none; }
.ok-scroll-row > *{ flex:0 0 auto; scroll-snap-align:start; }


/* ═══ [7] РЕСПОНСИВ ═══════════════════════════════════════════════════════ */
/* РЕЕСТР БРЕЙКПОИНТОВ — КАНОН M1, НОВЫЕ ЗНАЧЕНИЯ ЗАПРЕЩЕНЫ:
     LG 1024 · MD 768 · SM 600 · XS 480   (см. okna-mobile.css, шапка файла)
   CSS-переменные внутри @media не «переопределяются по брейкпоинту» сами —
   поэтому падинги переключаются явно, а токены остаются справочником.        */

/* ── LG 1024: десктоп → планшет ───────────────────────────────────────────── */
@media (max-width:1024px){
  .ok-container{ padding-inline:var(--ok-container-pad-tablet); }   /* 24px */
  .ok-section{ padding-block:var(--ok-section-space-tablet); }      /* 56px */
  .ok-section--last{
    padding-block:var(--ok-section-space-tablet) var(--ok-section-last-pb);
  }
  .ok-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ok-grid--4,
  .ok-grid--products{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ok-grid--split{ gap:32px; }
}

/* ── MD 768: главный мобайл-рубеж — одна колонка ──────────────────────────── */
@media (max-width:768px){
  .ok-grid,
  .ok-grid--2,
  .ok-grid--split{ grid-template-columns:minmax(0,1fr); }
  .ok-grid--4,
  .ok-grid--products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ok-card{ padding:22px; }
}

/* ── SM 600: телефон — боковой отступ 16px, ритм 44/48 ───────────────────── */
@media (max-width:600px){
  .ok-container{ padding-inline:var(--ok-container-pad-mobile); }   /* 16px */
  /* ★ HC-16: низ 48, а не 44. Двадцать секций каскада печатают на мобилке ровно
     `44px … 48px` (замер мастера, ok-home-w1…w5), и делают это ТЕМ ЖЕ токеном.
     Пока `.ok-section` давал 44/44, четыре секции на этом классе отличались от
     соседей нижним отступом на 4px. Токен назван «last-pb», но по факту это
     канонный НИЖНИЙ отступ мобильной секции — имя историческое, значение общее;
     заводить второй токен с тем же числом 48 значило бы размножить источник правды. */
  .ok-section{
    padding-block:var(--ok-section-space-mobile) var(--ok-section-last-pb-mobile);   /* 44 / 48 */
  }
  .ok-section--last{
    padding-block:var(--ok-section-space-mobile) var(--ok-section-last-pb-mobile);
  }
  .ok-section--compact{ padding-block:var(--ok-section-space-xs); }

  /* Осознанный bleed скролл-ряда: вылезает ровно на боковой padding контейнера
     и тут же возвращает его себе внутрь — края карточек не липнут к экрану. */
  .ok-scroll-row{
    margin-inline:calc(var(--ok-container-pad-mobile) * -1);
    padding-inline:var(--ok-container-pad-mobile);
  }
}

/* ── XS 480: мелкие телефоны ──────────────────────────────────────────────── */
/* ★ HC-16: РИТМ СЕКЦИЙ ЗДЕСЬ НАМЕРЕННО НЕ ПОНИЖАЕТСЯ (было `.ok-section{32px}`).
   ЧТО БЫЛО ЗАМЕРЕНО. Каскад главной состоит из 24 секций. Двадцать из них ставят
   мобильный ритм сами — `padding-block:44px 48px`, и это ПРЯМОЙ ЗАМЕР МАСТЕРА
   (комментарии «замер мастера» в ok-home-w1…w5). Ветки ≤480 у них нет, поэтому на
   всём диапазоне телефонов они держат 44/48. Четыре секции (b2b, geo,
   guarantee-home, process-steps) ритма своего не имеют и живут классом
   `.ok-section` — и вот они на ≤480 уходили на 32/32. Итог на 375/390 (самые
   массовые вьюпорты): в одной ленте страницы соседствуют 44 и 32 — видимый разрыв
   12px, ровно четыре раза за страницу.

   ПОЧЕМУ УНИФИЦИРУЕМ ВВЕРХ, А НЕ ВНИЗ:
     1) критерий приёмки самого плана 17 звучит «spacing совпадает (секции
        72/44-48)» — значение 32 ему противоречит буквально;
     2) «XS 32» в 06 §1 — оценка архитектора, а НЕ замер: мастер-файл вообще не
        имеет media-запросов (это макет с переключателем Десктоп/Мобайл), взять
        из него отдельный XS-ритм физически неоткуда. 44/48 — замер, 32 — догадка;
        при конфликте побеждает замер;
     3) страница не может иметь два вертикальных ритма одновременно: понижать
        пришлось бы все 24 секции, то есть переверстать пять принятых волн против
        их же замеров мастера.
   Токен `--ok-section-space-xs` НЕ удалён: он остаётся рабочим для
   `.ok-section--compact` (ветка ≤600 выше) — там уменьшённый шаг осмыслен. */
@media (max-width:480px){
  .ok-grid--4,
  .ok-grid--products{ grid-template-columns:minmax(0,1fr); }
}