/*---------------
    Solutions
---------------*/
.solutions
{
    .filter
    {
        margin-bottom: var(--block_padding_s);


        &.l_m
        {
            margin-bottom: var(--block_padding_l);
        }


        .row
        {
            display: flex;
            align-content: stretch;
            align-items: stretch;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: var(--inner_gap_xs);
        }


        a
        {
            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--inner_gap_xxs);

            min-height: 37px;
            padding-inline: var(--block_padding);

            font-size: var(--font_size_xs);
            font-weight: 600;

            transition: .2s linear;
            text-align: center;
            text-decoration: none;

            color: currentColor;
            border: 1px solid #d1dfec;


            .icon
            {
                display: block;

                width: 4px;

                transition: color .2s linear;
                transform: translateY(1px);

                color: var(--primary_color);

                aspect-ratio: 1 / 1.5;
            }


            @media (hover: hover) and (pointer: fine)
            {
                &:hover
                {
                    color: var(--primary_color);
                }
            }


            &.active
            {
                color: var(--light_color);
                background: var(--primary_color);


                .icon
                {
                    color: currentColor;
                }
            }
        }
    }


    .list
    {
        display: flex;
        flex-direction: column;
        gap: var(--inner_gap);
    }


    .solution
    {
        position: relative;

        overflow: hidden;

        background: var(--bg_dark);

        clip-path: var(--clip_path_double_corners);


        .image
        {
            position: absolute;
            z-index: 1;
            inset: 0;

            display: block;

            pointer-events: none;


            &:before
            {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;

                display: block;

                width: 900px;
                max-width: 100%;

                content: '';

                background: linear-gradient(270deg, rgba(24, 24, 24, .85) 66%, rgba(24, 24, 24, .00) 100%);
            }
        }


        .info
        {
            position: relative;
            z-index: 3;

            display: flex;
            flex-direction: column;

            width: 695px;
            max-width: 100%;
            min-height: 407px;
            margin-left: auto;
            padding: var(--block_padding);

            color: var(--light_color);
            border-left: 1px solid rgba(255,255,255, .3);
        }


        .name
        {
            display: flex;
            align-content: flex-end;
            align-items: flex-end;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: var(--inner_gap_s);



            a
            {
                display: inline-block;

                font-size: 30px;
                font-weight: 500;
                line-height: 123.333%;

                vertical-align: top;
                text-decoration: none;

                color: currentColor;
                transition: color .2s linear;

                @media (hover: hover) and (pointer: fine)
                {
                    &:hover
                    {
                        color: var(--primary_color);
                    }
                }
            }


            .count
            {
                margin-bottom: var(--inner_gap_xxs);

                font-size: var(--font_size_s);
                font-weight: 600;

                color: var(--primary_color);
            }
        }


        .divider
        {
            width: calc(100% + var(--block_padding) * 2);
            height: 1px;
            margin-block: var(--inner_gap_l) var(--block_padding_s);
            margin-inline: calc(var(--block_padding) * -1);

            opacity: .3;
            background: var(--bg_light);
        }


        .desc
        {
            width: 491px;
            max-width: 100%;
        }


        .features
        {
            display: flex;
            align-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: var(--inner_gap_xs);

            margin-top: var(--inner_gap);

            font-size: var(--font_size_xs);
            font-weight: 500;
            line-height: 141.667%;


            & > *
            {
                display: flex;
                align-content: center;
                align-items: center;
                flex-wrap: wrap;
                justify-content: center;
                gap: var(--inner_gap_xxs);

                padding-block: var(--inner_gap_xxs);
                padding-inline: var(--inner_gap_xs);

                border: 1px solid rgba(203, 203, 203, .3);
            }


            .icon
            {
                &,
                img
                {
                    display: block;
                }
            }
        }


        .btns
        {
            display: flex;
            align-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: var(--inner_gap);

            margin-top: var(--block_padding_s);


            .btn
            {
                display: flex;
                align-content: center;
                align-items: center;
                flex-wrap: wrap;
                justify-content: center;
                gap: var(--inner_gap_xxs);

                min-width: 180px;
                max-width: 100%;
                height: 60px;
                padding-inline: var(--block_padding_s);

                font-size: var(--font_size_xs);
                font-weight: 600;

                text-align: center;
                text-decoration: none;

                color: currentColor;


                &.primary
                {
                    transition: transform .2s linear;

                    background: var(--gradient_primary);

                    clip-path: var(--clip_path_double_corners_small);


                    @media (hover: hover) and (pointer: fine)
                    {
                        &:hover
                        {
                            transform: scale(1.1);
                        }
                    }
                }


                &.outlined
                {
                    transition: background .2s linear;

                    border: 1px solid rgba(209, 223, 236, .50);


                    @media (hover: hover) and (pointer: fine)
                    {
                        &:hover
                        {
                            background: rgba(255, 255, 255, .15);

                            backdrop-filter: blur(7.1px);
                        }
                    }
                }


                .icon
                {
                    display: block;

                    width: 5px;

                    transform: translateY(1px);

                    aspect-ratio: 1 / 1.5;
                }
            }
        }
    }
}



@media print,
(max-width: 1279px)
{
    .solutions
    {
        .solution
        {
            .image
            {
                &:before
                {
                    width: 800px;
                }
            }


            .info
            {
                width: 660px;
                min-height: 400px;
            }
        }
    }
}



@media print,
(max-width: 1023px)
{
    .solutions
    {
        .filter
        {
            &.l_m
            {
                margin-bottom: var(--block_padding);
            }


            .row
            {
                display: grid;
                overflow: auto;
                gap: var(--inner_gap_xs);

                width: calc(100% + var(--cont_padding_double));
                margin-block: 0;
                margin-inline: calc(var(--cont_padding) * -1);
                padding-inline: var(--cont_padding);

                grid-auto-flow: column;
                grid-auto-columns: max-content;
                scroll-padding: 0 var(--cont_padding);
                scroll-snap-type: x mandatory;
                scrollbar-color: transparent transparent;
                scrollbar-width: thin;


                &::-webkit-scrollbar
                {
                    display: none;

                    width: 0;
                    height: 0;

                    background-color: transparent;
                }


                &::-webkit-scrollbar-thumb
                {
                    background-color: transparent;
                }


                & > *
                {
                    width: auto;
                    margin: 0;

                    scroll-snap-align: start;
                }
            }


            a
            {
                padding-inline: var(--block_padding);
            }
        }


        .solution
        {
            padding-top: 225px;


            .image
            {
                &:before
                {
                    width: 100%;

                    background: linear-gradient(0deg, rgba(24, 24, 24, .85) 55.88%, rgba(24, 24, 24, .60) 78.15%, rgba(24, 24, 24, .00) 100%);
                }
            }


            .info
            {
                width: 100%;
                min-height: 0;

                border-left: none;
            }
        }
    }
}



@media (max-width: 767px)
{
    .solutions
    {
        .list
        {
            gap: var(--inner_gap_s);
        }


        .solution
        {
            margin-inline: calc(var(--cont_padding_half) * -1);
            padding-top: 235px;


            .info
            {
                padding: var(--block_padding_s);


                .name
                {
                    gap: var(--inner_gap_xs);

                    margin-bottom: var(--inner_gap);


                    a
                    {
                        font-size: 25px;
                    }
                }


                .divider
                {
                    display: none;
                }


                .btns
                {
                    gap: var(--inner_gap_s);


                    .btn
                    {
                        width: 100%;
                    }
                }
            }
        }
    }
}