/* Вакансии: единая композиция с главной — контент слева, большая фотография справа. */
#vacancies .standard-shell{
    height:calc(100vh - var(--header-h));
    min-height:564px;
    padding:24px 0 0 6.4vw;
    display:grid;
    grid-template-columns:minmax(0,55%) minmax(0,45%);
    align-items:stretch;
    gap:0;
}

#vacancies .standard-copy{
    max-width:none;
    min-width:0;
    min-height:0;
    padding:8px 3.6vw 28px 0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow:hidden;
}

#vacancies .eyebrow{margin:0 0 9px;font-size:9px;letter-spacing:3.6px}
#vacancies h2{font-size:clamp(44px,3.6vw,61px);line-height:.94;letter-spacing:-2.8px}
#vacancies h2 .accent{display:none}
#vacancies .lead{margin:10px 0 0;max-width:610px;font-size:12px;line-height:1.5}

#vacancies .benefits{
    margin:14px 0 12px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    flex:0 0 auto;
}
#vacancies .benefit{min-height:58px;padding:9px 10px;font-size:8.5px;line-height:1.35;background:rgba(255,255,255,.82)}
#vacancies .benefit strong{margin-bottom:4px;font-size:10px}

/* До шести вакансий показываем полностью. С седьмой включаем внутреннюю прокрутку. */
#vacancies .vacancy-list{
    width:100%;
    flex:1 1 auto;
    min-height:0;
    max-height:none !important;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:9px;
    border:1px solid #cfe3e8;
    border-radius:18px;
    background:rgba(255,255,255,.78);
    box-shadow:0 10px 26px rgba(23,56,76,.055);
    backdrop-filter:blur(8px);
    overflow:hidden !important;
}

/* Даже если Blade поставил is-scrollable при 5–6 вакансиях, прокрутку не показываем. */
#vacancies .vacancy-list.is-scrollable:not(:has(.vacancy-row:nth-child(7))){
    overflow:hidden !important;
    padding-right:9px;
    scrollbar-width:none;
}
#vacancies .vacancy-list.is-scrollable:not(:has(.vacancy-row:nth-child(7)))::-webkit-scrollbar{display:none}

/* 1–6 карточек равномерно занимают доступную высоту и не выходят за экран. */
#vacancies .vacancy-list:not(:has(.vacancy-row:nth-child(7))) .vacancy-row{
    flex:1 1 0;
    min-height:50px;
}

/* 7+ вакансий: оставляем видимую область внутри страницы и прокручиваем только список. */
#vacancies .vacancy-list:has(.vacancy-row:nth-child(7)){
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-right:12px;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    touch-action:pan-y;
    scrollbar-width:auto;
    scrollbar-color:var(--primary) #e6f2f5;
}
#vacancies .vacancy-list:has(.vacancy-row:nth-child(7)) .vacancy-row{
    flex:0 0 auto;
    min-height:58px;
}
#vacancies .vacancy-list:has(.vacancy-row:nth-child(7))::-webkit-scrollbar{width:9px}
#vacancies .vacancy-list:has(.vacancy-row:nth-child(7))::-webkit-scrollbar-track{background:#e6f2f5;border-radius:999px}
#vacancies .vacancy-list:has(.vacancy-row:nth-child(7))::-webkit-scrollbar-thumb{background:var(--primary);border:2px solid #e6f2f5;border-radius:999px}

#vacancies .vacancy-row{
    min-height:58px;
    display:grid;
    grid-template-columns:minmax(190px,1.45fr) minmax(90px,.65fr) minmax(130px,.85fr) auto;
    align-items:center;
    gap:14px;
    padding:10px 14px;
    border:1px solid #d6e7eb;
    border-radius:14px;
    background:rgba(255,255,255,.96);
    box-shadow:0 8px 20px rgba(23,56,76,.035);
}
#vacancies .vacancy-title-wrap{min-width:0}
#vacancies .vacancy-title{color:#203f52;font-size:15px;font-weight:700;line-height:1.25}
#vacancies .vacancy-subline{margin-top:4px;color:#91a3ac;font-size:9px;line-height:1.3}
#vacancies .vacancy-meta{color:#6f8793;font-size:11px;line-height:1.35}
#vacancies .vacancy-button{min-height:36px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--primary);color:#fff;font-size:10px;font-weight:700;white-space:nowrap}

/* Правая фотография вплотную к краю, как на главной, с мягким размытым переходом. */
#vacancies .visual{
    position:relative;
    align-self:stretch;
    width:100%;
    height:100%;
    min-height:0;
    max-height:none;
    overflow:hidden;
    border:0 !important;
    border-top:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    border-radius:0;
    background:#dfeff3;
}
#vacancies .visual:before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    border:0;
    background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.48) 14%,rgba(255,255,255,.08) 34%,rgba(255,255,255,0) 46%);
}
#vacancies .visual:after{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    z-index:2;
    width:32%;
    pointer-events:none;
    border:0;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.7) 42%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.7) 42%,transparent 100%);
}
#vacancies .visual img{width:100%;height:100%;display:block;border:0;outline:0;object-fit:cover;object-position:center}
#vacancies .visual-text{z-index:3}

@media(max-height:820px){
    #vacancies .standard-shell{padding-top:14px}
    #vacancies .standard-copy{padding-bottom:14px}
    #vacancies h2{font-size:clamp(38px,3.2vw,52px)}
    #vacancies .lead{margin-top:7px;font-size:10.5px}
    #vacancies .benefits{margin:8px 0;gap:6px}
    #vacancies .benefit{min-height:46px;padding:6px 8px}
    #vacancies .vacancy-list{gap:6px;padding:7px}
    #vacancies .vacancy-list:not(:has(.vacancy-row:nth-child(7))) .vacancy-row{min-height:44px}
    #vacancies .vacancy-list:has(.vacancy-row:nth-child(7)) .vacancy-row{min-height:52px}
    #vacancies .vacancy-row{padding:7px 10px}
    #vacancies .vacancy-title{font-size:13px}
    #vacancies .vacancy-meta{font-size:10px}
    #vacancies .vacancy-button{min-height:32px;padding:0 12px}
}

@media(max-width:1180px){
    #vacancies .standard-shell{grid-template-columns:minmax(0,58%) minmax(0,42%);padding-left:4vw}
    #vacancies .standard-copy{padding-right:2.8vw}
    #vacancies .benefits{grid-template-columns:repeat(2,1fr)}
    #vacancies .vacancy-row{grid-template-columns:minmax(170px,1.2fr) minmax(90px,.65fr) auto}
    #vacancies .vacancy-row .vacancy-meta:nth-of-type(2){display:none}
}

@media(max-width:900px){
    #vacancies{overflow-y:auto}
    #vacancies .standard-shell{height:auto;min-height:calc(100vh - var(--header-h));display:block;padding:28px 24px 44px}
    #vacancies .standard-copy{padding:0;overflow:visible}
    #vacancies h2{font-size:48px}
    #vacancies .benefits{grid-template-columns:repeat(2,1fr)}
    #vacancies .vacancy-list{flex:none;max-height:none !important}
    #vacancies .vacancy-list:has(.vacancy-row:nth-child(7)){max-height:390px !important;overflow-y:auto !important}
    #vacancies .vacancy-list:not(:has(.vacancy-row:nth-child(7))) .vacancy-row{flex:0 0 auto;min-height:58px}
    #vacancies .vacancy-row{grid-template-columns:1fr auto;gap:8px 14px}
    #vacancies .vacancy-meta{font-size:10px}
    #vacancies .vacancy-button{grid-column:2;grid-row:1/3}
    #vacancies .visual{height:46vh;min-height:330px;margin-top:24px;border:0 !important;border-radius:22px}
    #vacancies .visual:before{background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,0) 32%)}
    #vacancies .visual:after{display:none}
}

@media(max-width:560px){
    #vacancies .standard-shell{padding-left:18px;padding-right:18px}
    #vacancies h2{font-size:42px}
    #vacancies .benefits{grid-template-columns:1fr 1fr}
    #vacancies .vacancy-row{display:flex;flex-wrap:wrap;align-items:center}
    #vacancies .vacancy-title-wrap{width:100%}
    #vacancies .vacancy-button{margin-left:auto}
}