/* Sigma Club V4: permanent responsive layout primitives. */
:root{
  --v4-wrap:1440px;
  --v4-gutter:clamp(20px,3vw,56px);
  /* M09: широкий шаг секции — именованное исключение уровня section,
     объявленное один раз в sigma.css (--rhythm-section-wide). */
  --v4-section:var(--rhythm-section-wide);
  /* M09 завёл семантического владельца кластерного зазора
     (--rhythm-cluster-grid в sigma.css). Здесь --v4-gap остаётся только
     историческим псевдонимом этого владельца: два независимых объявления
     одного и того же зазора и были доказанной дублированной policy.
     Базовое значение прежнего второго владельца ни одним живым правилом
     не потреблялось: все потребители --v4-gap живут в планшетном и
     десктопном режимах, где владелец и так даёт то же самое число.
     Замерено: ноль сдвинувшихся боксов на 12 маршрутах и 9 ширинах.
     Owner 03.09.2026: слить на владельца. */
  --v4-gap:var(--rhythm-cluster-grid);
  --v4-measure:min(72ch,720px);
}

.v4-page{min-width:0}
.v4-wrap{width:min(var(--v4-wrap),calc(100% - 2 * var(--v4-gutter)));margin-inline:auto}
.v4-section{margin-block-start:var(--v4-section)}
.v4-section:first-child{margin-block-start:18px}
.v4-stack{display:flex;min-width:0;flex-direction:column;gap:var(--v4-gap)}
.v4-grid{display:grid;min-width:0;gap:var(--v4-gap)}
.v4-measure{width:100%;max-width:var(--v4-measure)}
.v4-copy{min-width:0;max-width:var(--v4-measure)}
.v4-copy>p{line-height:1.68}
.v4-copy>p+p{margin-top:14px}
.v4-pair{display:grid;min-width:0;gap:var(--v4-gap);align-items:start}
.v4-media{position:relative;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-card)}
.v4-media>img,.v4-media>picture,.v4-media picture>img{display:block;width:100%;height:100%;object-fit:cover}
.v4-media>img,.v4-media picture>img{position:absolute;inset:0}
.v4-media--natural{aspect-ratio:4/3}

/* ── SPLIT SECTION ───────────────────────────────────────────────────────────
   Единственный владелец композиции «колонка текста + колонка медиа». Семь
   инстансов на /space, /space/aura, /space/sliyanie, /, /contacts и /pro
   держали по собственной копии этой политики (независимые display/grid, flex
   и min-height правила) — отсюда расхождение осей, разрыв на границе
   1023→1024 и оторванное действие. Маршрут теперь объявляет вариант и свои
   content-размеры; композицию он не объявляет.

   Варианты
     .v4-split--tablet       сплит с 768px, иначе только с 1024px
     .v4-split--equal        две равные дорожки вместо 7fr / 5fr
     .v4-split--stretch      колонки делят нижнюю границу (обязателен, либо --top)
     .v4-split--top          колонки начинаются вместе и живут своей высотой
     .v4-split--top-tablet   то же, но только в планшетном режиме
     .v4-split--media-end    медиа последней — по умолчанию, совпадает с DOM
     .v4-split--media-start  медиа первой, без изменения порядка в DOM
     .v4-split--fill         медиа-колонка тянется на всю строку
     .v4-split--pin          колонка текста — стопка с канонической щелью
                             перед блоком действия

   Слоты содержимого; их объявляет маршрут, но не этот файл. Размер, который
   в планшете и на десктопе разный, маршрут объявляет в том режиме, где он
   действует, — отдельного «десктопного» токена для этого не нужно.
     --v4-split-media      ширина контента, ниже которой дорожка медиа не идёт
     --v4-split-gap        щель между колонками
     --v4-split-media-h    высота контента медиа-колонки
     --v4-split-action-gap щель перед блоком действия у варианта --pin;
                           по умолчанию — роль --rhythm-action (M09)

   Режимов два, и оба канонические: 768px и 1024px. Ниже 768px примитив не
   объявляет ничего — мобильный поток остаётся за своим прежним владельцем.
   Оба режима живут в тех же двух @media-блоках, что и остальные примитивы
   этого файла: инвентарь блоков не меняется.

   Селекторы намеренно составные (.v4-split.v4-split--stretch), а детские несут
   :nth-child(n): и то и другое — приёмы специфичности, а не фильтры. Они
   обязаны перебивать прежних владельцев тех же контейнеров, которые всё ещё
   держат их мобильный поток и которые этой миссии трогать нельзя: .g12>.cN,
   .room-page .lp-hero, .space, .media-row. */
.v4-split{min-width:0}

@media(min-width:768px){
  .v4-grid--2-tablet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v4-pair--tablet{grid-template-columns:minmax(0,7fr) minmax(280px,5fr)}
  .v4-pair--media-first>.v4-media{grid-column:1;grid-row:1}
  .v4-pair--media-first>.v4-copy{grid-column:2;grid-row:1}

  .v4-split--tablet.v4-split--stretch,
  .v4-split--tablet.v4-split--top{
    display:grid;
    grid-template-columns:minmax(0,7fr) minmax(var(--v4-split-media,0px),5fr);
    gap:var(--v4-split-gap,var(--v4-gap));
  }
  .v4-split--tablet.v4-split--equal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v4-split--tablet.v4-split--stretch{align-items:stretch}
  .v4-split--tablet.v4-split--top,
  .v4-split--tablet.v4-split--top-tablet{align-items:start}
  .v4-split--tablet>*:nth-child(n){min-width:0;grid-column:auto;grid-row:auto}
  .v4-split--tablet.v4-split--media-start>*:nth-child(n):last-child{order:-1}
  .v4-split--tablet>*:nth-child(n):last-child{margin-block-start:0;min-height:var(--v4-split-media-h,0px)}
  .v4-split--tablet.v4-split--fill>*:nth-child(n):last-child{height:100%;aspect-ratio:auto}
}

@media(min-width:1024px){
  .v4-grid--12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .v4-span-3{grid-column:span 3}
  .v4-span-4{grid-column:span 4}
  .v4-span-5{grid-column:span 5}
  .v4-span-6{grid-column:span 6}
  .v4-span-7{grid-column:span 7}
  .v4-span-8{grid-column:span 8}
  .v4-span-12{grid-column:1/-1}
  .v4-pair{grid-template-columns:minmax(0,7fr) minmax(320px,5fr)}
  .v4-pair--equal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v4-pair--media-major{grid-template-columns:minmax(320px,5fr) minmax(0,7fr)}

  .v4-split.v4-split--stretch,
  .v4-split.v4-split--top{
    display:grid;
    grid-template-columns:minmax(0,7fr) minmax(var(--v4-split-media,0px),5fr);
    gap:var(--v4-split-gap,var(--v4-gap));
  }
  .v4-split.v4-split--equal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v4-split.v4-split--stretch{align-items:stretch}
  .v4-split.v4-split--top{align-items:start}
  .v4-split>*:nth-child(n){min-width:0;grid-column:auto;grid-row:auto}
  .v4-split--media-start>*:nth-child(n):last-child{order:-1}
  .v4-split>*:nth-child(n):last-child{margin-block-start:0;min-height:var(--v4-split-media-h,0px)}
  .v4-split--fill>*:nth-child(n):last-child{height:100%;aspect-ratio:auto}
  .v4-split--pin>*:nth-child(1){display:flex;min-width:0;flex-direction:column}
  .v4-split--pin>*:nth-child(1)>:is(.cta-row,a.btn:last-of-type){margin-block-start:var(--v4-split-action-gap,var(--rhythm-action))}
  .v4-split--pin>*:nth-child(1)>a.btn:last-of-type{align-self:flex-start}
}

@media(min-width:1440px){
  .v4-grid--4-wide{grid-template-columns:repeat(4,minmax(0,1fr))}
}