/* ==========================================================
   KOKO Enterprise
   Single Job
   ========================================================== */

.job-detail-section{
    background:#ffffff;
}

.job-detail-layout{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(280px,.85fr);
    gap:5rem;
    align-items:start;
}

.job-detail-content,
.job-entry-content,
.job-apply-panel{
    min-width:0;
}

.job-detail-meta{
    display:flex;
    flex-wrap:wrap;
    gap:1rem 2rem;

    margin-bottom:2.5rem;
    padding-bottom:2rem;

    border-bottom:1px solid var(--color-border);
}

.job-detail-meta-item{
    display:grid;
    gap:.35rem;
}

.job-detail-meta-label{
    color:var(--color-text-light);

    font-size:.75rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.job-detail-meta-value{
    color:var(--color-primary);

    font-weight:600;
}

.job-entry-content{
    color:var(--color-text);

    font-size:1.08rem;
    line-height:1.9;

    overflow-wrap:anywhere;
}

.job-entry-content > *{
    margin-top:0;
    margin-bottom:1.5rem;
}

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

.job-entry-content h2,
.job-entry-content h3,
.job-entry-content h4{
    margin-top:2.5rem;
    margin-bottom:1rem;

    color:var(--color-primary);
}

.job-entry-content ul,
.job-entry-content ol{
    padding-left:1.4rem;
}

.job-entry-content ul{
    list-style:disc;
}

.job-entry-content ol{
    list-style:decimal;
}

.job-entry-content li + li{
    margin-top:.65rem;
}

.job-entry-content a{
    color:var(--color-accent);

    text-decoration:underline;
    text-underline-offset:3px;
}

.job-apply-panel{
    position:sticky;
    top:110px;

    padding:2.5rem;

    background:#f8f8f8;

    border:1px solid var(--color-border);
    border-radius:16px;
}

.job-apply-title{
    margin:0 0 1rem;

    color:var(--color-primary);

    font-family:var(--font-heading);
    font-size:1.65rem;
    font-weight:600;
    line-height:1.25;
}

.job-apply-text{
    margin:0 0 2rem;

    color:var(--color-text-light);

    line-height:1.75;
}

.job-apply-button{
    width:100%;
}

.job-back-link{
    display:inline-flex;

    margin-top:1.5rem;

    color:var(--color-accent);

    font-weight:600;
}

.job-back-link:hover{
    color:var(--color-primary);
}

@media (max-width:992px){

    .job-detail-layout{
        grid-template-columns:1fr;
        gap:3rem;
    }

    .job-apply-panel{
        position:static;
        top:auto;
    }

}

@media (max-width:576px){

    .job-detail-meta{
        display:grid;
        gap:1.25rem;
    }

    .job-entry-content{
        font-size:1rem;
        line-height:1.8;
    }

    .job-apply-panel{
        padding:2rem;
        border-radius:12px;
    }

}