/* ============================================================
   Careers - page-level CSS (T12)
   Figma: desktop 1331:150689, mobile 1331:151048; empty state 1331:156384 /
   1331:157037. No tablet frame: 768-1024 follows the mobile frame.

   The career paths gallery is built here (no other template uses it); the
   vacancy cards and their empty state are classes/vacancy-cards (the single
   vacancy page shows them too); everything else is a shared class that
   carries its own look. Every neighbour differs in background, so each section pads
   --space-section-alt (80 / 48); the reviews pad themselves.
   ============================================================ */

.careers__section--why,
.careers__section--story,
.careers__section--paths,
.careers__section--values {
    padding-top: var(--space-section-alt);
    padding-bottom: var(--space-section-alt);
}

/* The "Trusted by" strip runs on from the reviews' band */
.careers__section--logos { padding-top: 0; padding-bottom: var(--space-section-alt); background-color: var(--color-surface-warm);}
@media (min-width: 1025px) {
    .careers__section--reviews .reviews__inner { padding-bottom: 55px; }   /* the frame: 55 from the cards to the "Trusted by" line */
}

/* ── Vacancies (1331:150779, mobile 1331:151126) ──────────── */
.careers__section--vacancies {
    background: var(--color-surface-tint);   /* "Primary Accent" */
    /* the frame pads this band 80 on every side, not the 118 gutter */
    padding: 80px min(80px, var(--space-gutter));
    overflow: hidden;
}

/* ── Career paths (1331:150881, mobile 1331:151218) ───────── */
.careers__section--paths {
    background: var(--color-surface-tint);   /* "Primary Accent" */
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
    overflow: hidden;
}
.career-paths__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 374fr) minmax(0, 850fr);
    column-gap: 48px;
    align-items: center;
}
.career-paths__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.career-paths__eyebrow { margin: 0; }
.career-paths__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-secondary);
    text-transform: capitalize;
}
.career-paths__body {
    margin: 0 0 16px;   /* 8 + 16 = the frame's 24 to the button */
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-secondary);
}
.career-paths__gallery { min-width: 0; }
/* Desktop: the row runs on to the page's right edge, but never past the 1440 frame (on a wider screen it stops at the frame's edge) */
@media (min-width: 1025px) {
    .career-paths__gallery {
        margin-right: calc(-1 * (min(100vw, 1440px) - min(100vw - 2 * var(--space-gutter), var(--layout-content-max-w))) / 2);
    }
}
.career-paths__swiper { overflow: hidden; }
.career-paths__swiper:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.career-paths__list { margin: 0; padding: 0; list-style: none; align-items: center; }
.career-paths__slide { width: 289px; height: auto; }
.career-paths__card {
    display: flex;
    flex-direction: column;
    width: 289px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--gradient-1);
    color: var(--color-text-inverse);
    text-align: center;
    opacity: 0.5;
    transform: scale(0.796);   /* a neighbour is 230 against the centre card's 289 */
    transition: transform 400ms ease, opacity 400ms ease;
}
.career-paths__slide.swiper-slide-active .career-paths__card { opacity: 1; transform: none; }
/* Three cards at most at every width: the centre one and a neighbour either side, never a sliver of a fourth */
.career-paths__slide:not(.swiper-slide-prev):not(.swiper-slide-active):not(.swiper-slide-next) { visibility: hidden; }

.career-paths__photo { height: 172px; background: var(--color-surface); overflow: hidden; }
.career-paths__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.career-paths__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 167px;
    padding: 23px;
}
.career-paths__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);   /* Futura Medium 27.7 on the centre card in the frame, no style */
    line-height: var(--leading-h3);
}
.career-paths__text {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body-small);
    line-height: var(--leading-body-small);
}

/* ── Tablet and mobile ────────────────────────────────────── */
@media (max-width: 1024px) {
    .careers__section--vacancies { padding: var(--space-section-alt) var(--space-gutter); }

    .career-paths__inner { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
    .career-paths__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .career-paths__body {
        font-size: var(--text-mobile-body-small);
        line-height: 1.4;
    }
    .career-paths__gallery { margin: 0 calc(var(--space-gutter) * -1); }
    .career-paths__slide,
    .career-paths__card { width: 280px; }
    .career-paths__card { opacity: 0.6; transform: scale(0.9); }
    .career-paths__photo { height: 160px; }
    .career-paths__panel { min-height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
    .career-paths__card { transition: none; }
}