/* =========================================
   HERO
========================================= */

.vacancies-hero{
    padding:48px 0 75px;
    background:var(--paper);
}


.vacancies-breadcrumbs{
    display:flex;
    align-items:center;
    gap:9px;

    margin-bottom:55px;

    color:var(--muted);
    font-size:11px;
}


.vacancies-breadcrumbs a{
    color:var(--ink);
    text-decoration:none;
}


.vacancies-hero-grid{
    display:grid;
    grid-template-columns:
        minmax(0,1.2fr)
        minmax(300px,.8fr);

    gap:70px;
    align-items:end;
}


.vacancies-hero h1{
    margin:15px 0 0;

    color:var(--ink);

    font-size:
        clamp(65px,9vw,120px);

    line-height:.88;
    letter-spacing:-.07em;
}


.vacancies-hero-copy{
    padding-bottom:8px;
}


.vacancies-hero-copy p{
    max-width:440px;

    margin:0 0 25px;

    color:var(--muted);

    font-size:14px;
    line-height:1.7;
}


.vacancies-hero-copy > span{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding-top:18px;

    border-top:
        1px solid var(--line);

    color:var(--muted);

    font-size:10px;

    text-transform:uppercase;
    letter-spacing:.07em;
}


.vacancies-hero-copy strong{
    color:var(--ink);

    font-size:18px;
}



/* =========================================
   CARDS
========================================= */

.vacancies-list{
    display:grid;
    gap:14px;
}


.vacancy-card{
    width:100%;

    padding:28px 30px;

    border:
        1px solid var(--line);

    border-radius:24px;

    background:var(--card);

    color:inherit;

    font:inherit;
    text-align:left;

    cursor:pointer;

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


.vacancy-card:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(16,24,32,.25);

    box-shadow:
        0 18px 50px
        rgba(16,24,32,.07);
}


.vacancy-card-top{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-bottom:38px;

    color:var(--muted);

    font-size:9px;

    text-transform:uppercase;
    letter-spacing:.08em;
}


.vacancy-department{
    color:var(--blue);

    font-weight:800;
}


.vacancy-card-main{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        260px;

    gap:50px;

    align-items:end;
}


.vacancy-card-main h2{
    max-width:700px;

    margin:0 0 15px;

    color:var(--ink);

    font-size:
        clamp(27px,3vw,38px);

    line-height:1;

    letter-spacing:-.045em;
}


.vacancy-card-main p{
    max-width:650px;

    margin:0;

    color:var(--muted);

    font-size:12px;

    line-height:1.7;
}


.vacancy-meta{
    display:flex;
    flex-direction:column;

    gap:7px;

    padding-left:25px;

    border-left:
        1px solid var(--line);

    color:var(--muted);

    font-size:10px;
}


.vacancy-card-bottom{
    display:flex;

    align-items:center;
    justify-content:space-between;

    margin-top:30px;

    padding-top:18px;

    border-top:
        1px solid var(--line);

    color:var(--ink);

    font-size:11px;
    font-weight:700;
}


.vacancy-arrow{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:var(--navy);

    color:#fff;
}



/* =========================================
   NOTE
========================================= */

.vacancies-note-section{
    padding-top:0;
}


.vacancies-note{
    padding:42px;

    display:grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap:60px;

    border-radius:28px;

    background:var(--navy);

    color:#fff;
}


.vacancies-note h2{
    margin:15px 0 0;

    color:#fff;

    font-size:
        clamp(38px,5vw,60px);

    line-height:.95;

    letter-spacing:-.05em;
}


.vacancies-note .eyebrow{
    color:var(--lime);
}


.vacancies-note p{
    max-width:550px;

    margin:0 0 15px;

    color:
        rgba(255,255,255,.58);

    font-size:13px;

    line-height:1.7;
}



/* =========================================
   EMPTY
========================================= */

.vacancies-empty{
    padding:70px 35px;

    border:
        1px solid var(--line);

    border-radius:25px;

    background:var(--card);

    text-align:center;
}


.vacancies-empty > span{
    color:var(--blue);

    font-size:9px;

    font-weight:800;

    text-transform:uppercase;
}


.vacancies-empty h2{
    margin:15px 0;

    font-size:35px;

    letter-spacing:-.04em;
}


.vacancies-empty p{
    margin:0;

    color:var(--muted);
}



/* =========================================
   MODAL
========================================= */

body.vacancy-modal-open{
    overflow:hidden;
}


.vacancy-modal{
    position:fixed;

    inset:0;

    z-index:5000;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:30px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}


.vacancy-modal.active{
    opacity:1;

    visibility:visible;

    pointer-events:auto;
}


.vacancy-modal-backdrop{
    position:absolute;

    inset:0;

    background:
        rgba(10,18,25,.68);

    backdrop-filter:
        blur(8px);
}


.vacancy-modal-dialog{
    position:relative;

    z-index:2;

    width:
        min(900px,100%);

    max-height:
        calc(100vh - 60px);

    overflow-y:auto;

    border-radius:28px;

    background:var(--paper);

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.3);

    transform:
        translateY(20px)
        scale(.985);

    transition:
        transform .25s ease;
}


.vacancy-modal.active
.vacancy-modal-dialog{
    transform:
        translateY(0)
        scale(1);
}


.vacancy-modal-close{
    position:sticky;

    z-index:10;

    top:18px;

    float:right;

    margin:
        18px 18px 0 0;

    width:44px;
    height:44px;

    display:grid;
    place-items:center;

    border:0;

    border-radius:50%;

    background:var(--navy);

    color:#fff;

    font-size:25px;

    cursor:pointer;
}


.vacancy-modal-head{
    padding:
        55px 65px 35px;
}


.vacancy-modal-meta{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding-right:55px;

    margin-bottom:25px;

    color:var(--muted);

    font-size:9px;

    text-transform:uppercase;
    letter-spacing:.08em;
}


.vacancy-modal-meta span:first-child{
    color:var(--blue);

    font-weight:800;
}


.vacancy-modal-head h2{
    max-width:700px;

    margin:0 0 18px;

    color:var(--ink);

    font-size:
        clamp(38px,5vw,58px);

    line-height:.95;

    letter-spacing:-.055em;
}


.vacancy-modal-head > p{
    max-width:650px;

    margin:0;

    color:var(--muted);

    font-size:13px;

    line-height:1.7;
}


.vacancy-modal-body{
    padding:
        0 65px 60px;
}


.vacancy-info-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    border-top:
        1px solid var(--line);

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


.vacancy-info-grid > div{
    padding:
        20px 18px;

    border-right:
        1px solid var(--line);
}


.vacancy-info-grid > div:last-child{
    border-right:0;
}


.vacancy-info-grid small{
    display:block;

    margin-bottom:8px;

    color:var(--muted);

    font-size:8px;

    text-transform:uppercase;
}


.vacancy-info-grid strong{
    color:var(--ink);

    font-size:12px;
}


.vacancy-modal-text{
    margin-top:35px;

    color:var(--muted);

    font-size:14px;

    line-height:1.8;
}


.vacancy-detail-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:50px;

    margin-top:40px;
}


.vacancy-detail-grid h3{
    margin:0 0 18px;

    color:var(--ink);

    font-size:22px;

    letter-spacing:-.03em;
}


.vacancy-detail-grid ul{
    margin:0;

    padding-left:18px;

    color:var(--muted);

    font-size:12px;

    line-height:1.7;
}


.vacancy-detail-grid li{
    margin-bottom:8px;
}


.vacancy-modal-footer{
    padding:
        20px 65px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    border-top:
        1px solid var(--line);

    color:var(--muted);

    font-size:10px;
}


.vacancy-modal-footer button{
    padding:
        10px 18px;

    border:0;

    border-radius:999px;

    background:var(--navy);

    color:#fff;

    font-size:10px;
    font-weight:700;

    cursor:pointer;
}



/* =========================================
   MOBILE
========================================= */

@media(max-width:980px){

    .vacancies-hero-grid,
    .vacancies-note{
        grid-template-columns:1fr;
    }


    .vacancy-card-main{
        grid-template-columns:1fr;

        gap:25px;
    }


    .vacancy-meta{
        padding:
            20px 0 0;

        border-left:0;

        border-top:
            1px solid var(--line);
    }

}


@media(max-width:720px){

    .vacancies-hero{
        padding:
            28px 0 48px;
    }


    .vacancies-breadcrumbs{
        margin-bottom:30px;
    }


    .vacancies-hero h1{
        font-size:58px;
    }


    .vacancy-card{
        padding:
            22px 20px;
    }


    .vacancy-card-top{
        margin-bottom:28px;
    }


    .vacancies-note{
        padding:
            28px 22px;
    }


    .vacancy-modal{
        align-items:flex-end;

        padding:0;
    }


    .vacancy-modal-dialog{
        width:100%;

        max-height:92vh;

        border-radius:
            25px 25px 0 0;
    }


    .vacancy-modal-head{
        padding:
            45px 24px 25px;
    }


    .vacancy-modal-body{
        padding:
            0 24px 40px;
    }


    .vacancy-info-grid{
        grid-template-columns:1fr;
    }


    .vacancy-info-grid > div{
        border-right:0;

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


    .vacancy-info-grid > div:last-child{
        border-bottom:0;
    }


    .vacancy-detail-grid{
        grid-template-columns:1fr;

        gap:35px;
    }


    .vacancy-modal-footer{
        padding:
            18px 24px;
    }

}