/*
 * Creative runtime: общий CSS баннеров — сайт, превью, запекание и холст редактора.
 * Разметку выдаёт services/document/CreativeRenderer.php (и тот же компонент в редакторе).
 * Значения слоя — числа в CSS-переменных: координаты в px артборда, кегль и плашки — в u.
 * --crv-px — 1 px артборда, --crv-u — 1 u; оба в cqw, поэтому баннер масштабируется пропорционально.
 * Подгонка кегля (.crv-fit, .crv-ifit, .crv-badge): меньшее из кегля стиля и «рамка / ширина строки в em»
 * (--fitw — ширина рамки, --fitn — строка в em; по высоте — --fith и --fitl), ширину строки считает рендер.
 */
.crv {
    position: relative;
    width: 100%;
    overflow: hidden;
    container-type: inline-size;
    background: var(--crv-bg, transparent);
}

.crv-l {
    position: absolute;
    box-sizing: border-box;
    left: calc(var(--x) * var(--crv-px));
    top: calc(var(--y) * var(--crv-px));
    width: calc(var(--w) * var(--crv-px));
    height: calc(var(--h) * var(--crv-px));
    opacity: var(--o, 1);
    mix-blend-mode: var(--mb, normal);
    transform: rotate(calc(var(--r, 0) * 1deg));
    filter: var(--sh, none);
}

.crv-raster {
    overflow: hidden;
    border-radius: calc(var(--rad, 0) * var(--crv-px));
}

/* .crv в селекторе — сильнее стилей сайта вида «.место img { height: auto }» */
.crv .crv-raster img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
}

.crv-shape {
    background: var(--fill, transparent);
    border-radius: calc(var(--rad, 0) * var(--crv-px));
    border: calc(var(--sw, 0) * var(--crv-px)) solid var(--sc, transparent);
}

.crv-ellipse {
    border-radius: 50%;
}

/* Фигура контуром: SVG на весь слой, viewBox — размер слоя в px артборда */
.crv-vector svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.crv-text {
    display: flex;
    flex-direction: column;
    justify-content: var(--jc, flex-start);
    margin: 0;
    padding: calc(var(--ppy, 0) * var(--crv-u)) calc(var(--ppx, 0) * var(--crv-u));
    background: var(--pf, transparent);
    border-radius: calc(var(--prad, 0) * var(--crv-u));
    font-family: var(--ff, Arial, sans-serif);
    font-weight: var(--fw, 400);
    font-style: var(--fst, normal);
    font-size: calc(var(--fs, 2) * var(--crv-u));
    line-height: var(--lh, 1.3);
    letter-spacing: calc(var(--ls, 0) * 1em);
    color: var(--c, #000);
    text-align: var(--ta, left);
    text-transform: var(--tt, none);
    text-decoration: var(--td, none);
    white-space: var(--ws, pre-line);
    text-wrap-style: var(--tws, auto);
    overflow-wrap: normal;
}

.crv-t {
    display: block;
    text-box: trim-both cap alphabetic;
}

.crv-fit {
    font-size: min(calc(var(--fs, 2) * var(--crv-u)), calc(var(--fitw) * var(--crv-px) / var(--fitn)), calc(var(--fith) * var(--crv-px) / var(--fitl)));
}

/* Блок текста: строки стопкой в подложке, подложка прижата к краю рамки (--jc — по вертикали, --ai — по горизонтали).
   Переменные строк и стикера — свои имена (--ipf, --bkr…): переменные CSS наследуются от блока и подложки. */
.crv-block {
    display: flex;
    flex-direction: column;
    justify-content: var(--jc, flex-start);
    align-items: var(--ai, flex-start);
}

.crv-bi {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: var(--ai, flex-start);
    max-width: 100%;
    padding: calc(var(--ppy, 0) * var(--crv-u)) calc((var(--ppx, 0) + var(--pxr, 0)) * var(--crv-u))
        calc(var(--ppy, 0) * var(--crv-u)) calc((var(--ppx, 0) + var(--pxl, 0)) * var(--crv-u));
    background: var(--pf, transparent);
    border-radius: calc(var(--prad, 0) * var(--crv-u));
    text-align: var(--ta, left);
}

.crv-bi--full {
    align-self: stretch;
}

.crv-bt {
    box-sizing: border-box;
    max-width: 100%;
    margin: calc(var(--mt, 0) * var(--crv-u)) 0 0;
    padding: calc(var(--ippy, 0) * var(--crv-u)) calc(var(--ippx, 0) * var(--crv-u));
    background: var(--ipf, transparent);
    border-radius: calc(var(--iprad, 0) * var(--crv-u));
    font-family: var(--ff, Arial, sans-serif);
    font-weight: var(--fw, 400);
    font-style: var(--fst, normal);
    font-size: calc(var(--fs, 2) * var(--crv-u));
    line-height: var(--lh, 1.3);
    letter-spacing: calc(var(--ls, 0) * 1em);
    color: var(--c, #000);
    text-transform: var(--tt, none);
    text-decoration: var(--td, none);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.3em;
    white-space: var(--ws, pre-line);
    text-wrap-style: var(--tws, auto);
    overflow-wrap: normal;
}

/* В блоке строки — полной высоты: обрезка по прописным (.crv-t) срезала бы выносные элементы и отступы между строками */
.crv-bt > .crv-t {
    text-box: normal;
}

.crv-bt.crv-ifit {
    font-size: min(calc(var(--fs, 2) * var(--crv-u)), calc(var(--fitw) * var(--crv-px) / var(--fitn)));
}

a.crv-bt,
a.crv-bt:hover,
a.crv-bt:focus {
    color: var(--c, #000);
    text-decoration: var(--td, none);
}

.crv-br {
    flex: none;
    margin-top: calc(var(--mt, 0) * var(--crv-u));
    width: calc(var(--rw, 6) * var(--crv-u));
    height: calc(var(--rh, 0.3) * var(--crv-u));
    background: var(--rc, currentColor);
}

/* Плашка: форма, значение и подпись; единица полей и подгонки --bu — px артборда (слой) или u (стикер в блоке) */
.crv-badge {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--bpt, 0) * var(--bu, var(--crv-px))) calc(var(--bpr, 0) * var(--bu, var(--crv-px)))
        calc(var(--bpb, 0) * var(--bu, var(--crv-px))) calc(var(--bpl, 0) * var(--bu, var(--crv-px)));
    font-family: var(--ff, Arial, sans-serif);
    font-weight: var(--fw, 700);
    font-style: var(--fst, normal);
    font-size: min(calc(var(--fs, 2) * var(--crv-u)), calc(var(--fitw) * var(--bu, var(--crv-px)) / var(--fitn)),
        calc(var(--fith) * var(--bu, var(--crv-px)) / var(--fitl)));
    line-height: var(--lh, 1);
    letter-spacing: calc(var(--ls, 0) * 1em);
    color: var(--c, #fff);
    text-transform: var(--tt, none);
    text-decoration: var(--td, none);
    white-space: pre;
}

.crv-badge--circle,
.crv-badge--pill,
.crv-badge--rect {
    background: var(--bf, transparent);
    border: calc(var(--bsw, 0) * var(--crv-u)) solid var(--bsc, transparent);
}

.crv-badge--circle {
    border-radius: 50%;
}

.crv-badge--pill {
    border-radius: 9999px;
}

.crv-badge--rect {
    border-radius: calc(var(--brad, 0) * var(--crv-u));
}

.crv-badge > svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.crv-bv,
.crv-bl {
    position: relative;
    display: block;
}

.crv-bl {
    font-family: var(--lff, inherit);
    font-weight: var(--lfw, inherit);
    font-style: var(--lfst, normal);
    font-size: calc(var(--lk, 0.32) * 1em);
    line-height: 1.1;
    letter-spacing: calc(var(--lls, 0) * 1em);
    color: var(--lc, inherit);
    text-transform: var(--ltt, none);
    text-decoration: var(--ltd, none);
}

.crv-badge--below > .crv-bv {
    margin-bottom: 0.15em;
}

.crv-badge--above {
    flex-direction: column-reverse;
}

.crv-badge--above > .crv-bv {
    margin-top: 0.15em;
}

.crv-badge--after {
    flex-direction: row;
    align-items: baseline;
}

.crv-badge--after > .crv-bv {
    margin-right: 0.3em;
}

/* Стикер в углу подложки блока: размеры и сдвиг наружу — в u */
.crv-bk {
    --bu: var(--crv-u);
    position: absolute;
    width: calc(var(--bkw, 16) * var(--crv-u));
    height: calc(var(--bkh, 16) * var(--crv-u));
    transform: rotate(calc(var(--bkr, 0) * 1deg));
}

.crv-bk--tr {
    right: calc(var(--bkx, 0) * -1 * var(--crv-u));
    top: calc(var(--bky, 0) * -1 * var(--crv-u));
}

.crv-bk--tl {
    left: calc(var(--bkx, 0) * -1 * var(--crv-u));
    top: calc(var(--bky, 0) * -1 * var(--crv-u));
}

.crv-bk--br {
    right: calc(var(--bkx, 0) * -1 * var(--crv-u));
    bottom: calc(var(--bky, 0) * -1 * var(--crv-u));
}

.crv-bk--bl {
    left: calc(var(--bkx, 0) * -1 * var(--crv-u));
    bottom: calc(var(--bky, 0) * -1 * var(--crv-u));
}

a.crv-text,
a.crv-text:hover,
a.crv-text:focus {
    color: var(--c, #000);
    text-decoration: var(--td, none);
}

/* Баннер на сайте: широкий и узкий вариант (CreativeRenderService::renderSite), узкий — до 575.98px */
.crv-set--split > .crv-v--narrow {
    display: none;
}

@media (max-width: 575.98px) {
    .crv-set--split > .crv-v--wide {
        display: none;
    }

    .crv-set--split > .crv-v--narrow {
        display: block;
    }
}