$color-plugin: #0a4b78;
$color-plugin-light: #5099cb;

$color-text: #333;

.infocobprod-entry {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;

    box-shadow: 0 0 15px 3px rgba(0, 0, 0, .08);


    .infocobprod-entry-thumb {
        width: 100%;
        height: 200px;

        img {
            width: 100%;
            height: 100%;

            object-fit: cover;
        }

        .no-thumb {
            width: 100%;
            height: 100%;

            background: rgba(0, 0, 0, .3);
        }
    }

    .infocobprod-entry-content {
        padding: 15px 20px;
        flex-grow: 1;

        display: flex;
        flex-direction: column;

    }

    .infocobprod-entry-h {
        font-size: 17px;
        font-size: 1.7rem;
        font-weight: bold;

        margin-bottom: 10px;
    }

    .infocobprod-entry-excerpt {
        margin-bottom: 10px;

        &, p {
            line-height: 1.2;
        }
    }

    .infocobprod-entry-btn {
        position: relative;
        z-index: 0;

        margin-top: auto;
        align-self: flex-start;

        &:before {
            content: '';
            display: block;
            width: calc(100% + 4px);
            height: 3px;

            z-index: -1;

            background: rgba($color-plugin-light, .4);

            position: absolute;
            bottom: 0;
            left: -2px;

            transition: all .3s;
        }

        &:hover {
            &:before {
                height: 6px;
            }
        }
    }
}

.infocobprod-wrapper-archive {
    .infocobprod-wrapper-archive-inner {
        width: 100%;
        max-width: 1380px;

        margin: 0 auto;


        padding: 0 15px;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .infocobprod-wrapper-archive-body{
        flex-direction: column;

        @media screen and (min-width: 1280px){
            flex-direction: row;
        }

        > div{
            margin-bottom: 25px;

            @media screen and (min-width: 1280px){
                margin-bottom: 0;
            }
        }

        .infocobprod-filtres-left{
            order: 1;

            @media screen and (min-width: 1280px){
                order: initial;
            }
        }

        .infocobprod-content{
            order: 0;

            @media screen and (min-width: 1280px){
                order: initial;
            }
        }

        .infocobprod-filtres-right{
            order: 2;

            @media screen and (min-width: 1280px){
                order: initial;
            }
        }
    }

    .infocobprod-content {
        flex-basis: auto;
        flex-grow: 1;
        flex-shrink: 1;

        padding: 0 15px;


        .infocobprod-content-h{
            font-size: 20px;
            font-size: 2rem;

            font-weight: bold;
            margin-bottom: 15px;
        }

        .infocobprod-content-excerpt{
            line-height: 1.2;
            margin-bottom: 25px;
        }
    }

    .infocobprod-content-entries {

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 15px;

        margin-bottom: 25px;
    }

    .infocobprod-filtres {
        position: relative;
        z-index: 0;


        .infocobprod-filtres-inner {
            box-shadow: 0 0 15px 3px rgba(0, 0, 0, .1);

        }

        .infocobprod-filtres-h {
            font-size: 1.8rem;
            font-size: 18px;

            font-weight: bold;
            margin: 0 0 15px;
        }


        .filters {
            .filter {
                display: flex;
                flex-direction: column;

                margin-bottom: 15px;


                label {
                    font-size: 14px;
                    font-size: 1.4rem;
                    font-weight: bold;

                    margin-bottom: 5px;
                }

                select {
                    padding: 3px 5px;
                }

            }

            .filter-selectmultiple {
                .ms-parent {
                    max-width: 100%;

                    li {
                        padding: 3px 8px;
                    }

                    label {
                        font-weight: normal;
                        margin: 0;

                        padding-left: 15px;
                    }

                    input[type=checkbox] {
                        margin-left: -17px;
                    }

                    .ms-choice {
                        color: $color-text;
                    }
                }
            }

            .filter-slider {
                flex-direction: row;
                flex-wrap: wrap;

                label {
                    flex-basis: auto;
                    flex-grow: 0;
                    flex-shrink: 0;

                    margin-right: 10px;
                    margin-bottom: 5px;
                }

                .fake {
                    margin-top: -6px;
                    margin-bottom: 7px;

                    flex-basis: auto;
                    flex-grow: 1;
                    flex-shrink: 1;

                    background: none;
                    border: none;
                    padding: 0 5px;

                    font-size: 14px;
                    font-size: 1.4rem;
                    font-style: italic;

                    display: inline-flex;
                    justify-content: flex-start;
                    align-items: flex-start;

                    &:focus-visible,
                    &:focus {
                        border: 0;
                    }
                }

                .slider-range {
                    flex-basis: 100%;

                    .ui-slider-range {
                        background: $color-plugin-light;

                    }
                }
            }

            .filter-checkboxes {

                .checkboxes {
                    padding-left: 10px;
                }

                .checkbox {
                    margin-bottom: 5px;

                    label {
                        font-weight: normal;
                    }
                }
            }

            .filter-radios {

                .radios {
                    padding-left: 10px;
                }

                .radio {
                    margin-bottom: 5px;

                    label {
                        font-weight: normal;
                    }
                }
            }

            .button-filter, .button-reset {

                justify-content: flex-end;
                align-items: flex-end;

                input {
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;


                    background-color: $color-plugin;
                    border: 1px solid $color-plugin;
                    border-radius: 3px;
                    color: #fff;

                    padding: 6px 12px;
                    cursor: pointer;

                    transition: all .3s;

                    font-size: 14px;
                    font-size: 1.4rem;
                    font-weight: 600;

                    &:hover {
                        background-color: #fff;
                        color: $color-plugin;
                    }

                }
            }
        }
    }

    .infocobprod-filtres-top {
        width: 100%;
        flex-basis: 100%;
        margin-bottom: 25px;

        .infocobprod-filtres-inner {
            padding: 15px 15px 0 15px;
        }


        .filters {
            .content {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-start;
            }

            .filter {
                flex-basis: 300px;
                margin-right: 25px;
            }

            .button-filter, .button-reset {
                flex-basis: auto;
                margin-right: 0;
            }
        }
    }

    .infocobprod-filtres-left,
    .infocobprod-filtres-right {
        width: 330px;
        flex-basis: 330px;
        flex-grow: 0;
        flex-shrink: 0;

        box-sizing: border-box;

        .infocobprod-filtres-inner {
            padding: 15px 15px;

            position: sticky;
            top: 0;
        }

        .filters {
            .content {
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                justify-content: flex-start;
            }

            .filter {
                flex-basis: 100%;

                box-sizing: border-box;
            }


        }
    }

    &.infocobprod-wrapper-archive-1-cols {
        .infocobprod-content-entries {
            grid-template-columns: repeat(1, 1fr);

            @media screen and (min-width: 576px){
                grid-template-columns: repeat(2, 1fr);
            }

            @media screen and (min-width: 768px){
                grid-template-columns: repeat(3, 1fr);
            }

            @media screen and (min-width: 1280px){
                grid-template-columns: repeat(4, 1fr);
            }
        }
    }

    &.infocobprod-wrapper-archive-2-cols {
        .infocobprod-content-entries {
            grid-template-columns: repeat(1, 1fr);

            @media screen and (min-width: 576px){
                grid-template-columns: repeat(2, 1fr);
            }

            @media screen and (min-width: 768px){
                grid-template-columns: repeat(3, 1fr);
            }

            @media screen and (min-width: 1280px){
                grid-template-columns: repeat(3, 1fr);
            }
        }
    }

    &.infocobprod-wrapper-archive-3-cols {
        .infocobprod-content-entries {
            grid-template-columns: repeat(1, 1fr);

            @media screen and (min-width: 576px){
                grid-template-columns: repeat(2, 1fr);
            }

            @media screen and (min-width: 768px){
                grid-template-columns: repeat(3, 1fr);
            }

            @media screen and (min-width: 1280px){
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }
}
