/* ==========================================================================
   Блок: 2 — Решения по задачам
   Figma: 48:880   — десктоп 1440 × 910
          270:3003 — мобильный 375 × 756
   ========================================================================== */

.solutions {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
}

/* Декоративный узор из ромбов, прижат к правому краю и повёрнут на 180° */
.solutions__pattern {
    position: absolute;
    top: -33px;
    right: calc(-104.5px + var(--container-offset));
    width: 803.59px;
    height: 396.99px;
    transform: rotate(180deg);
    pointer-events: none;
}

.solutions__pattern img {
    width: 100%;
    height: 100%;
}

.solutions__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 56px;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

.solutions__list {
    display: flex;
    gap: 24px;
    width: 100%;
}

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

.solution-card {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: space-between;
    height: 480px;
    padding: 16px;
    overflow: hidden;
}

/* Фото. Кадрирование задано в процентах от карточки — ровно как в Figma */
.solution-card__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.solution-card__bg img {
    position: absolute;
    max-width: none;
}

.solution-card--metal .solution-card__bg img {
    top: 0.08%;
    left: -9.11%;
    width: 109.2%;
    height: 144.69%;
}

.solution-card--concrete .solution-card__bg img {
    top: -10.93%;
    left: 0;
    width: 100%;
    height: 132.5%;
}

/* У третьей карточки под фото лежит почти чёрная заливка,
   а поверх — осветление на 3% */
.solution-card--wood .solution-card__bg {
    background-color: #000001;
}

.solution-card--wood .solution-card__bg img {
    top: 8.05%;
    left: 0;
    width: 100%;
    height: 132.5%;
}

.solution-card--wood .solution-card__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.03);
}

.solution-card__head {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 8px 16px 0;
}

.solution-card__dots {
    width: 44px;
    height: 12px;
}

.solution-card__title {
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-white);
}

.solution-card__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    height: 161px;
    padding: 16px;
    background-color: rgba(255, 255, 255, 0.01);
    -webkit-backdrop-filter: blur(60px);
    backdrop-filter: blur(60px);
}

.solution-card__text {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: var(--c-white);
}

/* В макете у кнопки внутри карточки боковые отступы 16px, а не 24px */
.solution-card__panel .btn {
    padding-left: 16px;
    padding-right: 16px;
}

/* --------------------------------------------------------------------------
   Планшет и мобильный: карточки превращаются в горизонтальную ленту,
   как в мобильном макете (312 × 353, шаг 12px, лента шире экрана)
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .solutions__list {
        /* лента выходит за поля контейнера, чтобы карточки
           «уезжали» под край экрана, как в макете */
        align-self: stretch;
        width: auto;
        gap: 12px;
        margin: 0 calc(-1 * var(--container-pad));
        padding: 0 var(--container-pad);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* иначе прилипание «съедает» левое поле и первая карточка
           встаёт вплотную к краю экрана */
        scroll-padding: 0 var(--container-pad);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .solutions__list::-webkit-scrollbar {
        display: none;
    }

    .solution-card {
        flex: 0 0 312px;
        height: 353px;
        scroll-snap-align: start;
    }
}

@media (max-width: 767px) {
    .solutions {
        padding: 80px 0;
    }

    .solutions__inner {
        gap: 32px;
    }
}