Job Listing

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-job-listing{
    padding: 3em 0;
    
    @include bp($lg){
        padding: 6em 0;
    }

    .heading-col{
        margin-bottom: rem-calc(32);

        @include bp($lg){
            margin-bottom: 0;
        }

        > *{
            max-width: rem-calc(450);
        }
    }
    .heading{
        font-size: rem-calc(20);
        line-height: rem-calc(32);
        letter-spacing: 0.02em;
        font-weight: 400;
        margin-bottom: rem-calc(24);

        @include bp($lg){
            font-size: rem-calc(40);
            line-height: rem-calc(48);
        }
    }
    &__text-wrap{
        font-weight: 400;
        font-size: rem-calc(16);
        line-height: rem-calc(24);        
        letter-spacing: 0.05em;

        @include bp($lg){
            font-size: rem-calc(20);
            line-height: em-calc(28);
        }
    }

    .job{
        &-card{
            background: #FFFFFF;
            box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.1);
            border-radius: 16px;
            padding: rem-calc(16 20);
            display: flex;
            flex-direction: column;
            margin-bottom: rem-calc(16);
            width: 100%;
            
            @include bp($md){                
                flex-direction: row;
                align-items: center;
                padding: rem-calc(32 40);
                border-radius: 32px;
            }

            &-detail{
                width: 100%;
                padding: rem-calc(0 12 0 0);

                @include bp($md){
                    width: 65%;
                }
            }

            &-cta{
                width: 100%;
                text-align: left;

                @include bp($md){
                    width: 35%;
                    text-align: right;
                }
            }
        }

        &-title{
            font-weight: 400;
            font-size: rem-calc(20);
            line-height: rem-calc(32);
            letter-spacing: 0.05em;
            margin-bottom: rem-calc(16);
        }

        &-meta{
            display: block;
            
            width: 100%;
            font-weight: 500;
            font-size: rem-calc(12);
            line-height: rem-calc(24);
            letter-spacing: 0.2em; 
            text-transform: uppercase;
            margin-bottom: rem-calc(16);
            
            @include bp($sm){
                display: flex;
            }
            @include bp($md){
                margin-bottom: 0;
            }
            span{
                display: flex;
                align-items: center;
                margin-bottom: rem-calc(16);
                @include bp($sm){
                    margin-bottom: 0;
                    &.job-time{
                        margin-right: rem-calc(20);
                    }
                }                
            }
            
            svg{
                margin-right: rem-calc(12);
            }
        }
        &-cta-btn{
            display: inline-block;
            padding-right: rem-calc(67);
            padding-left: 0;
            padding-top: rem-calc(8);
            padding-bottom: rem-calc(8);
            text-decoration: none;
            background-color: transparent;
            border: none;
            color: $black;
            position: relative;
            font-weight: 500;
            transition: 0.3s ease-out all;
            font-size: rem-calc(24);
            line-height: rem-calc(29);

            &::after{
                content: "";
                width: rem-calc(40);
                height: rem-calc(40);
                display: inline-block;
                border-radius: rem-calc(40);
                border: 1px solid $orange;
                background-color: transparent;
                background-image: url("data:image/svg+xml,%3Csvg fill='none' width='14' height='13' xmlns='http://www.w3.org/2000/svg' viewBox='-0.17 0.52 13.87 12.58'%3E%3Cpath d='M0.334961 6.80981H13.2057' stroke='%230D0D0D'%3E%3C/path%3E%3Cpath d='M7.47852 1.01758L13.2036 6.80911L7.47852 12.6013' stroke='%230D0D0D'%3E%3C/path%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: center;
                transition: 0.3s ease-out all;
                position: absolute;
                top: 0;
                right: 0;
            }

            &:hover,
            &:focus {
                background: transparent;
                font-weight: 600;
                color: $black;
                border: none;
                &::after{
                    background-color: $orange;
                }
            }
            &:active{
                background: transparent;
                border: none;
                &::after{
                    background-color: $orange-light;
                }
            }
        }
    }
}