/* ==========================================================
   KOKO Enterprise
   Careers
   Version: 3.1.0
   ========================================================== */

/*--------------------------------------------------------------
# Careers CTA — Homepage
--------------------------------------------------------------*/

.careers-cta{
    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:#ffffff;
}

.careers-cta .container{
    position:relative;
    z-index:2;
}

/*--------------------------------------------------------------
# Careers CTA Inner
--------------------------------------------------------------*/

.careers-cta-inner{
    display:flex;
    flex-direction:column;
    align-items:center;

    width:100%;
    max-width:980px;

    margin:0 auto;

    text-align:center;
}

/*--------------------------------------------------------------
# Careers Kicker
--------------------------------------------------------------*/

.careers-cta-kicker{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 1.5rem;

    color:#B08D57;

    font-size:.78rem;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.26em;
    text-align:center;
    text-transform:uppercase;
}

/*--------------------------------------------------------------
# Careers Title
--------------------------------------------------------------*/

.careers-cta-title{
    width:100%;
    max-width:920px;

    margin:0 auto 2rem;

    color:#111111;

    font-family:var(--font-heading);
    font-size:clamp(3.4rem,6vw,6.25rem);
    font-weight:500;
    line-height:.96;
    letter-spacing:-.052em;
    text-align:center;
    text-wrap:balance;
}

/*--------------------------------------------------------------
# Careers Description
--------------------------------------------------------------*/

.careers-cta-description{
    width:100%;
    max-width:720px;

    margin:0 auto;

    color:rgba(17,17,17,.68);

    font-size:1.16rem;
    line-height:1.85;
    text-align:center;
    text-wrap:balance;
}

/*--------------------------------------------------------------
# Careers Actions
--------------------------------------------------------------*/

.careers-cta-actions{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    margin-top:2.75rem;
}

.careers-cta-button{
    margin:0 auto;
}

/*--------------------------------------------------------------
# Careers Page
--------------------------------------------------------------*/

.careers-page .careers-intro{
    padding:96px 0;
}

.careers-content{
    max-width:760px;

    margin:0 auto;

    color:rgba(17,17,17,.72);

    font-size:1.12rem;
    line-height:1.85;
}

.careers-content > *:first-child{
    margin-top:0;
}

.careers-content > *:last-child{
    margin-bottom:0;
}

/*--------------------------------------------------------------
# Opportunities Section
--------------------------------------------------------------*/

.careers-opportunities{
    padding:110px 0;
}

.careers-opportunities .section-header{
    max-width:820px;

    margin:0 auto 4.5rem;

    text-align:center;
}

.careers-opportunities .section-kicker{
    display:inline-flex;
    justify-content:center;

    margin:0 auto 1.4rem;

    text-align:center;
}

.careers-opportunities .section-title{
    margin-right:auto;
    margin-left:auto;

    text-align:center;
}

.careers-opportunities .section-description{
    max-width:680px;

    margin-right:auto;
    margin-left:auto;

    text-align:center;
}

/*--------------------------------------------------------------
# Jobs Grid
--------------------------------------------------------------*/

.jobs-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.5rem;
}

/*--------------------------------------------------------------
# Job Card
--------------------------------------------------------------*/

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

    min-height:260px;
    padding:2rem;

    background:#ffffff;

    border:1px solid rgba(17,17,17,.1);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.job-card:hover{
    transform:translateY(-4px);

    border-color:rgba(17,17,17,.18);

    box-shadow:0 18px 45px rgba(17,17,17,.08);
}

/*--------------------------------------------------------------
# Job Meta
--------------------------------------------------------------*/

.job-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.65rem;

    margin-bottom:1.5rem;
}

.job-meta span{
    display:inline-flex;
    align-items:center;

    padding:.45rem .7rem;

    color:rgba(17,17,17,.66);
    background:rgba(17,17,17,.05);

    font-size:.76rem;
    font-weight:600;
    line-height:1;
    letter-spacing:.04em;
}

/*--------------------------------------------------------------
# Job Title
--------------------------------------------------------------*/

.job-title{
    margin:0 0 2rem;

    color:#111111;

    font-family:var(--font-heading);
    font-size:clamp(1.8rem,3vw,2.5rem);
    font-weight:500;
    line-height:1.08;
    letter-spacing:-.035em;
}

.job-title a{
    color:inherit;

    text-decoration:none;

    transition:color .25s ease;
}

.job-title a:hover{
    color:#d71920;
}

/*--------------------------------------------------------------
# Job Actions
--------------------------------------------------------------*/

.job-actions{
    margin-top:auto;
}

/*--------------------------------------------------------------
# Careers Archive Link
--------------------------------------------------------------*/

.careers-archive-link{
    display:flex;
    justify-content:center;

    margin-top:3.5rem;
}

/*--------------------------------------------------------------
# Empty State
--------------------------------------------------------------*/

.careers-empty{
    max-width:760px;

    margin:0 auto;
    padding:4rem 2rem;

    text-align:center;

    background:#ffffff;

    border:1px solid rgba(17,17,17,.1);
}

.careers-empty h3{
    margin:0 0 1rem;

    color:#111111;

    font-family:var(--font-heading);
    font-size:2.25rem;
    font-weight:500;
    letter-spacing:-.035em;
}

.careers-empty p{
    max-width:600px;

    margin:0 auto 2rem;

    color:rgba(17,17,17,.68);

    line-height:1.8;
}

/*--------------------------------------------------------------
# Tablet
--------------------------------------------------------------*/

@media (max-width:992px){

    .careers-cta{
        padding:100px 0;
    }

    .careers-cta-inner{
        max-width:860px;
    }

    .careers-cta-title{
        max-width:820px;

        font-size:clamp(3.2rem,7vw,5.25rem);
    }

    .careers-opportunities{
        padding:90px 0;
    }

    .jobs-grid{
        grid-template-columns:1fr;
    }

}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media (max-width:768px){

    .careers-cta{
        padding:82px 0;
    }

    .careers-cta-kicker{
        margin-bottom:1.25rem;
    }

    .careers-cta-title{
        max-width:100%;

        margin-bottom:1.5rem;

        font-size:clamp(2.8rem,11vw,4.25rem);
        line-height:.98;
    }

    .careers-cta-description{
        max-width:560px;

        font-size:1.05rem;
        line-height:1.75;
    }

    .careers-cta-actions{
        margin-top:2.25rem;
    }

    .careers-page .careers-intro{
        padding:72px 0;
    }

    .careers-opportunities{
        padding:78px 0;
    }

    .careers-opportunities .section-header{
        margin-bottom:3rem;
    }

    .job-card{
        min-height:0;
        padding:1.6rem;
    }

}

/*--------------------------------------------------------------
# Small Mobile
--------------------------------------------------------------*/

@media (max-width:576px){

    .careers-cta{
        padding:70px 0;
    }

    .careers-cta-title{
        font-size:clamp(2.5rem,12vw,3.65rem);
    }

    .careers-cta-description{
        font-size:1rem;
    }

    .careers-empty{
        padding:3rem 1.25rem;
    }

}