/**
 * Dresscode — вторая карточка: «Дресскод» (текст + палитра) и «Цветы».
 *
 * Значения из макета Figma (desktop 1440 / mobile 402).
 * Абзацы: ширина из макета, line-height 1.5 (решение пользователя, в макете 1.25).
 * Override-only относительно base.css.
 *
 * @package Wedding
 */

.dresscode {
    position: relative;
    margin-top: calc(246 / var(--vw-base) * 100vw);
}

/* --- Фоновые фото макета --- */

/*
 * Фон лежит под карточками целиком (z-index: -1), а не обрезан по зазору:
 * иначе в скруглённых углах карточек виден белый клин, а край фото обрывается линией.
 * Узел 316:228 (y 1395) заезжает под карточку welcome.
 * Нижний фон страницы выводит секция rsvp — он должен тянуться до карточки countdown.
 */
.dresscode__bg {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 100%;
}

.dresscode__bg.-top {
    top: calc(-372 / var(--vw-base) * 100vw);
    height: calc(497 / var(--vw-base) * 100vw);
}

/* Обёртка <picture> — inline, поэтому без display: block картинка не тянется на высоту. */
.dresscode__bg-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.dresscode__bg-img {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

/* --- Карточка --- */

/* На десктопе карточка без текстуры и градиента — только заливка (узел 316:233). */
.dresscode__card {
    position: relative;
    border: 0.5px solid var(--color-bg);
    border-radius: var(--radius-100);
    background: var(--color-card-bg);
    box-shadow: 0 calc(-4 / var(--vw-base) * 100vw) calc(6.5 / var(--vw-base) * 100vw) rgba(242, 243, 245, 0.4);
    overflow: hidden;
}

.dresscode__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: var(--space-20);
    /* 25 и 14 из макета минус толщина рамок (1px у inner + 0.5px у карточки). */
    padding-top: calc(23.5 / var(--vw-base) * 100vw);
    padding-bottom: calc(12.5 / var(--vw-base) * 100vw);
    border: 1px solid var(--color-bg);
    border-radius: var(--radius-80);
    box-shadow: 0 calc(-4 / var(--vw-base) * 100vw) calc(6.5 / var(--vw-base) * 100vw) rgba(242, 243, 245, 0.4);
}

/* --- Вензели --- */
.dresscode__tracery {
    width: calc(210 / var(--vw-base) * 100vw);
    height: calc(63 / var(--vw-base) * 100vw);
    color: var(--color-bg);
}

.dresscode__tracery.-bottom {
    margin-top: calc(47 / var(--vw-base) * 100vw);
    transform: rotate(180deg);
}

/* --- Заголовки и тексты --- */
.dresscode__title {
    margin-top: calc(34 / var(--vw-base) * 100vw);
    font-size: var(--fs-40);
    line-height: var(--lh-125);
    text-align: center;
}

.dresscode__title.-flowers {
    margin-top: calc(32.24 / var(--vw-base) * 100vw);
}

.dresscode__text {
    width: calc(800 / var(--vw-base) * 100vw);
    margin-top: var(--space-10);
    font-size: var(--fs-16);
    line-height: var(--lh-150);
    text-align: center;
}

.dresscode__text.-flowers {
    font-size: var(--fs-14);
}

.dresscode__text p:last-child {
    margin-bottom: 0;
}

/* --- Палитра свадьбы: 8 кружков с нахлёстом --- */
.dresscode__colors {
    display: flex;
    justify-content: center;
    margin-top: var(--space-10);
}

.dresscode__color {
    flex-shrink: 0;
    width: calc(56.7584 / var(--vw-base) * 100vw);
    height: calc(56.7584 / var(--vw-base) * 100vw);
    border-radius: 50%;
}

/* Каждый следующий кружок заходит на предыдущий (в макете нахлёст 5px). */
.dresscode__color + .dresscode__color {
    margin-left: calc(-5 / var(--vw-base) * 100vw);
}

.dresscode__color:nth-child(1) {
    background: var(--color-dress-1);
}

.dresscode__color:nth-child(2) {
    background: var(--color-dress-2);
}

.dresscode__color:nth-child(3) {
    background: var(--color-dress-3);
}

.dresscode__color:nth-child(4) {
    background: var(--color-dress-4);
}

.dresscode__color:nth-child(5) {
    background: var(--color-dress-5);
}

.dresscode__color:nth-child(6) {
    background: var(--color-dress-6);
}

/* Белый кружок сливается с фоном карточки — обводка (в макете её нет). */
.dresscode__color:nth-child(7) {
    border: 1px solid var(--color-divider);
    background: var(--color-dress-7);
}

.dresscode__color:nth-child(8) {
    background: var(--color-dress-8);
}

/* --- Мобильная версия --- */
@media (max-width: 767px) {
    .dresscode {
        margin-top: calc(141 / var(--vw-base) * 100vw);
    }

    /*
     * Жемчужина-декор (узел 59:95). Лежит поверх фона карточки, но под её контентом
     * (z-index 1 у .dresscode__inner перебивает его, т.к. он позже в дереве).
     * X в метаданных зеркальный (как у нижнего вензеля): visual left = 60 − 130.
     */
    .dresscode::before {
        position: absolute;
        top: calc(256 / var(--vw-base) * 100vw);
        left: calc(-70 / var(--vw-base) * 100vw);
        z-index: 2;
        width: calc(130 / var(--vw-base) * 100vw);
        height: calc(130 / var(--vw-base) * 100vw);
        content: "";
        background: url("../../images/pearl-large.webp") center / cover no-repeat;
        filter: blur(calc(3.1 / var(--vw-base) * 100vw));
    }

    /* Мобильный фон — узел 332:5 (y 1509). */
    .dresscode__bg.-top {
        top: calc(-342 / var(--vw-base) * 100vw);
        height: calc(524 / var(--vw-base) * 100vw);
    }

    .dresscode__card {
        border-radius: var(--radius-201);
    }

    /* Текстура карточки есть только на мобильном (узел 59:77, opacity 0.20).
       Фоном в медиазапросе, а не <img>: на десктопе файл не запрашивается. */
    .dresscode__card::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: "";
        background: url("../../images/dresscode-card-texture.webp") center / cover no-repeat;
        opacity: 0.2;
    }

    .dresscode__inner {
        margin: calc(13 / var(--vw-base) * 100vw) var(--space-16);
        /* 41 и 45 из макета минус толщина рамок (см. десктоп). */
        padding-top: calc(39.5 / var(--vw-base) * 100vw);
        padding-bottom: calc(43.5 / var(--vw-base) * 100vw);
        border-radius: var(--radius-201);
    }

    .dresscode__tracery.-bottom {
        margin-top: calc(42.5 / var(--vw-base) * 100vw);
    }

    .dresscode__title {
        margin-top: calc(15 / var(--vw-base) * 100vw);
        font-size: var(--fs-32);
    }

    .dresscode__title.-flowers {
        margin-top: calc(53.24 / var(--vw-base) * 100vw);
    }

    .dresscode__text {
        width: calc(338 / var(--vw-base) * 100vw);
        font-size: var(--fs-14);
    }

    .dresscode__colors {
        margin-top: calc(24.5 / var(--vw-base) * 100vw);
    }

    .dresscode__color + .dresscode__color {
        margin-left: calc(-16.581 / var(--vw-base) * 100vw);
    }
}