/* ============================================================
   Vacancy cards: the row of open roles, and its empty state.
   Figma: Careers desktop 1331:150779, mobile 1331:151126; empty state
   1331:156474 / 1331:157115; the single vacancy's "Other Vacancies"
   1727:23549, mobile 1735:24611. The template's section sets the background
   and padding.
   ============================================================ */
.vacancies__inner {
    max-width: calc(1440px - 2 * min(80px, var(--space-gutter)));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;   /* the frame: the row starts 14 under the heading row */
}
.vacancies__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.vacancies__titles { display: flex; flex-direction: column; gap: 10px; }
.vacancies__eyebrow { margin: 0; }
.vacancies__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-text);
    text-transform: capitalize;
}
.vacancies__controls { display: flex; gap: 24px; }
.vacancies__prev,
.vacancies__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;   /* plain arrows in the frame */
    color: var(--color-text);
    cursor: pointer;
}
.vacancies__prev svg,
.vacancies__next svg { width: 20px; height: 20px; }
.vacancies__prev svg { transform: rotate(180deg); }
.vacancies__prev:hover,
.vacancies__next:hover { color: var(--color-primary); }
.vacancies__prev:focus-visible,
.vacancies__next:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}
.vacancies__prev.swiper-button-disabled,
.vacancies__next.swiper-button-disabled { opacity: 0.35; cursor: default; }

.vacancies__swiper { min-width: 0; margin-left: 0; margin-right: calc(50% - 50vw); overflow: hidden; }   /* full bleed to the right: the row runs to the screen's edge at any width, the next card peeking in */
.vacancies__list { margin: 0; padding: 0; list-style: none; }
.vacancies__slide { width: 618px; height: auto; }

.vacancy-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: 12px;
    background: var(--gradient-1);
    color: var(--color-text-inverse);
}
.vacancy-card__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
}
.vacancy-card__posted,
.vacancy-card__excerpt { margin: 0; }
.vacancy-card__posted {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body-small);
    line-height: var(--leading-body-small);
}
.vacancy-card__excerpt {
    flex: 1 1 auto;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}
.vacancy-card__meta {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
}
.vacancy-card__meta-item {
    display: flex;
    align-items: center;
    gap: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}
.vacancy-card__meta-icon { box-sizing: border-box; width: 32px; height: 32px; padding: 4px; color: var(--color-accent); flex: 0 0 32px; }
.vacancy-card__apply {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 4px 0 14px;
    border-radius: 999px;
    background: var(--color-surface);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
}
.vacancy-card__apply-label {   /* the label is filled with gradient 1 (flagged: not one of the six buttons) */
    background: var(--gradient-1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.vacancy-card__apply-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-inverse);
}
.vacancy-card__apply-icon svg { width: 12px; height: 12px; }
.vacancy-card__apply:hover .vacancy-card__apply-icon { background: var(--color-primary-hover); }
.vacancy-card__apply:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* The empty state: a centred message instead of the row (1331:156474) */
/* the frame's empty state starts right under the heading row (the card row is 14 under it) */
.vacancies__head + .vacancies__empty { margin-top: -16px; }
.vacancies__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 0 64px;
    text-align: center;
}
.vacancies__empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-inverse);
}
.vacancies__empty-icon svg { width: 32px; height: 32px; }
.vacancies__empty-heading {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-text);
}
.vacancies__empty-body {
    margin: -12px 0 0;   /* the frame: 12 under its heading, not the 24 between the other parts */
    max-width: 1000px;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    opacity: 0.7;
}

/* ── Tablet and mobile ────────────────────────────────────── */
@media (max-width: 1024px) {
    .vacancies__inner { gap: 32px; max-width: none; }
    .vacancies__controls { display: none; }
    .vacancies__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .vacancies__slide { width: 300px; }
    .vacancy-card__meta { flex-direction: column; gap: 8px; }
    .vacancies__empty { padding: 0; gap: 16px; }
    .vacancies__head + .vacancies__empty { margin-top: -8px; }   /* 24 under the heading on the mobile frame */
    .vacancies__empty-body { margin-top: 0; }
    .vacancies__empty-icon { width: 45px; height: 45px; }
    .vacancies__empty-icon svg { width: 18px; height: 18px; }
    .vacancies__empty-heading {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
}