@use "../abstracts/mixins";
@use "../abstracts/variables";

.publicationBloc{
    position: relative;
    overflow: hidden;
    color: variables.$cLight;

    & + .publicationBloc{
        margin-top: 8vh;
    }

    &::after{
        content: "";
        display: block;
        padding-top: 120%;
    }

    &_coverWrap{
        position: absolute;
        z-index: 0;
        top: 0; left: 0; right: 0; bottom: 0;
        overflow: hidden;
        transition: transform 0.75s cubic-bezier(.165,.84,.44,1);
    }

    &_cover{
        position: absolute;
        z-index: 0;
        top: 0; left: 0; right: 0; bottom: 0;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: variables.$cLight;
        filter: grayscale(100%);
        transition: transform 0.75s cubic-bezier(.165,.84,.44,1), filter 0.75s cubic-bezier(.165,.84,.44,1);

        &::after{
            content: "";
            position: absolute;
            z-index: 1;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: variables.$cDark;
            opacity: 0.3;
        }
    }
    
    &_link{
        position: absolute;
        z-index: 15;
        top: 0; left: 0; right: 0; bottom: 0;
    }

    &_content{
        position: absolute;
        left: 0; bottom: 0; right: 0;
        padding: 10% 12% 15%;

        @include mixins.respondTo('md'){
            padding: 7% 12% 12%;
        }

        @include mixins.respondTo('xs'){
            padding: 10%;
        }
    }

    &_surtitle{
        font-family: variables.$ffC;
        @include mixins.fontSize(35,35);
        padding-bottom: 2vh;
        margin-bottom: 2vh;
        border-bottom: 2px solid variables.$cLight;

        @include mixins.respondTo('md'){
            @include mixins.fontSize(28,28,variables.$baseFontSizeMd);
        }

        @include mixins.respondTo('xs'){
            @include mixins.fontSize(22,22,variables.$baseFontSizeXs);
        }

        strong{
            color: variables.$cPrimary;
            font-weight: 400;
        }
    }

    &_title{
        @include mixins.fontSize(25,30);

        @include mixins.respondTo('md'){
            @include mixins.fontSize(20,28,variables.$baseFontSizeMd);
        }

        @include mixins.respondTo('xs'){
            @include mixins.fontSize(18,26,variables.$baseFontSizeXs);
        }
    }

    @include mixins.hover{
        .publicationBloc_coverWrap{
            transform: scale(0.9);
        }
        .publicationBloc_cover{
            transform: scale(1.25);
            filter: grayscale(0%);
        }
    }
}