/* Координатная вёрстка для страниц, перенесённых из Zero-блоков Tilda.
   Секция .z — артборд: высота --h (десктоп, макет 1200 px) и --hm (телефон и планшет, макет 320 px),
   фон --zbg / --zbgm. Масштаб --u — как upscale=window в Tilda; без масштаба (upscale=grid): .z--grid — на десктопе, .z--gridm — на телефоне.
   Элемент внутри секции стоит по координатам макета: --x/--y/--w[/--hh] на десктопе, --xm/--ym/--wm[/--hhm] на телефоне.
   Типографика текста: --fs, --lh, --ls, --fw, --c, --op, --ta, --ws, --tt (с суффиксом m — для телефона).
   Группа .z-g — flex-контейнер (--dir, --gap, --ai, --jc, --wrap); её дети .z-st стоят потоком.
   Значения задаёт scratchpad/tools/zgen.py из исходного Zero-блока. */

.z {
    --u: calc(var(--vw, 1vw) * 100 / 1200); --gx: 600;
    position: relative; overflow: hidden; box-sizing: content-box;
    /* отступы записи Tilda (--pt/--pb, на телефоне --ptm/--pbm) — рамкой цвета фона, чтобы координаты элементов не сдвигались */
    border-top: calc(var(--pt, 0) * 1px) solid var(--rbg, var(--zbg, transparent)); border-bottom: calc(var(--pb, 0) * 1px) solid var(--rbg, var(--zbg, transparent));
    height: calc(var(--h) * var(--u)); height: round(down, calc(var(--h) * var(--u)), 1px); /* как в Tilda: высота артборда округляется вниз */
    background-color: var(--zbg, transparent); background-position: var(--zbpos, center); background-size: cover; background-repeat: no-repeat;
}
.z--grid { --u: 1px; }

.z > *, .z-g > .z-g, .z-g--abs > * {
    position: absolute; z-index: var(--z, 3); /* как в Tilda: по умолчанию 3, порядок — по разметке */
    left: calc(50% + (var(--x) - var(--gx)) * var(--u)); top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u)); margin: 0;
}
.z-g.z-g--abs > * { left: calc(var(--x) * var(--u)); }
.z [style*="--hh:"] { height: calc(var(--hh) * var(--u)); }
/* ось Y «по центру» (axisy = center в Tilda, высота элемента заранее неизвестна): отсчёт от середины артборда */
.z > * { translate: 0 var(--tyv, 0); }
.z > [style*="--ay:c"] { top: calc(50% + var(--y) * var(--u)); --tyv: -50%; }

/* текст */
.z-t {
    font-family: var(--ff, inherit); font-size: calc(var(--fs, 16) * var(--u)); line-height: var(--lh, normal); letter-spacing: calc(var(--ls, 0) * var(--u));
    font-weight: var(--fw, 400); color: var(--c, #000); opacity: var(--op, 1); text-align: var(--ta, left);
    white-space: var(--ws, normal); text-transform: var(--tt, none);
}
/* текст с фиксированной высотой (как display:table в Tilda): блок не ниже --hh, содержимое по вертикали — --va */
.z-t[style*="--hh:"] { height: auto; min-height: calc(var(--hh) * var(--u)); }
.z-t[style*="--va:"] { display: flex; align-items: var(--va); }
.z-t[style*="--va:"] > span { width: 100%; }
.z-t a { color: inherit; }
.z-t ul, .z-t ol { margin: 0; padding-left: calc(20 * var(--u)); }
.z-t ul { list-style: disc; }

/* картинка и фигура */
.z-i { max-width: none; height: auto; border-radius: calc(var(--r, 0) * var(--u)); opacity: var(--op, 1); transform: rotate(calc(var(--rot, 0) * 1deg)); box-shadow: var(--sh, none); }
.z-s {
    display: block; border-radius: calc(var(--r, 0) * var(--u)); opacity: var(--op, 1);
    background-color: var(--bg, transparent); background-position: var(--bpos, center); background-repeat: no-repeat; background-size: var(--bsz, cover);
    border: calc(var(--bw, 0) * var(--u)) solid var(--bc, transparent); box-shadow: var(--sh, none);
}

/* кнопка */
.z-b {
    display: flex; align-items: center; justify-content: var(--bjc, center);
    font-family: var(--ff, inherit); font-size: calc(var(--fs, 14) * var(--u)); line-height: var(--lh, 1.55); font-weight: var(--fw, 400); color: var(--c, #fff);
    text-align: var(--ta, center); border-radius: calc(var(--r, 0) * var(--u)); background: var(--bg, transparent);
    border: calc(var(--bw, 0) * var(--u)) solid var(--bc, transparent);
    transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
}
.z-b:hover { background: var(--hbg, var(--bg, transparent)); color: var(--hc, var(--c, #fff)); border-color: var(--hbc, var(--bc, transparent)); }
/* иконка в кнопке (после текста или перед ним): картинка или маска цветом текста; отступ от текста — --gap */
.z-b:has(.z-b__ic) { gap: calc(var(--gap, 0) * var(--u)); }
.z-b__ic { flex: 0 0 auto; width: calc(var(--icw, 20) * var(--u)); aspect-ratio: 1; background: var(--ic) center / contain no-repeat; }
.z-b__ic--mask { background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }

/* группа с автоматической раскладкой */
.z-g {
    display: flex; flex-direction: var(--dir, row); flex-wrap: var(--wrap, nowrap);
    gap: calc(var(--gap, 0) * var(--u)); align-items: var(--ai, flex-start); justify-content: var(--jc, flex-start);
}
.z-g[style*="--wrap:"] { gap: calc(var(--rgap, 0) * var(--u)) calc(var(--cgap, 0) * var(--u)); }
.z-g > .z-st { position: relative; flex-shrink: 0; width: calc(var(--w) * var(--u)); }
.z-g > .z-g.z-st { left: auto; top: auto; }

/* наведение (пошаговая анимация Tilda по hover): прозрачность, масштаб, сдвиг */
[data-hover] { transition: opacity var(--h-t, .3s), scale var(--h-t, .3s), translate var(--h-t, .3s); }
[data-hover]:hover { opacity: var(--h-op, 1); scale: var(--h-s, 1); translate: calc(var(--h-x, 0) * var(--u)) calc(var(--h-y, 0) * var(--u)); }

/* картинка-ссылка: позиционируется ссылка, картинка внутри по ширине */
.z a.z-i { display: block; overflow: hidden; }
.z a.z-i > img { display: block; width: 100%; height: auto; }

/* подсказка (tooltip): кружок с иконкой, текст — при наведении или фокусе */
.z-tip { height: calc(var(--w) * var(--u)); border-radius: 50%; background: var(--bg, #000); cursor: pointer; }
.z-tip svg { display: block; width: 100%; height: 100%; }
.z-tip--img { border-radius: 0; background: center / contain no-repeat; }
.z-tip__text {
    position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 10; display: none; translate: -50% 0;
    width: calc(var(--tw, 220) * var(--u)); padding: calc(12 * var(--u)) calc(15 * var(--u));
    border-radius: calc(10 * var(--u)); background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .3);
    color: var(--c, #000); font-size: calc(var(--fs, 12) * var(--u)); line-height: 1.4; text-align: left; cursor: default;
}
.z-tip__text ul { margin: 0; padding-left: 1.2em; }
.z-tip:hover .z-tip__text, .z-tip:focus .z-tip__text { display: block; }

/* видео YouTube */
.z-v iframe { display: block; width: 100%; height: 100%; border: 0; }

/* галерея-слайдер (site.js [data-slider]): картинки вписаны, стрелки внутри; на телефоне — под галереей (data-under-m) */
.z-gal .slider__view { height: 100%; overflow: hidden; touch-action: pan-y; }
.z-gal .slider__track { display: flex; height: 100%; transition: transform .3s ease; }
.z-gal .slider__slide { flex: 0 0 100%; height: 100%; margin: 0; }
.z-gal .slider__slide img { display: block; width: 100%; height: 100%; object-fit: var(--fit, contain); user-select: none; -webkit-user-drag: none; }
.z-gal__arrow {
    position: absolute; top: 50%; left: 20px; width: 30px; height: 30px; margin-top: -15px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: #e8e8e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 13'%3E%3Cpath d='M6 1 1 6.5 6 12' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / 7px 13px no-repeat;
}
.z-gal__arrow--next { left: auto; right: 20px; transform: scaleX(-1); }

/* блок только для телефона / только для десктопа (t-screenmax / t-screenmin в Tilda) */
@media (min-width: 960px) { .z-only-m { display: none; } }
@media (max-width: 959px) { .z-only-d { display: none; } }
/* лента шире экрана — прокручивается по горизонтали (в Tilda — перетаскиванием) */
.z-scroll { overflow-x: auto; scrollbar-width: none; }
.z-scroll::-webkit-scrollbar { display: none; }

@media (max-width: 959px) {
    .z { border-top-width: calc(var(--ptm, var(--pt, 0)) * 1px); border-bottom-width: calc(var(--pbm, var(--pb, 0)) * 1px); }
    .z { --u: min(calc(var(--vw, 1vw) * 100 / 320), 1.6px); --gx: 160; height: calc(var(--hm) * var(--u)); height: round(down, calc(var(--hm) * var(--u)), 1px); background-color: var(--zbgm, var(--zbg, transparent)); }
    .z[style*="--zbgim:none"] { background-image: none !important; }
    .z--gridm { --u: 1px; }
    .z > *, .z-g > .z-g, .z-g--abs > * { left: calc(50% + (var(--xm) - var(--gx)) * var(--u)); top: calc(var(--ym) * var(--u)); width: calc(var(--wm) * var(--u)); }
    .z-g.z-g--abs > * { left: calc(var(--xm) * var(--u)); }
    .z-t[style*="--hh:"] { min-height: 0; }
    .z [style*="--hhm:"] { height: calc(var(--hhm) * var(--u)); }
    .z-tip { height: calc(var(--wm) * var(--u)); }
    .z-gal[data-under-m] { overflow: visible; }
    .z-gal[data-under-m] .z-gal__arrow { top: calc(100% + 10px); margin-top: 0; left: calc(50% - 35px); }
    .z-gal[data-under-m] .z-gal__arrow--next { left: calc(50% + 5px); right: auto; }
    .z > [style*="--ay:c"] { top: calc(var(--ym) * var(--u)); --tyv: 0; }
    .z > [style*="--aym:c"] { top: calc(50% + var(--ym) * var(--u)); --tyv: -50%; }
    .z-t[style*="--hhm:"] { height: auto; min-height: calc(var(--hhm) * var(--u)); }
    .z-t {
        font-size: calc(var(--fsm, var(--fs, 16)) * var(--u)); line-height: var(--lhm, var(--lh, normal));
        letter-spacing: calc(var(--lsm, var(--ls, 0)) * var(--u)); font-weight: var(--fwm, var(--fw, 400));
        color: var(--cm, var(--c, #000)); opacity: var(--opm, var(--op, 1)); text-align: var(--tam, var(--ta, left));
        white-space: var(--wsm, var(--ws, normal));
    }
    .z-i { border-radius: calc(var(--rm, var(--r, 0)) * var(--u)); opacity: var(--opm, var(--op, 1)); transform: rotate(calc(var(--rotm, var(--rot, 0)) * 1deg)); }
    .z-s { border-radius: calc(var(--rm, var(--r, 0)) * var(--u)); opacity: var(--opm, var(--op, 1)); background-color: var(--bgm, var(--bg, transparent)); background-size: var(--bszm, var(--bsz, cover)); background-position: var(--bposm, var(--bpos, center)); }
    .z-b:has(.z-b__ic) { gap: calc(var(--gapm, var(--gap, 0)) * var(--u)); justify-content: var(--bjcm, var(--bjc, center)); }
    .z-b__ic { width: calc(var(--icwm, var(--icw, 20)) * var(--u)); }
    .z-b { text-align: var(--tam, var(--ta, center)); font-size: calc(var(--fsm, var(--fs, 14)) * var(--u)); line-height: var(--lhm, var(--lh, 1.55)); border-radius: calc(var(--rm, var(--r, 0)) * var(--u)); background: var(--bgm, var(--bg, transparent)); color: var(--cm, var(--c, #fff)); }
    .z-g { flex-direction: var(--dirm, var(--dir, row)); flex-wrap: var(--wrapm, var(--wrap, nowrap)); gap: calc(var(--gapm, var(--gap, 0)) * var(--u)); align-items: var(--aim, var(--ai, flex-start)); justify-content: var(--jcm, var(--jc, flex-start)); }
    .z-g[style*="--wrapm:"] { gap: calc(var(--rgapm, 0) * var(--u)) calc(var(--cgapm, 0) * var(--u)); }
    .z-g > .z-st { width: calc(var(--wm) * var(--u)); }
}