.careers{

    & .hero{
        background: url(hero.jpg) no-repeat;
        background-size: cover;
        padding: var(--spacing-8x);
        margin-bottom: var(--inner-spacing-default) !important;
        margin-top: var(--inner-spacing-default) !important;

        & .h1{
            color: #fff;
            margin: var(--spacing-4x) 0;
        }

        & .scalable-cta-button{
            margin-bottom: var(--spacing-4x);
        }

        & .wp-block-commvault-v2-custom-button.is-style-primary:hover a{
            background: var(--color-grey-100);
        }
    }


    & .new-ui-filters .filter-group .filter-group__content{
        overflow-y: unset;
    }

    & .top-filters{
        align-items: baseline;
        padding: 0;
        margin: var(--spacing-2x) 0 var(--spacing-4x);

        @media screen and (max-width: 540px){
            margin:0;
        }

        & .results{
            font-family: var(--font-secondary);
            font-size: var(--text-body-sm);
        }

        & .tag{
            margin-right: var(--spacing);
            text-transform: capitalize;
        }

    }

    & .saved-jobs{
        display: flex;
        align-items: center;
        text-decoration: none;

        &:hover{
            text-decoration: underline;
        }

        & .job-count{
            display: block;
            margin-right: var(--spacing-10);
            margin-top: -2px;
            font-family: var(--font-secondary);
            font-size: var(--text-body-sm);
        }
    }

}

.careers__main{
    display: flex;
}

.job{

    & .tags{

        & .tag{
            border-radius: 0.25rem;
            display: inline-block;
            font-size: 0.6rem;
            padding: 0.25rem 0.5rem;
        }

    }

    & .eyebrow{
        padding: var(--spacing) var(--spacing-2x);
        margin-top: var(--spacing-4x);
    }

    & .commvault-social-share{

        p{
            margin: 0;
        }

    }

    & .commvault-social-share__item{

        svg{
            height: 30px;
            width: auto;
        }

        path{
            fill: var(--color-almost-black);
        }

    }

}

.job__body{

    & h2,
    & h3 {
        font-size: var(--font-size-xl);
    }

    & h4,
    & h5,
    & h6 {
        font-size: var(--font-size-l);
    }
}

.job__body + .scalable-cta-button-double{
    margin-bottom: var(--spacing-8x);
}

.job__meta{
    display: flex;
    justify-content: space-between;
}

.job-card{

    &.hide{
        display: none;
    }

    & .pseudo-button,
    & .excerpt-wrapper{
        display: flex;
        align-items: center;
    }

    & .pseudo-button{
        margin-left: auto;

        & svg{
            margin-left: var(--spacing);
        }

        @media screen and (max-width: 540px){
            margin-left: 0;
        }

    }

    & .excerpt-wrapper{
        @media screen and (max-width: 540px){
            flex-direction: column;
        }
    }

    & .excerpt{
        margin-right: var(--spacing-8x);

        @media screen and (max-width: 540px){
            margin:0;
        }
    }

    & .location{
        margin-left: var(--spacing-4x);
    }

    @media screen and (max-width: 540px){
        & .requisition,
        & .location{
            display: block;
            margin-left: 0;
        }
    }

    &.sidebar__card{

        &:first-child{
            margin-top: var(--spacing-2x);
        }

        & .job-card__link{
            margin-bottom: var(--spacing-2x);
            padding: var(--spacing-8x) var(--spacing-2x) var(--spacing-2x);
        }

        & .excerpt-wrapper,
        & .favorite{
            display: none;
        }

        & .job-card__meta{
            padding-top: var(--spacing-4x);
            margin-left: var(--spacing-2x);
            margin-right: var(--spacing-2x);
            margin-bottom: calc(-1 * var(--spacing-6x));
        }

        & .tags{
        }

        & .tag{
            margin-bottom: var(--spacing);
        }

        & h4{
            font-size: var(--font-size-md);
        }

        & p{
            display: flex;
            flex-direction: column;

            & .location{
                margin: 0;
            }
        }
    }

}

.job-cards{

    &.grid{
        margin-top: var(--spacing-8x);
    }

}

.job-card__link{
    border: 2px solid var(--color-midnight-200);
    padding: var(--spacing-10x) var(--spacing-4x) var(--spacing-4x);
    margin-bottom: var(--spacing-8x);
    display: block;
    text-decoration: none;
    transition: all 0.6s;

    &:hover{
        background: var(--color-eggshell);
        box-shadow: 0 2px 12px 0 rgba(10, 10, 10, 0.08);
    }
}

.job-card__meta{
    display: flex;
    justify-content: space-between;
    margin: 0 var(--spacing-4x) calc(-1 * var(--spacing-8x));
    position: relative;
    z-index: 2;
}

.favorite {
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    display: block;

    &[data-favorite-status="on"] path.inner-heart{
        fill: #333;
    }

    &:hover{
        cursor: pointer;
    }

}

.saved-jobs{
    display: flex;
    align-items: center;
}


/* Grid View */
.grid-container-selector.grid{

    & .job-cards.grid{
        display: grid;
        gap: var(--spacing-2x);
        grid-template-columns: repeat(3, minmax(16.5rem, 1fr));
    }

    & .job-card{
        display: flex;
        flex-direction: column;
    }

    & .job-card__meta{
        height: var(--spacing-4x);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

        & .tag{
            margin: 0 var(--spacing) var(--spacing) 0;
        }

        & .favorite{
            margin-left: auto;
        }
    }

    & .job-card__link{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex-grow: 1;
        padding: var(--spacing-12x) var(--spacing-4x) var(--spacing-4x);
        margin-bottom: var(--spacing-4x);
    }

    & .job-card__link p{
        display: flex;
        flex-direction: column;

        & span{
            margin: var(--spacing) 0 0;
        }
    }

    & .excerpt-wrapper{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 1;
        margin-top: var(--spacing-2x);

        & .excerpt{
            margin: 0;
            width: 100%;
        }

        & .pseudo-button{
            flex-direction: row;
            margin: auto auto 0 0;
        }
    }

}


/* Faceted null matches */
.careers .no-results.hide{
    display: none;
}