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

.newsBloc{
    position: relative;
    margin-bottom: 8vh;
    color: variables.$cDark;

    &_header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid variables.$cDark;
        padding-bottom: 5px;
    }

    &_date{
        font-size: 14px;
        line-height: 14px;
        color: variables.$cDark;
        transition: color 0.2s linear;
    }

    &_type{
        font-family: variables.$ffC;
        color: variables.$cGreyBlue;
        font-size: 30px;
        line-height: 40px;
        font-weight: 300;
        text-transform: uppercase;
        position: relative;
        overflow: hidden;
        height: 40px;
        flex: 1;

        @include mixins.respondTo('xs'){
            color: variables.$cPrimary;
        }

        &_fake{
            position: absolute;
            top: 0; bottom: 0;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        &_label{
            position: absolute;
            top: 0; bottom: 0; 
            right: 0;
            transition: transform 0.8s variables.$ExpoEaseOut;
            transform: translateX(var(--label-size));
        }
    }

    &_title{
        @include mixins.fontSize(40,50);
        color: #c3c3c3;
        margin-top: 4vh;
        margin-bottom: 2vh;
        transition: color 0.2s linear;

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

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

    &_excerpt{
        @include mixins.fontSize(18,36);
        transition: opacity 0.2s linear;

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

    &_link{
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 2;
    }

    @include mixins.hover{
        .newsBloc_date{
            color: variables.$cPrimary;
        }
        .newsBloc_title{
            color: variables.$cPrimary;
        }
        .newsBloc_type{
            &_label{
                transform: translateX(0);
            }

            @include mixins.respondTo('xs'){
                &_label{
                    transform: translateX(var(--label-size));
                }
            }
        }
    }
}

.newsBlocList{
    position: relative;
    padding-top: 3vh;
    margin-bottom: 9vh;
    color: variables.$cDark;

    @include mixins.respondTo('xs'){
        padding-top: 0;
        margin-bottom: 9vh;
    }

    &_header{
        font-family: variables.$ffC;
        color: variables.$cPrimary;
        @include mixins.fontSize(35,45);
        font-weight: 300;
        text-transform: uppercase;
        opacity: 0;
        margin-bottom: 5px;
        transform: translateY(-10px);
        transition: opacity 0.15s linear, transform 0.4s variables.$CircEaseOut;

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

        @include mixins.respondTo('xs'){
            opacity: 1;
            transform: translateY(0);
            @include mixins.fontSize(20,20,variables.$baseFontSizeXs);
        }
    }

    &_title{
        @include mixins.fontSize(50,60);
        color: variables.$cDark;
        opacity: 0.3;
        margin-bottom: 2vh;
        transition: opacity 0.15s linear;

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

        @include mixins.respondTo('xs'){
            opacity: 1;
            @include mixins.fontSize(28,30,variables.$baseFontSizeXs);
        }

        span{
            position: relative;
            display: inline;
            transition: box-shadow 0.15s linear;
            box-shadow: inset 0 0 0 0 variables.$cDark;
        }
    }

    &_excerpt{
        @include mixins.fontSize(18,36);
        opacity: 0.3;
        transition: opacity 0.2s linear;

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

    &_link{
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 2;
    }

    @include mixins.hover{
        .newsBlocList_header{
            opacity: 1;
            transform: translateY(0);
        }

        .newsBlocList_title{
            opacity: 1;

            span{
                box-shadow: inset 0 -3px 0 0 variables.$cDark;
            }
        }

        .newsBlocList_excerpt{
            opacity: 1;
        }
    }
}

.newsBlocHeader{
    position: relative;
    color: variables.$cLight;
    pointer-events: all;

    &_title{
        @include mixins.fontSize(70,70);
        color: variables.$cLight;

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

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

        span{
            position: relative;
            display: inline;
            transition: box-shadow 0.15s linear;
            box-shadow: inset 0 0 0 0 variables.$cLight;
        }
    }

    &_footer{
        font-family: variables.$ffC;
        color: variables.$cPrimary;
        @include mixins.fontSize(35,45);
        font-weight: 300;
        text-transform: uppercase;
        margin-top: 4vh;

        @include mixins.respondTo('md'){
            margin-top: 3vh;
            @include mixins.fontSize(24,30,variables.$baseFontSizeMd);
        }

        @include mixins.respondTo('xs'){
            margin-top: 2vh;
            @include mixins.fontSize(14,20,variables.$baseFontSizeXs);
        }
    }

    &_link{
        position: absolute !important;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 2;
        pointer-events: all;
    }

    @include mixins.hover{
        .newsBlocHeader_title{
            span{
                box-shadow: inset 0 -3px 0 0 variables.$cLight;
            }
        }
    }
}