/*
 * v2.4.5 — страница «דרושות חשפניות» (template-jobs.php).
 * Подключается только на этом шаблоне. Образ: сцена до начала шоу —
 * афишный заголовок, который выхватывает луч прожектора, рампа, «дорожка» шагов и билет.
 */

@font-face {
    font-family: 'Karantina';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/karantina-hebrew-700.woff2) format('woff2');
    unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

.jobs {
    --jobs-velvet: #712885;
    --jobs-spot: #fff1c9;
    --jobs-neon: #ff4fb0;
    --jobs-mute: #c3bccd;
    --jobs-glow: rgb(121 121 121);
    letter-spacing: .5px;
}

.jobs section {
    padding: 4vw 6vw;
}

.jobs a:focus-visible {
    outline: 3px solid var(--jobs-spot);
    outline-offset: 3px;
}

/* ---------- Сцена ---------- */

#hero.jobs-hero {
    height: auto;
    padding: 0;
    overflow: hidden;
    background: #000;
}

.jobs-stage {
    position: relative;
    isolation: isolate;
    padding: calc(100px + 2vw) 4vw 3.4vw;
    /* без JS луч широкий и стоит по центру: заголовок читается целиком */
    --mx: 50%;
    --my: 58%;
    --hole: 26vmax;
    --ring: 42vmax;
    --dark: 70vmax;
    --shade: .55;
}

.jobs-stage.is-live {
    --hole: 8vmax;
    --ring: 19vmax;
    --dark: 34vmax;
    --shade: .8;
}

/* тёплое пятно на «полу» под лучом */
.jobs-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 34vmax 15vmax at var(--mx) 100%, rgba(255, 241, 201, .22), rgba(113, 40, 133, .16) 55%, rgba(0, 0, 0, 0) 100%);
}

.jobs .jobs-title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: 'Karantina', 'Arial Narrow', 'Arial', sans-serif;
    font-weight: 700;
    font-size: clamp(92px, 22vw, 430px);
    line-height: .8;
    letter-spacing: 0;
    text-align: center;
    color: #fff;
    /* общий h1 сайта — радужный градиент в буквах; здесь буквы белые, цвет даёт свет */
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-animation: none;
    animation: none;
}

.jobs-title__row {
    display: block;
}

/* темнота зала с «дырой» от прожектора */
.jobs-dark {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle at var(--mx) var(--my),
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) var(--hole),
        rgba(113, 40, 133, .4) var(--ring),
        rgba(0, 0, 0, var(--shade)) var(--dark));
}

/* рампа: ряд ламп по краю сцены */
.jobs-footlights {
    position: absolute;
    z-index: 3;
    left: 4vw;
    right: 4vw;
    bottom: 0;
    height: 14px;
    pointer-events: none;
    background: radial-gradient(circle, var(--jobs-spot) 0, var(--jobs-spot) 2px, rgba(255, 241, 201, .32) 3px, rgba(255, 241, 201, 0) 6px) center / 38px 14px repeat-x;
    border-bottom: 1px solid rgba(255, 241, 201, .35);
}

.jobs-hero__body {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) auto;
    gap: 2vw 4vw;
    align-items: end;
    padding: 2.4vw 6vw 4vw;
}

.jobs-hero__body .breadcrumb {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--jobs-mute);
}

.jobs .jobs-lead {
    margin: 0;
    max-width: 34em;
    font-size: clamp(18px, 1.75vw, 32px);
    line-height: 1.5;
}

.jobs-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.jobs-cta .btn {
    display: inline-block;
    white-space: nowrap;
    text-align: center;
}

.jobs .btn.whatsapp {
    background: linear-gradient(180deg, #0e3d00 0%, #1a6200 100%);
}

/* ---------- Что за работа ---------- */

.jobs-what {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 4vw;
    align-items: start;
}

.jobs .jobs-what p {
    max-width: 32em;
    font-size: clamp(16px, 1.35vw, 25px);
    line-height: 1.6;
    margin-bottom: 1em;
}

.jobs-rules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 2vw;
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 20px 0 var(--jobs-glow) inset;
}

.jobs-rules__col {
    padding: clamp(18px, 2.4vw, 44px);
}

.jobs-rules__col--yes {
    background: linear-gradient(180deg, rgb(0 0 0) 30%, var(--jobs-velvet) 100%);
}

.jobs-rules__col--no {
    border-inline-start: 1px dashed rgba(255, 255, 255, .3);
}

.jobs .jobs-rules h3,
.jobs .jobs-runway h3 {
    /* общий h3 сайта — радужный и на 3vw; в этих блоках он спокойный */
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-animation: none;
    animation: none;
    color: #fff;
    font-weight: 800;
}

.jobs .jobs-rules h3 {
    font-size: clamp(20px, 1.9vw, 34px);
    margin-bottom: .7em;
}

.jobs-rules ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75em;
    font-size: clamp(15px, 1.2vw, 22px);
    line-height: 1.45;
}

.jobs-rules li {
    position: relative;
    padding-inline-start: 1.9em;
}

.jobs-rules__col--yes li::before {
    content: "";
    position: absolute;
    inset-inline-start: .1em;
    top: .28em;
    width: 1em;
    height: .5em;
    border: solid var(--jobs-spot);
    border-width: 0 0 3px 3px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.jobs-rules__col--no li::before,
.jobs-rules__col--no li::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .66em;
    width: 1.1em;
    height: 3px;
    background: var(--jobs-neon);
}

.jobs-rules__col--no li::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.jobs-rules__col--no li::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* ---------- Дорожка шагов ---------- */

.jobs-runway {
    list-style: none;
    margin: 1vw 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jobs-runway li {
    position: relative;
}

.jobs-runway__n {
    display: block;
    font-family: 'Karantina', 'Arial Narrow', 'Arial', sans-serif;
    font-weight: 700;
    font-size: clamp(96px, 13vw, 250px);
    line-height: .86;
    color: transparent;
    -webkit-text-stroke: 2px var(--jobs-spot);
    padding-inline-start: .04em;
}

@supports not (-webkit-text-stroke: 2px #fff) {
    .jobs-runway__n {
        color: var(--jobs-spot);
    }
}

.jobs .jobs-runway h3 {
    position: relative;
    margin: 1vw 0 0;
    padding: 1.3vw 1.6vw .5vw 0;
    padding-inline: 0 1.6vw;
    border-top: 2px solid var(--jobs-velvet);
    font-size: clamp(19px, 1.7vw, 32px);
}

/* лампа на линии дорожки */
.jobs .jobs-runway h3::before {
    content: "";
    position: absolute;
    top: -8px;
    inset-inline-start: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--jobs-spot);
    box-shadow: 0 0 16px 5px rgba(255, 241, 201, .55);
}

.jobs .jobs-runway p {
    margin: 0;
    padding-inline-end: 1.6vw;
    font-size: clamp(15px, 1.2vw, 22px);
    line-height: 1.5;
    color: var(--jobs-mute);
}

/* ---------- Билет ---------- */

.jobs-ticket-wrap {
    overflow: hidden; /* вырезы билета на узком экране не должны давать горизонтальную прокрутку */
}

.jobs-ticket {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr);
    border-radius: 2vw;
    background: linear-gradient(180deg, rgb(0 0 0) 30%, var(--jobs-velvet) 100%);
    box-shadow: 0 0 20px 0 var(--jobs-glow) inset;
}

.jobs-ticket__main {
    padding: clamp(22px, 3.2vw, 60px);
}

.jobs-ticket__main ul {
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-columns: 2;
    columns: 2;
    -webkit-column-gap: 3vw;
    column-gap: 3vw;
    font-size: clamp(16px, 1.3vw, 24px);
    line-height: 1.45;
}

.jobs-ticket__main li {
    position: relative;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    padding: .55em 0 .55em 0;
    padding-inline-start: 1.5em;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.jobs-ticket__main li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 1.05em;
    width: .6em;
    height: .6em;
    border-radius: 50%;
    border: 2px solid var(--jobs-spot);
}

.jobs-ticket__stub {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    padding: clamp(22px, 3vw, 56px) clamp(16px, 2vw, 40px);
    text-align: center;
    border-inline-start: 2px dashed rgba(255, 255, 255, .5);
}

/* вырезы на линии отрыва */
.jobs-ticket__stub::before,
.jobs-ticket__stub::after {
    content: "";
    position: absolute;
    inset-inline-start: -17px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #000;
}

.jobs-ticket__stub::before {
    top: -16px;
    box-shadow: 0 -6px 10px -4px var(--jobs-glow) inset;
}

.jobs-ticket__stub::after {
    bottom: -16px;
    box-shadow: 0 6px 10px -4px var(--jobs-glow) inset;
}

.jobs-ticket__age {
    font-size: clamp(64px, 8.5vw, 170px);
    font-weight: 800;
    line-height: .9;
    letter-spacing: 0;
    color: transparent;
    -webkit-text-stroke: 2px var(--jobs-spot);
    direction: ltr;
}

@supports not (-webkit-text-stroke: 2px #fff) {
    .jobs-ticket__age {
        color: var(--jobs-spot);
    }
}

.jobs-ticket__note {
    font-size: clamp(14px, 1.1vw, 20px);
    color: var(--jobs-mute);
    max-width: 14em;
}

/* ---------- Вопросы и финал ---------- */

.jobs-faq details {
    margin-bottom: 12px;
}

.jobs .jobs-faq summary {
    font-size: clamp(17px, 1.45vw, 27px);
}

.jobs .jobs-faq details p {
    font-size: clamp(15px, 1.25vw, 23px);
    line-height: 1.55;
    max-width: 46em;
}

.jobs .jobs-more p {
    font-size: clamp(16px, 1.35vw, 25px);
    line-height: 1.6;
    margin: 0;
}

.jobs .jobs-more a {
    color: var(--jobs-spot);
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* ---------- Узкие экраны ---------- */

@media (max-width: 900px) {
    .jobs-what {
        grid-template-columns: 1fr;
    }

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

    .jobs-runway {
        grid-template-columns: 1fr;
        margin-top: 10px;
    }

    .jobs-runway li {
        display: grid;
        grid-template-columns: 74px minmax(0, 1fr);
        column-gap: 14px;
        align-items: start;
        padding-bottom: 22px;
    }

    .jobs-runway__n {
        grid-row: 1 / span 2;
        font-size: 92px;
        line-height: .8;
    }

    .jobs .jobs-runway h3 {
        margin: 0;
        padding: 12px 0 4px;
        font-size: 20px;
    }

    .jobs .jobs-runway p {
        grid-column: 2;
        padding: 0;
    }

    .jobs-ticket {
        grid-template-columns: 1fr;
        border-radius: 18px;
    }

    .jobs-ticket__main ul {
        -webkit-columns: 1;
        columns: 1;
    }

    .jobs-ticket__stub {
        border-inline-start: 0;
        border-top: 2px dashed rgba(255, 255, 255, .5);
    }

    .jobs-ticket__stub::before,
    .jobs-ticket__stub::after {
        top: -17px;
        bottom: auto;
        box-shadow: none;
    }

    .jobs-ticket__stub::before {
        inset-inline-start: -16px;
    }

    .jobs-ticket__stub::after {
        inset-inline-start: auto;
        inset-inline-end: -16px;
    }
}

@media (max-width: 767px) {
    .jobs section {
        padding: 26px 14px;
    }

    .jobs-stage {
        padding: 104px 10px 26px;
    }

    .jobs .jobs-title {
        font-size: 30vw;
    }

    .jobs-footlights {
        left: 10px;
        right: 10px;
    }

    .jobs-hero__body {
        padding: 18px 14px 28px;
    }

    .jobs-cta .btn {
        flex: 1 1 140px;
    }

    .jobs-rules {
        grid-template-columns: 1fr;
        border-radius: 18px;
    }

    .jobs-rules__col--no {
        border-inline-start: 0;
        border-top: 1px dashed rgba(255, 255, 255, .3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .jobs-stage,
    .jobs-stage.is-live {
        --hole: 30vmax;
        --ring: 48vmax;
        --dark: 80vmax;
        --shade: .45;
    }
}