/* ========================================
   БЛОКИ ПРЕИМУЩЕСТВ v2 — главная (ТЗ 42a, B-081)
   Два шаблона из макета (Frame 24, 1920 × 720; моб. Phone, 393):
     .adv-slider  — слайдер «центр + края соседних» (блоки 1, 4, 8), фон — палитра баннеров v2 (--ng-promo-*, banners.css);
     .adv-collage — коллаж «три фото + список + иконка + дуга» (2, 5, 7, 9), зеркало — .adv-collage--reverse (3, 6, 10).
   Контент (заголовок, пункты, <img> фото и иконок) — в паттерне «Преимущества v2»; здесь — только классы.
   Число пунктов, слайдов, длина текста, пропорции фото — свободные (фото — object-fit: cover).
   Пропорции макета — от ширины контента: u = контент / 1719 (зона коллажа в макете, отчёт ТЗ 42, п. 4.1).
   ======================================== */

.adv-slider,
.adv-collage {
    --ng-adv-radius:      18px;                             /* = скругление фото баннеров v2 (banners.css:404, 569) */
    --ng-adv-radius-m:    12px;                             /* моб. фото коллажа (П3 — 12, решение Евгения) */
    --ng-adv-title-align: center;                           /* П1 — по центру, как макет (решение Евгения) */
    position: relative;
    overflow: hidden;                                       /* дуга и края соседних слайдов — до края окна */
    container-type: inline-size;                            /* cqw = ширина секции (окна) */
    font-family: 'Montserrat', Arial, sans-serif;
}

/* Заголовок блока: 36 / 44, 600 (1d; макет — 500), капс — CSS (в разметке обычный регистр); 24 / 29 на 375 */
.adv__title {
    margin: 0;
    font-size: var(--ng-sec-title-fs, clamp(1.5rem, 1.318rem + 0.7767vw, 2.25rem)); /* ТЗ 44: общий токен заголовков секций (sections.css :root) */
    font-weight: 600;                                       /* Montserrat переменный 100–900 (style.css:15) — 600 настоящее, не синтез */
    line-height: 1.2222;
    text-transform: uppercase;
    text-align: var(--ng-adv-title-align);
    text-wrap: balance;
}

/* ---------- Слайдер ---------- */
.adv-slider {
    --ng-adv-slide-w: min(44cqw, 845px);                    /* центральный кадр 845 при 1920 */
    padding: var(--ng-sec-pt, 64px) 0 var(--ng-sec-pb, 64px);
    background: linear-gradient(180deg, var(--ng-promo-from, var(--primary-color, #0d3c63)) 0%, var(--ng-promo-to, var(--primary-color, #0d3c63)) var(--ng-promo-stop, 100%));
    color: #ffffff;
}

/* ≥ 1024 × 560: блок не выше экрана под шапкой — кадр ужимается (как --ng-promo-h, D-076 п. 6) */
@media (min-width: 1024px) and (min-height: 560px) {
    .adv-slider {
        --ng-adv-slide-w: min(44cqw, 845px, calc((100svh - var(--ng-hdr-height, 62px) - 250px) * 845 / 480));
    }
}

.adv-slider .adv__title {
    margin-bottom: var(--ng-sec-title-gap, 40px);
    color: #ffffff;
}

.adv-slider__swiper {
    overflow: hidden;
}

.adv-slider__swiper .swiper-slide {
    width: var(--ng-adv-slide-w);
    opacity: 0.4;                                           /* края соседних — прозрачность, без scale (готча loop) */
    transition: opacity 0.4s ease;
}

.adv-slider__swiper .swiper-slide-active {
    opacity: 1;
}

.adv-slider__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 845 / 480;
    object-fit: cover;
    border-radius: 0 var(--ng-adv-radius);                  /* диагональ верх-право / низ-лево, как баннеры v2 */
}

/* Стрелки: контур 2 px, Ø 63, в промежутках между кадрами (макет x 413 / 1444); hover — как .banner-btn */
.adv-slider__nav {
    position: absolute;
    z-index: 2;
    top: calc(var(--ng-adv-slide-w) * 480 / 845 / 2);       /* середина кадра */
    width: clamp(48px, 3.28cqw, 63px);
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.adv-slider__nav--prev { left: calc(50% - var(--ng-adv-slide-w) / 2 - 4.57cqw); }   /* середина зазора 9,14 % */
.adv-slider__nav--next { left: calc(50% + var(--ng-adv-slide-w) / 2 + 4.57cqw); }

.adv-slider__nav::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 27%;
    aspect-ratio: 1;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translate(-65%, -50%) rotate(45deg);         /* шеврон вправо */
}

.adv-slider__nav--prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

.adv-slider__nav:hover,
.adv-slider__nav:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, calc(-50% - 2px));
}

.adv-slider__nav:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.adv-slider__nav.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}

/* Точки — как «Акции» v2 (banners.css:421–433): 13 px, кремовые, неактивные 0,4 */
.adv-slider__dots {
    display: flex;
    justify-content: center;
    gap: 13px;
    margin-top: clamp(16px, 1.25cqw, 24px);
    line-height: 0;
}

.adv-slider .adv-slider__dots .swiper-pagination-bullet {
    width: 13px;
    height: 13px;
    margin: 0 !important;                                   /* Swiper ставит поля точкам */
    background: #FBF8EF !important;                         /* перебить глобальные точки (custom.css, sections.css) */
    opacity: 0.4 !important;
    box-shadow: none !important;
    transform: none !important;
}

.adv-slider .adv-slider__dots .swiper-pagination-bullet-active {
    opacity: 1 !important;
}

.adv-slider .adv-slider__dots .swiper-pagination-bullet {
    cursor: pointer;                                        /* точки — кнопки (adv-blocks.js) */
}

.adv-slider .adv-slider__dots .swiper-pagination-bullet:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

@media (max-width: 767.98px) {
    .adv-slider {
        --ng-adv-slide-w: 72cqw;                            /* моб. кадр 284 из 393, края соседних видны */
    }

    .adv-slider__img {
        aspect-ratio: 284 / 186;
    }

    .adv-slider__nav {
        display: none;                                      /* моб.: свайп + точки */
    }

    .adv-slider .adv-slider__dots .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
    }

    .adv-slider__dots {
        gap: 10px;
    }
}

/* ---------- Коллаж ---------- */
.adv-collage {
    --ng-adv-arc: color-mix(in srgb, var(--ng-sec-accent, #0d3c63) 8%, transparent);   /* П2б — акцент × 0,08 (решение Евгения) */
    background: var(--ng-sec-bg, #f7fafc);
    color: var(--ng-sec-text, #0d3c63);
}

.adv-collage .adv__title {
    position: relative;
    z-index: 1;                                             /* над дугой */
    color: var(--ng-sec-heading, #0d3c63);
}

.adv-collage__inner {
    --ng-adv-li-fs: clamp(16px, calc(10px + 0.5208cqw), 20px);   /* пункты: 20 / 24 при 1920, 17 при 1366, 16 ниже */
    position: relative;
}

/* Дуга-декор: SVG Евгения (assets/images/adv/duga.svg) маской, цвет — переменная; зеркало — transform */
.adv-collage__inner::before {
    content: '';
    position: absolute;
    z-index: 0;
    background: var(--ng-adv-arc);
    -webkit-mask: url("../images/adv/duga.svg") center / 100% 100% no-repeat;
            mask: url("../images/adv/duga.svg") center / 100% 100% no-repeat;
    pointer-events: none;
}

.adv-collage__media {
    position: relative;
    z-index: 1;
}

.adv-collage__img {
    position: absolute;
    display: block;
    object-fit: cover;
    border-radius: 0 var(--ng-adv-radius);                  /* направление не зеркалится */
}

/* Видео: тёмная полоса по правой грани в Chromium / Яндекс — окно дробное (373,141 px), кадр видеослоя прилипает
   к целым пикселям, край слоя тёмный. Срез 1 px справа и снизу, скругление то же (ТЗ 42b) */
.adv-collage__video {
    clip-path: inset(0 1px 1px 0 round 0 var(--ng-adv-radius));
}

.adv-collage__list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ng-sec-title-gap, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ng-adv-li-fs);
    font-weight: 400;
    line-height: 1.2;
}

.adv-collage__list li {
    position: relative;
    padding-left: calc(1.25em + 21px);                     /* кольцо 25 + 21 = текст на 46 от маркера */
}

/* Маркер — кольцо, контур 2 px, цвет акцента (одинаково на всех ширинах) */
.adv-collage__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc((1.2em - 1.25em) / 2);
    width: 1.25em;
    aspect-ratio: 1;
    box-sizing: border-box;
    border: 2px solid var(--ng-sec-accent, #0d3c63);
    border-radius: 50%;
}

.adv-collage__icon {
    position: absolute;
    z-index: 1;
    width: auto;
    pointer-events: none;
}

/* ≥ 1200: композиция макета 1920 × 720 — фото по нижней кромке, список справа (зеркало — слева) */
@media (min-width: 1200px) {
    .adv-collage__inner {
        /* u = контент / 1719; ограничитель — блок 720 u не выше экрана под шапкой */
        --u: min(calc(min(100cqw - 2 * var(--ng-sec-gutter, 12px), 1576px) / 1719), calc((100svh - var(--ng-hdr-height, 62px)) / 720));
        display: grid;
        grid-template-columns: calc(991 * var(--u)) calc(75 * var(--u)) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        justify-content: center;                            /* группа «фото + список» — по центру контейнера */
        --g: calc(var(--bs-gutter-x, 1.5rem) * .5);         /* поле .container (Bootstrap) */
        padding-top: var(--ng-sec-pt, 64px);                /* 1b (B-053, D-064): поля секции — ½ M; низ — по нижнему фото */
        padding-bottom: var(--ng-sec-pb, 64px);
    }

    /* 1200–1599 (контент < 1576): текст списка не уже 28 em — короткий пункт (~27,4 em) в одну строку; фото ужимаются на остаток.
       Ширина колонки текста = 28 em + маркер (1,25 em + 21 px); 1066 u = фото 991 + зазор 75 */
    @media (max-width: 1599.98px) {
        .adv-collage__inner {
            --u: min(calc(min(100cqw - 2 * var(--ng-sec-gutter, 12px), 1576px) / 1719),
                     calc((min(100cqw - 2 * var(--ng-sec-gutter, 12px), 1576px) - 29.25 * var(--ng-adv-li-fs) - 21px) / 1066),
                     calc((100svh - var(--ng-hdr-height, 62px)) / 720));
        }
    }

    .adv-collage .adv__title {
        grid-column: 1 / -1;
        grid-row: 1;                                        /* 1c: список занимает строки 1–2 — заголовок держим в 1-й явно */
        margin-bottom: var(--ng-sec-title-gap, 40px);       /* 1b: заголовок → фото — токен (было 53 u макета) */
        padding-inline: calc(292 * var(--u));               /* поле заголовка макета 1134 из 1719: длинный — переносится, не заходит на иконку */
    }

    .adv-collage__media {
        grid-column: 1;
        grid-row: 2;
        align-self: start;                                  /* 1c: сразу под заголовком; список длиннее фото — низ блока по списку */
        height: calc(543 * var(--u));
    }

    /* Порядок фото макета: малое нижнее (Frame 7) · большое (Frame 6) · малое верхнее (Frame 8) */
    .adv-collage__img--main { left: calc(292 * var(--u)); bottom: 0; width: calc(407 * var(--u)); height: calc(543 * var(--u)); }
    .adv-collage__img--low  { left: 0;                    bottom: 0; width: calc(262 * var(--u)); height: calc(450 * var(--u)); }
    .adv-collage__img--high { left: calc(729 * var(--u)); top: 0;    width: calc(262 * var(--u)); height: calc(450 * var(--u)); }

    .adv-collage__list {
        grid-column: 3;
        grid-row: 1 / -1;
        align-self: start;                                  /* 1c: от верха, а не по центру ряда фото — короткий список не «проваливается» */
        margin-top: calc(154 * var(--u) + var(--ng-sec-title-gap, 40px));   /* низ иконки (4 + 150 u от верха контента) → первый пункт = токен */
    }

    .adv-collage__icon {
        top: calc(var(--ng-sec-pt, 64px) + 4 * var(--u));  /* макет: на 4 u ниже верха заголовка (84 при заголовке 80) */
        right: calc(var(--g) + 122 * var(--u));             /* --g — поле .container: absolute считается от края поля */
        height: calc(150 * var(--u));
    }

    .adv-collage__inner::before {                           /* 1342 × 500, от иконки (−432, −329) по макету */
        left: calc(var(--g) + 1025 * var(--u));
        top: calc(var(--ng-sec-pt, 64px) - 325 * var(--u));  /* от иконки −329 u, как раньше (−245 при заголовке 80) */
        width: calc(1342 * var(--u));
        height: calc(500 * var(--u));
    }

    /* Зеркало: список слева, фото справа (порядок фото внутри — тот же), иконка и дуга — отражены */
    .adv-collage--reverse .adv-collage__inner {
        grid-template-columns: minmax(0, 1fr) calc(75 * var(--u)) calc(991 * var(--u));
    }

    .adv-collage--reverse .adv-collage__media { grid-column: 3; }
    .adv-collage--reverse .adv-collage__list  { grid-column: 1; }

    .adv-collage--reverse .adv-collage__icon {
        right: auto;
        left: calc(var(--g) + 64 * var(--u));               /* макет 3, 6, 10: 61–67 от маркеров списка */
    }

    .adv-collage--reverse .adv-collage__inner::before {
        left: calc(var(--g) - 701 * var(--u));              /* макет: иконка − 765 (отражение −432 от иконки 140) */
        transform: scaleX(-1);
    }

    /* 1e: коллаж сразу после коллажа (3, 6, 7, 10) — дуга выходит вверх на ½ M (поле снизу предыдущего), до низа его фото,
       как в макете. Секция режет только по горизонтали, верх дуги — clip-path на −pb от кромки (секция без полей, .container — от её верха).
       После слайдера — срез по своей кромке (overflow: hidden выше) */
    @supports (overflow: clip) {
        .adv-collage + .adv-collage {
            overflow-x: clip;
            overflow-y: visible;
        }

        .adv-collage + .adv-collage .adv-collage__inner::before {
            clip-path: inset(max(0px, calc(325 * var(--u) - var(--ng-sec-pt, 64px) - var(--ng-sec-pb, 64px))) 0 0 0);
        }
    }
}

/* < 1200: мобильная раскладка макета (393): фото сверху, иконка с дугой, заголовок, список; m = зона / 393 */
@media (max-width: 1199.98px) {
    .adv-collage__inner {
        --m: calc(min(100cqw, 600px) / 393);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: var(--ng-sec-pt, 32px);
        padding-bottom: var(--ng-sec-pb, 32px);
    }

    .adv-collage__media {
        order: -1;
        width: calc(336 * var(--m));
        height: calc(170 * var(--m));
        flex-shrink: 0;
    }

    .adv-collage__img { border-radius: 0 var(--ng-adv-radius-m); }
    .adv-collage__video { clip-path: inset(0 1px 1px 0 round 0 var(--ng-adv-radius-m)); }
    /* 1f, проба Б: видео шире фото, окно = кадр ролика 720 × 962 (169 m → 126 m), фото по остатку; зазоры 8 и 9 m */
    .adv-collage__img--low  { left: 0;                    bottom: 0; width: calc(96 * var(--m));  height: calc(145 * var(--m)); }
    .adv-collage__img--main { left: calc(104 * var(--m)); bottom: 0; width: calc(126 * var(--m)); height: calc(169 * var(--m)); }
    .adv-collage__img--high { left: calc(239 * var(--m)); top: 0;    width: calc(97 * var(--m));  height: calc(144 * var(--m)); }

    .adv-collage .adv__title {
        width: 100%;
        margin-top: calc(94 * var(--m));
        margin-bottom: var(--ng-sec-title-gap, 24px);
    }

    .adv-collage__list {
        width: 100%;
        max-width: calc(300 * var(--m));
        font-size: 14px;                                    /* 14 / 18 (макет 12 / 15 — ниже минимума сайта) */
        line-height: 18px;
    }

    .adv-collage__list li::before {
        top: 4px;                                           /* (18 − 10) / 2 */
        width: 10px;                                        /* кольцо 10 px макета */
    }

    .adv-collage__list li {
        padding-left: 24px;
    }

    /* 768–1199: та же раскладка крупнее (до 600 шириной) — пункты 16 / 20, основной текст сайта */
    @media (min-width: 768px) {
        .adv-collage__list {
            font-size: 16px;
            line-height: 20px;
        }

        .adv-collage__list li::before {
            top: 5px;                                       /* (20 − 10) / 2 */
        }
    }

    .adv-collage__icon {                                    /* 60 × 66 у правого края фото (макет x 266, y 201) */
        top: calc(var(--ng-sec-pt, 32px) + 158 * var(--m));
        left: calc(50% + 75 * var(--m));
        height: calc(66 * var(--m));
    }

    .adv-collage__inner::before {                           /* 440 × 164 (макет x 86, y 143) */
        top: calc(var(--ng-sec-pt, 32px) + 100 * var(--m));
        left: calc(50% - 105 * var(--m));
        width: calc(440 * var(--m));
        height: calc(164 * var(--m));
    }

    /* 768–1199: дуга — правый конец за правым краем секции на 140 m (как на мобиле), а не у колонки 600; размер прежний.
       50 % — середина .container, 50cqw — половина секции. После базового правила дуги — перебивает его */
    @media (min-width: 768px) {
        .adv-collage__inner::before {
            left: calc(50% + 50cqw - 300 * var(--m));       /* 440 − 140 */
        }
    }
}