/*
====================================================================

Front Page Section Frame

Общий каркас секций главной страницы: широкая контентная лента и
блок-на-экран для десктопа. Секции подключают базовые классы, а
собственный визуал (фон, отступы контента) остаётся в CSS блока.

Ширина ленты измерена на утверждённом референсе (FullHD 1920):
1494px = 77.8% вьюпорта, отступы ~213px с каждой стороны. Формула
ниже даёт ровно этот кап на широком десктопе и плавно сужается до
~90% на более узких десктопах/слабых ноутах. Мобильный (<= 768px)
в ленте не участвует — ширина по содержимому секции, как раньше.

Высота блока на десктопе — экран за вычетом навбара, содержимое
центрировано по вертикали; блоку разрешено быть выше экрана, если
контента больше (см. Услуги). На мобильном высота не форсируется.

ИСКЛЮЧЕНИЯ из ленты: футер и секция «Наш адрес» - у них узкая
лента (референс: 63% ~ 1200px), модификатор
.dd-front-section__inner--narrow ниже.

====================================================================
*/


.dd-front-section {
    position: relative;

    /*
     * -1px: секция подтягивается под срез над ней - субпиксельное
     * округление иначе оставляет светящуюся линию между клином и
     * блоком (парный нахлёст самих срезов - в блоке srезов ниже).
     */
    margin-top: -1px;
    padding: clamp(40px, 7vw, 96px) 20px;
}

.dd-front-section__inner {
    width: 100%;
}

@media (min-width: 769px) {

    .dd-front-section {
        display: flex;
        align-items: center;

        /* Минус высота среза: клин съедает верх следующего блока. */
        min-height: calc(100vh - var(--dd-navbar-height, 80px) - var(--dd-cut-height));
    }

    .dd-front-section__inner {
        width: min(90vw, 1494px);
        margin-inline: auto;
    }

    /* Узкая лента: «Наш адрес» и футер. */
    .dd-front-section__inner--narrow {
        width: min(90vw, 1200px);
    }

}


/* ================================================================
   Косые срезы между секциями (1в1 с референса)

   Механика: клин цвета ВЕРХНЕГО блока наезжает вниз на следующий
   (нижний блок держит верхний паддинг под клином), направление
   чередуется у каждого шва. Исключение - баннер: он лежит ПОД
   срезами с обеих сторон, поэтому снизу на него наезжает клин
   цвета НИЖНЕГО блока (модификатор --up).

   Геометрия с референса: высота диагонали 88px при 1905px ширины
   (4.6vw), направления швов сверху вниз: право, лево, право...

   Верхние блоки на высоту среза укорачиваются - см. min-height
   секции выше.
   ================================================================ */

:root {
    --dd-cut-height: clamp(36px, 4.6vw, 88px);
}

.dd-cut {
    position: relative;
    z-index: 2;

    height: var(--dd-cut-height);
    pointer-events: none;
}

.dd-cut::before {
    content: "";
    position: absolute;
    inset: 0;

    background: var(--dd-cut-color, var(--dd-background));
}

/*
 * Клин продлён на 2px в сторону блока-родителя: браузер сглаживает
 * кромки clip-path, и полупрозрачный ряд пикселей на плоской кромке
 * пропускал цвет секции, лежащей ПОД срезом (тёмный подвал под
 * светлым клином - самый заметный случай). С продлением сглаженная
 * кромка ложится на сплошную заливку того же цвета и исчезает.
 */
.dd-cut--down::before {
    top: -2px;
}

.dd-cut--up::before {
    bottom: -2px;
}

/*
 * Обычный срез: клин верхнего блока свисает на следующий.
 * -1px сверху: субпиксельное округление оставляет светящийся
 * просвет между клином и его блоком - нахлёст в 1px его закрывает.
 */
.dd-cut--down {
    margin-top: -1px;
    margin-bottom: calc(-1 * var(--dd-cut-height));
}

/* Диагональ спускается вправо / влево. */
.dd-cut--down.dd-cut--right::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.dd-cut--down.dd-cut--left::before {
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Баннерный низ: клин нижнего блока наезжает вверх (-1px - тот же
   нахлёст против просвета, здесь родитель клина снизу). */
.dd-cut--up {
    margin-top: calc(-1 * var(--dd-cut-height));
    margin-bottom: -1px;
}

.dd-cut--up.dd-cut--right::before {
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.dd-cut--up.dd-cut--left::before {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Цвета клиньев - фоны секций. */
.dd-cut--teal {
    --dd-cut-color: var(--dd-sec-background);
}

.dd-cut--mint {
    --dd-cut-color: var(--dd-primary-light);
}

.dd-cut--light {
    --dd-cut-color: var(--dd-background);
}

.dd-cut--grey {
    --dd-cut-color: var(--dd-section-grey);
}