/* Career + job application pages. Built from the homepage system in css/home.css
   (hero, story, labels, headings, buttons, links, motion); only page-specific pieces live here. */

/* Hero: same as the homepage hero, with the team photo and a shorter height */
.career-hero .home-hero__bg::after {
    background-image: url('../img/photos/aratours-team-careers-switzerland.webp');
}
.home-hero.career-hero {
    min-height: min(720px, calc(100vh - var(--home-nav-h)));
    min-height: min(720px, calc(100svh - var(--home-nav-h)));
}
/* Room for the logo that replaces the header */
.home-page--bare .home-hero.career-hero {
    padding-top: clamp(130px, 18vh, 180px);
}
@media (max-width: 767px) {
    .home-page--bare .home-hero.career-hero { padding-top: 110px; }
}
.career-hero::before {
    /* the photo already has a dark tint, so this only adds contrast behind the text */
    background: linear-gradient(to right, rgba(0, 43, 67, .45), rgba(0, 43, 67, .15) 60%, rgba(0, 43, 67, 0));
}
.career-arrow-down {
    transform: rotate(90deg);
}
.home-btn:hover .career-arrow-down {
    transform: rotate(90deg) translateX(4px);
}

/* Story sections: photo on the right, as in the design */
.career-story {
    flex-direction: row-reverse;
    background: #f9f9f8;
}
.career-story--culture {
    background: #fff;
}

/* Open positions */
.career-positions {
    padding: 80px var(--home-gutter);
    background: #e9f0f4;
}
.career-positions__empty {
    margin-top: 30px;
}
.career-roles {
    margin-top: 40px;
    border-bottom: 1px solid rgba(35, 50, 59, .18);
}
.career-role {
    padding: 32px 0;
    border-top: 1px solid rgba(35, 50, 59, .18);
}
.career-role__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}
.home-page .career-role__title {
    color: var(--home-ink);
    font-family: 'Lora', serif;
    font-size: 30px;
    line-height: 1.2;
}
.home-page .career-tag {
    padding: 5px 8px;
    background: rgba(7, 48, 72, .08);
    color: var(--home-navy);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 16px;
    text-transform: uppercase;
}
.home-page .career-role__meta {
    margin-top: 10px;
    color: var(--home-muted);
    font-size: 16px;
    line-height: 1.5;
}
.career-role__meta span {
    margin: 0 6px;
}

/* Role disclosure: native <details>, styled as the homepage's red link */
.career-role__details {
    margin-top: 24px;
}
.home-page .career-role__toggle {
    list-style: none;
    font-size: 17px;
    cursor: pointer;
}
.career-role__toggle::-webkit-details-marker {
    display: none;
}
.home-page .career-role__toggle img,
.home-page .career-role__toggle:hover img {
    width: 16px;
    height: 16px;
    transform: rotate(90deg);
}
.home-page .career-role__details[open] .career-role__toggle img {
    transform: rotate(-90deg);
}
.career-role__toggle-hide,
.career-role__details[open] .career-role__toggle-view {
    display: none;
}
.career-role__details[open] .career-role__toggle-hide {
    display: inline;
}
.career-role__body {
    max-width: 1060px;
    margin-top: 32px;
    animation: career-reveal .6s var(--home-ease);
}
@keyframes career-reveal {
    from { opacity: 0; transform: translateY(-10px); }
}
.home-page .career-role__label {
    margin: 0 0 10px;
    color: var(--home-ink);
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.career-role__body .home-btn {
    margin-top: 8px;
}

/* Rich text from the vacancy admin: normalise styles pasted in from Word / other sites */
.career-rich {
    margin-bottom: 28px;
    color: var(--home-muted);
    font-size: 16px;
    line-height: 1.6;
}
.career-rich * {
    color: inherit !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: inherit !important;
    line-height: inherit !important;
    background: none !important;
}
.home-page .career-rich p,
.career-rich ul,
.career-rich ol {
    margin: 0 0 8px;
}
.career-rich ul,
.career-rich ol {
    padding-left: 22px;
}
.career-rich li + li {
    margin-top: 6px;
}
.career-rich b,
.career-rich strong {
    color: var(--home-ink) !important;
    font-weight: 700;
}
.career-rich > :last-child {
    margin-bottom: 0;
}

/* Benefits (culture section) */
.career-benefits {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.home-page .career-benefit__title {
    margin-bottom: 8px;
    color: var(--home-ink);
    font-size: 20px;
    font-weight: 700;
}
.career-benefit__text {
    color: var(--home-muted);
    font-size: 16px;
    line-height: 1.6;
}

/* Open application band */
.career-open {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px 80px;
    padding: 80px var(--home-gutter);
    background: #f1f3f5;
}
.career-open__copy {
    display: flex;
    flex: 0 1 780px;
    flex-direction: column;
    gap: 20px;
}

/* Application page */
.career-apply {
    padding: 72px var(--home-gutter) 96px;
    background: #f9f9f8;
}
.career-apply .home-label {
    margin-bottom: 18px;
}
.career-apply .career-role__head {
    gap: 12px 20px;
}
.career-apply .career-role__meta {
    margin-top: 14px;
}
.career-form {
    max-width: 768px;
    margin-top: 40px;
    padding-top: 36px;
    border-top: 1px solid rgba(35, 50, 59, .18);
}
.home-page .career-form__intro {
    margin-bottom: 32px;
}
.career-form__trap {
    position: absolute;
    left: -9999px;
}
.career-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 32px;
}
.career-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.career-field--wide {
    grid-column: 1 / -1;
}
.home-page .career-field > label {
    margin: 0;
    color: var(--home-ink);
    font-size: 15px;
    font-weight: 700;
}
.career-field input[type="text"],
.career-field input[type="email"],
.career-field textarea,
.career-file {
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #c5ccd1;
    border-radius: 5px;
    background: #fff;
    color: var(--home-ink);
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    transition: border-color .25s, box-shadow .25s;
}
.career-field textarea {
    min-height: 110px;
    resize: vertical;
}
.career-field ::placeholder {
    color: #8c959b;
    opacity: 1;
}
.career-field input:focus,
.career-field textarea:focus,
.career-file:focus-within {
    border-color: var(--home-navy);
    outline: none;
    box-shadow: 0 0 0 3px rgba(7, 48, 72, .12);
}
.career-field__error {
    color: var(--home-red);
    font-size: 14px;
}
.career-file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 0;
    padding-bottom: 0;
    cursor: pointer;
}
.career-file input {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}
.home-page .career-file__button {
    flex: none;
    padding: 4px 12px;
    border-radius: 4px;
    background: #eef2f5;
    color: var(--home-navy);
    font-size: 14px;
    font-weight: 700;
    transition: background-color .25s;
}
.career-file:hover .career-file__button {
    background: #dde5eb;
}
.home-page .career-file__name {
    overflow: hidden;
    color: #8c959b;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-page .career-file__name.is-filled {
    color: var(--home-ink);
}
.career-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    margin-top: 36px;
}
.career-open .home-btn,
.career-form__actions .home-btn {
    padding: 17px 34px;
    font-size: 19px;
    cursor: pointer;
}
.career-form__actions .home-btn:disabled {
    opacity: .6;
    cursor: wait;
}
.career-form__actions .home-link {
    font-size: 17px;
}

/* Responsive (mirrors the homepage breakpoints) */
@media (max-width: 1599px) {
    .home-page .career-role__title { font-size: 26px; }
}
@media (max-width: 1199px) {
    .career-story { flex-direction: column; }
    .career-positions,
    .career-open { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 767px) {
    .career-positions,
    .career-open { padding-top: 48px; padding-bottom: 48px; }
    .career-roles { margin-top: 28px; }
    .career-role { padding: 24px 0; }
    .home-page .career-role__title { font-size: 22px; }
    .home-page .career-role__meta { font-size: 15px; }
    .home-page .career-role__toggle { font-size: 15px; }
    .career-role__body { margin-top: 24px; }
    .career-rich,
    .career-benefit__text { font-size: 15px; }
    .home-page .career-benefit__title { font-size: 18px; }
    .career-open .home-btn { width: 100%; }
    .career-apply { padding-top: 48px; padding-bottom: 56px; }
    .career-form { margin-top: 28px; padding-top: 28px; }
    .career-form__grid { grid-template-columns: 1fr; gap: 22px; }
    .career-form__actions .home-btn { width: 100%; justify-content: center; padding: 15px 24px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .career-role__body { animation: none; }
}

/* "Application sent" popup (rendered outside .home-page, so it carries the homepage tokens itself) */
.site-thanks {
    --home-red: #e63b2a;
    --home-navy: #073048;
    --home-ink: #23323b;
    --home-muted: #5d6468;
    position: fixed;
    z-index: 200;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.has-thanks body {
    overflow: hidden;
}
.site-thanks__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 17, 27, .62);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    opacity: 0;
    transition: opacity .5s var(--home-ease);
}
.site-thanks__card {
    position: relative;
    width: 100%;
    max-width: 540px;
    padding: 56px 48px 48px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(1, 17, 27, .35);
    text-align: center;
    opacity: 0;
    transform: translateY(40px) scale(.94);
    transition: opacity .6s var(--home-ease), transform .8s var(--home-ease);
}
.site-thanks.is-open .site-thanks__backdrop,
.site-thanks.is-open .site-thanks__card {
    opacity: 1;
}
.site-thanks.is-open .site-thanks__card {
    transform: none;
}
.site-thanks.is-closing .site-thanks__card {
    transform: translateY(20px) scale(.97);
}
.site-thanks__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--home-muted);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .25s, color .25s;
}
.site-thanks__close:hover {
    background: #eef2f5;
    color: var(--home-ink);
}
.site-thanks__icon svg {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
}
.site-thanks__icon path {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
}
.site-thanks.is-open .site-thanks__icon path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.8s .35s cubic-bezier(.65, 0, .35, 1);
}
.site-thanks .home-label {
    margin: 0 0 12px;
    color: var(--home-red);
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.site-thanks__title {
    margin: 0;
    color: var(--home-ink);
    font-family: 'Lora', serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.15;
}
.site-thanks__text {
    margin: 18px 0 32px;
    color: var(--home-muted);
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    line-height: 1.6;
}
.site-thanks .home-btn {
    padding: 16px 30px;
    font-size: 18px;
    cursor: pointer;
}
.site-thanks button:focus {
    outline: none;
}
@media (max-width: 767px) {
    .site-thanks__card { padding: 48px 24px 28px; }
    .site-thanks__title { font-size: 30px; }
    .site-thanks__text { font-size: 16px; }
    .site-thanks .home-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .site-thanks__card,
    .site-thanks__backdrop { transition: none; }
    .site-thanks__icon path { stroke-dashoffset: 0; }
}