/*--------------
    Articles
--------------*/
.articles
{
    .filter
    {
        margin-bottom: var(--block_padding_s);


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


        .grid_row
        {
            --items_per_line: 4;
            --gap_x: var(--inner_gap_xs);
            --gap_y: 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_s);

            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);
                    background: #e9ecef;
                }
            }


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


                .icon
                {
                    color: currentColor;
                }
            }
        }
    }


    .swiper
    {
        overflow: visible;

        padding-bottom: var(--outside_gap_xxs);

        --spaceBetween-0: var(--inner_gap_s);
        --slidesPerView-0: auto;
        --spaceBetween-768: var(--inner_gap);
        --slidesPerView-768: 3;
        --spaceBetween-1280: var(--block_padding_s);
        --slidesPerView-1280: 4;


        &.big
        {
            --slidesPerView-768: 2;
            --slidesPerView-1280: 3;
        }


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


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


    .data
    {
        .grid_row
        {
            --items_per_line: 4;
            --gap_x: var(--block_padding_s);
            --gap_y: var(--block_padding);
        }
    }


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


        .article
        {
            position: relative;

            display: flex;
            align-content: flex-start;
            align-items: flex-start;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: var(--block_padding_s);


            & > *
            {
                position: relative;
                z-index: 3;
            }


            &:before
            {
                position: absolute;
                z-index: 1;
                inset: calc(var(--inner_gap_xs) * -1);

                display: block;

                content: '';
                transition: opacity .2s linear;
                pointer-events: none;

                opacity: 0;
                background: var(--light_color);
            }


            .image
            {
                width: 200px;
                max-width: 100%;
            }


            .thumb
            {
                aspect-ratio: 1 / .75;
                clip-path: none;
            }


            .info
            {
                align-self: center;
                gap: var(--inner_gap_xs);

                width: calc(100% - 200px - var(--block_padding_s));
            }


            .name
            {
                font-size: var(--font_size_l);
                line-height: 144.444%;
            }


            .desc
            {
                margin-top: 0;

                font-weight: 400;

                opacity: .5;
            }


            .link
            {
                margin-top: var(--inner_gap_xxs);

                transition: .2s linear;

                opacity: .5;
                color: var(--dark_color);
            }


            @media (hover: hover) and (pointer: fine)
            {
                &:hover
                {
                    &:before
                    {
                        opacity: 1;
                    }


                    .link
                    {
                        opacity: 1;
                        color: var(--primary_color);
                    }
                }
            }
        }
    }


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


        .image
        {
            position: relative;

            display: block;
            overflow: hidden;

            text-decoration: none;

            color: currentColor;
        }


        .thumb
        {
            display: block;

            background: var(--bg_grey);

            clip-path: var(--clip_path_corner_top_left);
            aspect-ratio: 1 / .666;
        }


        .info
        {
            display: flex;
            flex-direction: column;
            gap: var(--inner_gap_xxs);
        }


        .category
        {
            font-size: var(--font_size_xs);
            font-weight: 500;
            line-height: calc(100% + 5px);


            a
            {
                display: inline-block;

                transition: opacity .2s linear;
                vertical-align: top;
                text-decoration: none;

                opacity: .3;
                color: currentColor;


                @media (hover: hover) and (pointer: fine)
                {
                    &:hover
                    {
                        opacity: .8;
                    }
                }
            }
        }


        .name
        {
            font-family: var(--font_family_secondary);
            font-size: var(--font_size_xl);
            font-weight: 600;
            line-height: 130%;


            a
            {
                display: inline-block;

                transition: color .2s linear;
                vertical-align: top;
                text-decoration: none;

                color: currentColor;


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


        .desc
        {
            display: flex;
            flex-direction: column;
            gap: var(--inner_gap_xs);

            margin-top: var(--inner_gap_xxs);

            font-size: var(--font_size_xs);
            font-weight: 300;
            line-height: 166.667%;
        }


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

            width: fit-content;
            margin-top: var(--inner_gap_xs);

            font-size: 11px;
            font-weight: 600;

            text-decoration: none;

            color: var(--primary_color);


            .icon
            {
                display: block;

                width: 4px;

                transform: translateY(1px);

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



@media print,
(max-width: 1279px)
{
    .articles
    {
        .swiper
        {
            padding-bottom: var(--block_padding);


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


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


        .list
        {
            .article
            {
                gap: var(--inner_gap_l);


                .image
                {
                    width: 180px;
                }


                .info
                {
                    width: calc(100% - 180px - var(--inner_gap_l));
                }
            }
        }
    }
}



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



@media print,
(max-width: 1279px)
{
    .articles
    {
        .data
        {
            .grid_row
            {
                --items_per_line: 3;
                --gap_x: var(--inner_gap_l);
            }
        }
    }
}



@media print,
(max-width: 1023px)
{
    .articles
    {
        .filter
        {
            .grid_row
            {
                display: grid;
                overflow: auto;
                gap: var(--inner_gap_xs);

                width: calc(100% + var(--cont_padding_double));
                margin-block: 0 var(--block_padding_s);
                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;
                }
            }
        }


        .article
        {
            .name
            {
                font-size: var(--font_size_l);
            }
        }
    }
}



@media (max-width: 767px)
{
    .articles
    {
        .swiper
        {
            &:not(.swiper-initialized)
            {
                .swiper-wrapper
                {
                    gap: var(--spaceBetween-0);
                }


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



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


        .data
        {
            .grid_row
            {
                --items_per_line: 1;
                --gap_x: var(--zero_px);
            }
        }


        .list
        {
            .article
            {
                gap: var(--inner_gap);


                .image
                {
                    width: 130px;


                    img
                    {
                        min-height: 136px;
                    }
                }


                .info
                {
                    width: calc(100% - 130px - var(--inner_gap));
                }
            }
        }


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