/*-------------
    Persons
-------------*/
.persons
{
    .block_head
    {
        &.no_m
        {
            padding-bottom: var(--inner_gap);
        }


        &.row
        {
            .col
            {
                width: 826px;
            }


            .desc
            {
                width: 620px;

                font-family: var(--font_family_tertiary);
            }
        }
    }


    .swiper
    {
        overflow: visible;

        --slidesPerView-0: auto;
        --spaceBetween-0: var(--inner_gap_xs);
        --slidesPerView-768: auto;
        --spaceBetween-768: var(--inner_gap_s);
        --slidesPerView-1280: 3;
        --spaceBetween-1280: var(--inner_gap_s);


        &:not(.swiper-initialized)
        {
            .swiper-wrapper
            {
                gap: var(--spaceBetween-1280);
            }


            .swiper-slide
            {
                width: calc(100% / var(--slidesPerView-1280) - var(--spaceBetween-1280));
            }
        }


        .swiper-slide
        {
            visibility: hidden;

            transition: opacity .2s linear, visibility .2s linear;
            pointer-events: none;

            opacity: 0;


            &.visible
            {
                visibility: visible;

                pointer-events: auto;

                opacity: 1;
            }
        }
    }


    .person
    {
        display: flex;
        flex-direction: column;


        .photo
        {
            display: block;

            border: 1px solid var(--border_color);
            border-radius: var(--border_radius);
            background: var(--bg_grey);

            aspect-ratio: 1 / .942;
        }


        .data
        {
            position: relative;

            display: flex;
            flex: 1 0 auto;
            flex-direction: column;
            gap: var(--inner_gap_s);

            margin-top: -42px;
            padding-block: 0 var(--inner_gap_xl);
            padding-inline: var(--inner_gap_xl);

            border: 1px solid var(--border_color);
            border-radius: var(--border_radius);
            background: var(--light_color);


            .info
            {
                bottom: var(--secondary_color);

                display: flex;
                flex-direction: column;
                gap: 5px;

                width: 340px;
                max-width: 100%;
                margin-block: -36px 4px;
                margin-left: calc(var(--inner_gap_xl) * -1);
                padding-block: var(--inner_gap_s) var(--inner_gap_xs);
                padding-inline: var(--inner_gap_xl);

                color: var(--light_color);
                border-radius: 0 var(--border_radius) var(--border_radius) 0;
                background: linear-gradient(90deg, #194b4d 0%, var(--secondary_color) 100%);


                .name
                {
                    font-family: var(--font_family_secondary);
                    font-size: calc(var(--font_size_title_s) - 1px);
                    font-weight: 600;
                    line-height: 110%;
                }


                .post
                {
                    line-height: 135%;

                    color: #bfbfbf;
                }
            }


            .desc
            {
                font-size: var(--font_size_l);
                line-height: 130%;

                color: var(--grey_color_strong);
            }


            .features
            {
                display: none;
                flex-direction: column;
                gap: var(--inner_gap_s);


                &.show
                {
                    display: flex;
                }


                &.always_show
                {
                    display: flex;
                }


                & > *
                {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                }


                .label
                {
                    font-size: var(--font_size_l);
                    font-weight: 600;
                    line-height: 120%;

                    color: #10313d;
                }


                .val
                {
                    font-size: var(--font_size_l);
                    line-height: 120%;
                }
            }


            .spoler_btn
            {
                width: fit-content;
                margin-top: auto;

                font-weight: 600;
                line-height: 120%;

                text-align: left;

                color: #10313d;
                border-bottom: 1px solid;


                span + span
                {
                    display: none;
                }


                &.active
                {
                    span
                    {
                        display: none;
                    }


                    span + span
                    {
                        display: block;
                    }
                }
            }
        }
    }


    .action
    {
        &.view2
        {
            .info
            {
                width: 770px;


                &.full_w
                {
                    width: 100%;
                }
            }
        }


        .info
        {
            width: 780px;
        }
    }
}



@media print,
(max-width: 1279px)
{
    .persons
    {
        .block_head
        {
            &.row
            {
                .desc
                {
                    width: 500px;
                }
            }
        }


        .swiper
        {
            &:not(.swiper-initialized)
            {
                .swiper-wrapper
                {
                    gap: var(--spaceBetween-768);
                }


                .swiper-slide
                {
                    width: 400px;
                }
            }


            .swiper-slide
            {
                visibility: visible;

                width: 400px;

                pointer-events: auto;

                opacity: 1;
            }
        }


        .person
        {
            .data
            {
                margin-top: calc(var(--block_padding_l) * -1);
                padding-block: 0 var(--inner_gap_l);
                padding-inline: var(--inner_gap_l);


                .info
                {
                    margin-top: calc(var(--block_padding_l) * -1);
                    margin-left: calc(var(--inner_gap_l) * -1);
                    padding-inline: var(--inner_gap_l);


                    .post
                    {
                        font-size: var(--font_size_s);
                    }
                }


                .desc
                {
                    font-size: var(--font_size);
                }


                .features
                {
                    .label
                    {
                        font-size: var(--font_size);
                    }


                    .val
                    {
                        font-size: var(--font_size);
                    }
                }
            }
        }
    }
}



@media print,
(max-width: 1023px)
{
    .persons
    {
        .swiper
        {
            .swiper-slide
            {
                width: 340px;
            }
        }
    }
}



@media (max-width: 767px)
{
    .persons
    {
        .block_head
        {
            &.no_m
            {
                padding-bottom: 0;
            }
        }


        .swiper
        {
            display: flex;
            flex-direction: column;

            margin-top: var(--block_head_offset);


            &:not(.swiper-initialized)
            {
                .swiper-wrapper
                {
                    gap: var(--spaceBetween-0);
                }


                .swiper-slide
                {
                    width: 286px;
                }
            }


            .swiper-controls
            {
                justify-content: flex-start;
                order: 2;

                margin-top: var(--inner_gap);
                margin-bottom: 0;
            }


            .swiper-slide
            {
                width: 286px;
            }
        }


        .person
        {
            .data
            {
                padding-block: 0 var(--inner_gap);
                padding-inline: var(--inner_gap);


                .info
                {
                    margin-left: calc(var(--inner_gap) * -1);
                    padding-inline: var(--inner_gap);


                    .post
                    {
                        font-size: var(--font_size_xs);
                    }
                }


                .desc
                {
                    font-size: var(--font_size_s);
                    line-height: 140%;
                }


                .spoler_btn
                {
                    font-size: var(--font_size_s);
                }
            }
        }
    }
}