/* ============================================================
   Careers page — overlay header

   The header is a shared Elementor Theme Builder template, so nothing here
   touches it globally: every rule is scoped to .medison-careers-page, added
   by a body_class filter only on pages using the careers widgets.

   Same mechanism the homepage already uses — the first section is pulled up
   under the header, and .medison-header (z-index 80000) floats over it,
   switching to position:fixed when Elementor's sticky activates. The
   difference here is the scrolled state: black with white marks, and the
   header never hides.
   ============================================================ */

.medison-careers-page .careers-hero-section {
    margin-top: -110px;
}

/* Header is transparent over the hero, black once you leave it. */
.medison-careers-page .medison-header {
    transition: background-color .35s ease, box-shadow .35s ease;
}

.medison-careers-page .elementor-location-header.header-at-top .medison-header {
    background-color: transparent !important;
    box-shadow: none !important;
}

.medison-careers-page .elementor-location-header:not(.header-at-top) .medison-header {
    background-color: #000 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) !important;
}

/* Burger and any header text stay white in both states — the hero is dark
   behind it at the top, and the bar is black once scrolled. */
.medison-careers-page .menu-toggle span {
    background-color: #fff !important;
}

.medison-careers-page .elementor-location-header .medison-header a,
.medison-careers-page .elementor-location-header .medison-header p {
    color: #fff;
}

/* This page keeps the header on screen; it does not slide away on scroll-down.
   Two class names are in play site-wide: `hide-header` (from the header
   template's own CSS in post-1032.css, which sets opacity, transform AND
   pointer-events together) and `header-hidden` (main.js, homepage only).
   All three properties have to be reset — overriding transform alone leaves
   an invisible, click-through bar that still measures as on-screen. */
.medison-careers-page .medison-header.hide-header,
.medison-careers-page .medison-header.header-hidden {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

@media (max-width: 900px) {
    .medison-careers-page .careers-hero-section {
        margin-top: -80px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .medison-careers-page .medison-header {
        transition: none;
    }
}


/* ============================================================
   Content column

   One 1360px column for the whole page. Elementor's own default is 1140px,
   which left the hero and the section headings narrower than the values grid
   next to them (that container carries its own 1348px). Backgrounds are
   unaffected and stay edge-to-edge: Elementor paints them on the outer
   .e-con, and only the inner wrapper is capped here.

   This only moves the Elementor containers. Blocks that deliberately sit
   narrower carry their own cap on their own element and are untouched —
   .careers-wrapper still holds the positions list at 924px, which is the
   proportion the comp shows against a 1360 column.
   ============================================================ */

.medison-careers-page .e-con-inner {
    max-width: min(100%, 1360px);
}

/* The carousel's nav row was the one thing on the page wider than the new
   column — it had been set to 1388px to line up with the old track. */
.medison-careers-page .careers-videos-nav {
    max-width: 1360px;
}


/* ============================================================
   Careers — Open Positions module
   Measurements taken from Figma 3HrRe9FXvwLUe3w3BA1ACN, node 259:1013.
   Container 924px centred, 40px inner padding, group radius 16px,
   header row 74px, position row 82px.

   Colour and type follow the LIVE SITE tokens, not the comp:
   brand red #C20010 (comp used #EE3124) and text #161616 (comp #18181B).
   Swap --careers-red below if the comp's red is confirmed as a rebrand.
   ============================================================ */

/* Crimson Pro ExtraLight, self-hosted to match how Elementor already serves
   the site's other Google fonts (no external request). Used only for the
   position count beside each country name. */
@font-face {
    font-family: "Crimson Pro";
    src: url("../fonts/CrimsonPro-ExtraLight-latin.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Crimson Pro";
    src: url("../fonts/CrimsonPro-ExtraLight-latin-ext.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.careers-wrapper {
    --careers-red: #c20010;
    --careers-ink: #161616;
    --careers-muted: #71717a;
    --careers-quiet: #8b8b8d;
    --careers-line: #ececee;
    --careers-band: #f7f7f8;
    --careers-radius: 16px;

    max-width: 924px;
    margin: 0 auto;
    font-family: "Neue Haas Display", sans-serif;
    color: var(--careers-ink);
}

/* ---------- Talent network line ---------- */

.careers-talent {
    margin: 0 0 24px;
    text-align: center;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--careers-muted);
}

.careers-talent-link {
    color: var(--careers-red);
    text-decoration: none;
    white-space: nowrap;
}

.careers-talent-link:hover,
.careers-talent-link:focus-visible {
    text-decoration: underline;
}

/* The comp sets arrow glyphs in Inter 300 — Neue Haas has no matching arrow.
   Inter is already self-hosted by Elementor, so this costs nothing. */
.careers-arrow {
    display: inline-block;
    margin-left: 4px;
    font-family: Inter, sans-serif;
    font-weight: 300;
    transition: transform .2s ease;
}

.careers-talent-link:hover .careers-arrow,
.careers-apply:hover .careers-arrow {
    transform: translateX(3px);
}

/* ---------- Filters ---------- */

.careers-filters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.careers-field {
    position: relative;
    display: flex;
    align-items: center;
}

.careers-select,
.careers-search {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--careers-line);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--careers-ink);
    appearance: none;
    -webkit-appearance: none;
}

/* Native chevron replaced so both selects match the comp. */
.careers-select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    cursor: pointer;
}

.careers-field--search .careers-search {
    padding-left: 44px;
}

.careers-search-icon {
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    color: var(--careers-muted);
    pointer-events: none;
}

.careers-search::placeholder {
    color: var(--careers-muted);
    opacity: 1;
}

.careers-select:focus-visible,
.careers-search:focus-visible {
    outline: 2px solid var(--careers-red);
    outline-offset: 1px;
}

/* Hide the WebKit clear affordance; the search event still fires. */
.careers-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* ---------- Count line ---------- */

.careers-count {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--careers-muted);
}

/* ---------- Country groups ---------- */

.careers-groups {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.careers-group {
    border-radius: var(--careers-radius);
    background: #fff;
    overflow: hidden;
}

.careers-group[hidden] {
    display: none;
}

.careers-group-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 0 40px;
    background: var(--careers-band);
}

/* The comp puts each flag in a filled 32px circle — measured off the desktop
   frame. Kept on the shared class so the .careers-flag--none span below gets
   the same box; object-fit crops the 4:3 flag to the circle. */
.careers-flag {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50px;
    object-fit: cover;
}

/* Elementor's frontend sheet carries `.elementor img { border-radius: 0 }`
   and `.elementor img { height: auto }`, both of which outrank the class
   above: the flags were being flattened back to a rectangle and re-sized to
   32x24 by the width/height attributes on the tag. Raised with the page body
   class plus the element type rather than !important, so the rule still
   loses to anything more specific later. Not needed for --none, which is a
   span and never matches `.elementor img`. */
   Sizing is NOT owned here. The careers page's own Elementor CSS
   (post-5510.css) sets the flag to 40x40 with a 40px radius and outranks
   even this rule, so 40px is what actually renders. The 32px below is the
   comp value, kept as the fallback if that Elementor styling is ever
   removed. Change the size in Elementor, not here — and if you do edit
   these, keep width and height equal: setting only one leaves a 40x32
   ellipse, which is what shipped for about ten minutes on 2026-09-01. */
.medison-careers-page img.careers-flag {
    width: 32px;
    height: 32px;
    border-radius: 50px;
}

.careers-flag--none {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--careers-muted);
}

.careers-flag--none svg {
    width: 100%;
    height: 100%;
}

.careers-group-name {
    margin: 0;
    font-family: inherit;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--careers-ink);
}

/* Crimson Pro ExtraLight — the comp uses it only for these counts. */
.careers-group-count {
    font-family: "Crimson Pro", Georgia, serif;
    font-size: 32px;
    line-height: 1.11;
    font-weight: 200;
    color: var(--careers-quiet);
}

/* ---------- Position rows ---------- */

.careers-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The comp assumed single-line titles ("Manager, Market Research"). Real
   Comeet titles run to three lines, so the title column gets more room and
   rows grow rather than squashing the button. */
.careers-row {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.05fr) minmax(0, 0.6fr) auto;
    align-items: center;
    column-gap: 24px;
    min-height: 82px;
    padding: 18px 40px;
    border-top: 1px solid var(--careers-line);
}

.careers-row[hidden] {
    display: none;
}

.careers-role {
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: .4px;
    font-weight: 500;
}

.careers-dept,
.careers-type {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--careers-muted);
}

.careers-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 24px;
    border-radius: 10px;
    background: #ee3124;
    color: #fff;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease;
}

.careers-apply:hover,
.careers-apply:focus-visible {
    background: #d0271a;
    color: #fff;
}

/* Elementor's global kit carries `.elementor-kit-1861 a { color: #161616 }`,
   which outranks both rules above — the label and arrow were rendering
   near-black on the red pill, about 2.4:1 against it. The colours were always
   declared correctly; they just lost the cascade. Same specificity bump as
   the flag rule: body class + element type, no !important. Hover stays a
   notch higher again so it still wins over the base. */
.medison-careers-page a.careers-apply {
    color: #fff;
}

.medison-careers-page a.careers-apply:hover,
.medison-careers-page a.careers-apply:focus-visible {
    color: #fff;
}

.careers-apply:focus-visible {
    outline: 2px solid var(--careers-ink);
    outline-offset: 2px;
}

/* ---------- Empty states ---------- */

.careers-no-results,
.careers-empty-state {
    margin: 32px 0 0;
    text-align: center;
    font-size: 16px;
    line-height: 1.4;
    color: var(--careers-muted);
}

.careers-no-results[hidden] {
    display: none;
}

/* ---------- Tablet ---------- */

/* The four-column row runs out of room below ~900px: the title column falls to
   255px and real Comeet titles wrap to three lines - the same defect the
   desktop grid was widened to fix. Step down to two columns here rather than
   dropping straight to the phone layout, which stretched Apply across the full
   713px of an iPad. Breakpoints match Elementor's own 1024 / 767, so the page
   steps twice rather than three times. */

@media (max-width: 1024px) and (min-width: 768px) {
    .careers-row {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
        row-gap: 6px;
        column-gap: 20px;
        padding: 18px 28px;
    }

    .careers-role {
        grid-column: 1 / 3;
        grid-row: 1;
        font-size: 19px;
    }

    .careers-dept {
        grid-column: 1;
        grid-row: 2;
    }

    .careers-type {
        grid-column: 2;
        grid-row: 2;
    }

    .careers-apply {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
        min-height: 44px;
    }

    .careers-group-head {
        padding: 0 28px;
    }
}


/* ---------- Mobile ---------- */

@media (max-width: 767px) {
    .careers-filters {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .careers-groups {
        gap: 24px;
    }

    .careers-group-head {
        min-height: 62px;
        padding: 0 20px;
        gap: 10px;
    }

    .careers-group-name {
        font-size: 22px;
    }

    .careers-group-count {
        font-size: 26px;
    }

    /* Stacked card: title, one meta line, then a full-width Apply. */
    .careers-row {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr);
        align-items: start;
        row-gap: 8px;
        column-gap: 16px;
        padding: 20px;
        min-height: 0;
    }

    .careers-role {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: 18px;
        letter-spacing: .3px;
    }

    .careers-dept,
    .careers-type {
        font-size: 15px;
    }

    /* Department and type read as one meta line, as the comp shows. */
    .careers-dept {
        grid-column: 1;
        grid-row: 2;
    }

    .careers-type {
        grid-column: 2;
        grid-row: 2;
    }

    /* Full width as the comp shows at 393px, but capped so it does not
       stretch to 727px on a 767px-wide tablet at the top of this band. */
    .careers-apply {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        max-width: 400px;
        margin-top: 4px;
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .careers-arrow,
    .careers-apply {
        transition: none;
    }

    .careers-talent-link:hover .careers-arrow,
    .careers-apply:hover .careers-arrow {
        transform: none;
    }
}


/* ============================================================

/* ============================================================
   Careers page — "Meet the team" carousel
   The hero and "Together, We Rise" sections are built entirely from
   stock Elementor widgets, so they carry no CSS here on purpose —
   every colour, size and spacing value lives in the Elementor panel
   where the client can edit it. Only the carousel needs real styling.
   Measurements from Figma 3HrRe9FXvwLUe3w3BA1ACN node 259:1013:
   cards 307x545 (exactly 9:16), 24px gap, 20px radius.
   ============================================================ */

.careers-videos {
    --careers-red: #c20010;
    --careers-ink: #161616;
    --careers-muted: #71717a;
    --careers-line: #ececee;
    font-family: "Neue Haas Display", sans-serif;
    color: var(--careers-ink);
}
/* ---------- Section 3 — Meet the team ---------- */


/* As an Elementor widget the surrounding container already supplies the
   section padding — otherwise it is applied twice and the gaps double. */
.careers-videos--widget {
    padding: 0;
    background: none;
    position: relative;
}


/* Bleeds off the right edge in the comp but starts aligned with the heading. */
.careers-videos-track {
    display: flex;
    gap: 24px;
    padding: 0 clamp(20px, 9.83vw, 170px) 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: clamp(20px, 9.83vw, 170px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-y;
}

.careers-videos-track::-webkit-scrollbar {
    display: none;
}

.careers-videos-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
    user-select: none;
}

.careers-videos-track:focus-visible {
    outline: 2px solid var(--careers-red);
    outline-offset: 4px;
}

/* ---------- Carousel navigation ---------- */

.careers-videos-nav {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    max-width: 1388px;
    margin: 24px auto 0;
    padding: 0 clamp(20px, 9.83vw, 170px);
}

/* Only shown once there is something to scroll to. */
.careers-videos:not(.is-scrollable) .careers-videos-nav {
    display: none;
}

.careers-videos-arrow {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--careers-line, #ececee);
    border-radius: 50%;
    background: #fff;
    color: var(--careers-ink, #161616);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.careers-videos-arrow svg {
    width: 20px;
    height: 20px;
}

.careers-videos-arrow:hover:not(:disabled) {
    background: var(--careers-red);
    border-color: var(--careers-red);
    color: #fff;
}

.careers-videos-arrow:disabled {
    opacity: .35;
    cursor: default;
}

.careers-videos-arrow:focus-visible {
    outline: 2px solid var(--careers-red);
    outline-offset: 2px;
}

.careers-video {
    position: relative;
    flex: 0 0 auto;
    width: 307px;   /* overridden per breakpoint by the widget's own control */
    aspect-ratio: 9 / 16;   /* 307x545 in the comp */
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    scroll-snap-align: start;
    background: #161618;
    isolation: isolate;
}

.careers-video-poster {
    user-select: none;
    -webkit-user-drag: none;
}

.careers-video-poster,
.careers-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.careers-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.78) 100%);
    pointer-events: none;
    transition: opacity .25s ease;
}

.careers-video.is-playing::after,
.careers-video.is-playing .careers-video-caption,
.careers-video.is-playing .careers-video-play {
    opacity: 0;
    pointer-events: none;
}

.careers-video-caption {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 1;
    color: #fff;
    transition: opacity .25s ease;
}

.careers-video-person {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: .02em;
    font-weight: 500;
}

.careers-video-quote {
    margin: 0;
    font-size: clamp(1rem, 1.27vw, 1.375rem);
    line-height: 1.2;
    font-weight: 500;
}

.careers-video-play {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--careers-ink);
    cursor: pointer;
    transition: opacity .25s ease, transform .2s ease;
}

.careers-video-play svg {
    width: 18px;
    height: 18px;
}

.careers-video-play:hover {
    transform: scale(1.08);
}

/* Same mark, no interaction — used until a video file is attached. */
.careers-video-play--placeholder {
    cursor: default;
    opacity: .75;
}

.careers-video-play--placeholder:hover {
    transform: none;
}

.careers-video-play:focus-visible {
    outline: 2px solid var(--careers-red);
    outline-offset: 2px;
}

/* Caption sits above the play button, so nudge it clear. */
.careers-video:has(.careers-video-play) .careers-video-caption {
    bottom: 62px;
}

/* ---------- Carousel — tablet and mobile ---------- */

@media (max-width: 1024px) {
    .careers-videos-track {
        gap: 16px;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }

    .careers-videos-nav {
        justify-content: center;
        margin-top: 16px;
    }

    .careers-videos-arrow {
        width: 44px;
        height: 44px;
    }

    .careers-video-caption {
        right: 12px;
        bottom: 12px;
        left: 12px;
    }

    .careers-video:has(.careers-video-play) .careers-video-caption {
        bottom: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .careers-videos-track {
        scroll-behavior: auto;
    }

    .careers-videos-arrow,
    .careers-video-play,
    .careers-video-caption,
    .careers-video::after {
        transition: none;
    }

    .careers-video-play:hover {
        transform: none;
    }
}