/* ==========================================================================
   Careers (Join Us) page — v3 redesign (2026-07-10)
   Rides on top of frontend/v3/home.css: tokens (--mm-*), navbar, footer,
   buttons, .mm-dots/.mm-ring decos and the mmfloat keyframes all come from
   there. Everything here is page chrome only, prefixed .mmj-*.
   ========================================================================== */

/* The hero + main together always fill the viewport, so the footer can never
   peek into the fold on a tall screen. Any leftover height becomes breathing
   room around the cards instead of dead space at the bottom. */
.mmj-page { min-height: calc(100vh - var(--mm-nav-h)); display: flex; flex-direction: column; }
.mmj-main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }

/* ---- hero head ---------------------------------------------------------- */
/* Compact band: the star of this page is the form, not the hero. The vertical
   rhythm is keyed to vh (not vw) so a short laptop screen tightens the fold
   automatically and the aside stack still lands above it. */
.mmj-hero {
    position: relative;
    padding: clamp(18px, 3.2vh, 40px) 0 clamp(16px, 2.8vh, 34px);
    background:
        radial-gradient(1200px 720px at 14% 18%, rgba(255, 228, 205, 0.18), transparent 60%),
        radial-gradient(1100px 780px at 90% 8%, rgba(255, 236, 221, 0.13), transparent 56%),
        linear-gradient(180deg, #FFFCF8 0%, #FEF6EF 62%, #FAF3EC 100%);
    overflow: clip;
}

.mmj-dots-hero {
    inset-inline-start: clamp(14px, 3vw, 54px);
    top: clamp(22px, 3vw, 44px);
    width: 130px;
    height: 104px;
    -webkit-mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 74%);
    mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 74%);
}

.mmj-ring-hero { inset-inline-end: -110px; top: -120px; width: 300px; height: 300px; }

.mmj-head { position: relative; text-align: center; }

.mmj-title {
    font-weight: 800;
    color: var(--mm-ink);
    font-size: clamp(28px, 3.2vw, 44px);
    letter-spacing: -0.5px;
    line-height: 1.3;
}
.mmj-title .mmj-accent { color: var(--mm-orange); }

.mmj-sub {
    margin: clamp(8px, 1.1vw, 14px) auto 0;
    color: var(--mm-muted);
    font-weight: 500;
    font-size: clamp(15px, 1.4vw, 19.5px);
    max-width: 42em;
    line-height: 1.8;
}

/* ---- main two-column ----------------------------------------------------- */
.mmj-main { padding: clamp(14px, 1.5vw, 24px) 0 clamp(24px, 2.4vw, 36px); }

.mmj-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(20px, 2.4vw, 36px);
    /* stretch, not start: the aside column runs the full height of the form
       beside it and its two cards split that height evenly */
    align-items: stretch;
}

.mmj-card { background: #ffffff; border-radius: 26px; box-shadow: 0 30px 64px rgba(184, 142, 108, 0.16); }

/* ---- form card ----------------------------------------------------------- */
/* every single-row control in the card shares one height, so the CV drop zone
   lines up exactly with the input sitting beside it */
.mmj-form-card { position: relative; padding: clamp(20px, 2vw, 28px); --mmj-ctl-h: clamp(46px, 3.6vw, 51px); }

.mmj-form-title { font-weight: 800; color: var(--mm-ink); font-size: clamp(21px, 1.9vw, 27px); }

.mmj-form-sub {
    margin: clamp(5px, 0.6vw, 8px) 0 clamp(11px, 1.2vw, 15px);
    color: var(--mm-muted);
    font-weight: 500;
    font-size: clamp(13px, 1.05vw, 15px);
    line-height: 1.65;
}

.mmj-label {
    display: block;
    font-weight: 800;
    color: #3A3631;
    font-size: clamp(13px, 1.05vw, 14.5px);
    margin-bottom: 7px;
}
.mmj-label .mmj-req { color: var(--mm-orange-deep); }
.mmj-optional { color: #B7AC9F; font-weight: 600; font-size: 0.82em; }
.mmj-cv-hint::before { content: "·"; margin-inline-end: 5px; }

.mmj-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: clamp(11px, 1.2vw, 15px); }

.mmj-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 9px clamp(14px, 1.4vw, 20px);
    border-radius: 12px;
    font-weight: 800;
    font-size: clamp(13px, 1.05vw, 15.5px);
    color: #6E6A62;
    background: #ffffff;
    border: 1.6px solid #ECE2D8;
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease, background .2s ease;
}
.mmj-pill:hover { border-color: #FFC3AC; }
.mmj-pill input { position: absolute; opacity: 0; pointer-events: none; }
.mmj-pill svg { display: none; flex: none; }
.mmj-pill:has(input:checked) {
    color: var(--mm-orange);
    border-color: var(--mm-orange);
    background: #FFF9F5;
    box-shadow: 0 6px 16px rgba(255, 107, 61, 0.16);
}
.mmj-pill:has(input:checked) svg { display: inline; }
.mmj-pill:focus-within { outline: 3px solid rgba(255, 107, 61, 0.35); outline-offset: 2px; }

.mmj-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 1.3vw, 18px);
    margin-bottom: clamp(12px, 1.4vw, 16px);
}

.mmj-field { min-width: 0; }
.mmj-field-gap { margin-bottom: clamp(12px, 1.4vw, 16px); }

.mmj-inp {
    width: 100%;
    border: 1.6px solid #ECE2D8;
    border-radius: 13px;
    padding: 10px 15px;
    /* set on the element, not the class: .mmj-area (textarea) keeps its padding */
    font-family: var(--mm-font); /* inputs/textareas don't inherit; textarea defaults to monospace */
    font-size: clamp(13.5px, 1.05vw, 15px);
    color: #3A3631;
    background: #FCFAF7;
    transition: border-color .2s, box-shadow .2s;
}
input.mmj-inp { height: var(--mmj-ctl-h); padding-block: 0; }
.mmj-inp::placeholder { color: #B7AC9F; }
.mmj-inp:focus {
    border-color: var(--mm-orange);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.12);
    background: #ffffff;
}

.mmj-ltr { direction: ltr; }
[dir="rtl"] .mmj-ltr { text-align: right; }

.mmj-err { margin-top: 8px; color: #D93A3A; font-weight: 700; font-size: clamp(12.5px, 1vw, 14px); }

/* ---- CV dropzone ---------------------------------------------------------- */
.mmj-cv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 2px dashed #E7C9B6;
    border-radius: 16px;
    background: #FDF6F0;
    height: var(--mmj-ctl-h);
    padding: 0 clamp(12px, 1.4vw, 16px);
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.mmj-cv:hover, .mmj-cv.drag { border-color: var(--mm-orange); background: #FFF6F1; }

.mmj-cv-txt { min-width: 0; overflow: hidden; }
.mmj-cv-t1 { font-weight: 800; color: #3A3631; font-size: clamp(13px, 1.05vw, 14.5px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mmj-cv-ic {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--mm-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mm-orange);
}

.mmj-cv.has { border-style: solid; border-color: var(--mm-orange); background: #ffffff; }
.mmj-cv-file { display: none; align-items: center; gap: 10px; min-width: 0; }
.mmj-cv.has .mmj-cv-file { display: flex; }
.mmj-cv.has .mmj-cv-txt { display: none; }
.mmj-cv-name { font-weight: 800; color: #3A3631; font-size: clamp(13px, 1.1vw, 15px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmj-cv-size { color: #A99C8E; font-weight: 600; font-size: 12.5px; flex: none; }

.mmj-cv-x {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1.6px solid #ECE2D8;
    background: #ffffff;
    color: #8A8178;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mmj-cv-x:hover { color: var(--mm-orange-deep); border-color: #FFC3AC; }

.mmj-area { resize: vertical; min-height: clamp(78px, 7vw, 96px); line-height: 1.7; }

.mmj-submit { width: 100%; height: 52px; border-radius: 15px; font-size: clamp(15px, 1.2vw, 16.5px); margin-top: clamp(11px, 1.2vw, 15px); }

/* ---- aside ---------------------------------------------------------------- */
/* The two aside cards read as one column that mirrors the form's height — equal
   halves, no sticky follow. Their vertical rhythm is min(vw, vh) rather than
   plain vw so a short laptop tightens the stack instead of spilling the fold. */
.mmj-aside {
    --mmj-rhythm: min(1.4vw, 1.9vh);
    display: flex;
    flex-direction: column;
    gap: clamp(14px, var(--mmj-rhythm), 18px);
}
.mmj-why, .mmj-steps { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; }

.mmj-why {
    position: relative;
    overflow: hidden;
    background: linear-gradient(165deg, #FF7A45 0%, #F45A2A 100%);
    border-radius: 24px;
    box-shadow: 0 26px 56px rgba(244, 90, 42, 0.3);
    padding: clamp(20px, min(2.2vw, 3vh), 30px);
    color: #ffffff;
}
.mmj-why-blob { position: absolute; inset-inline-end: -70px; top: -70px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); pointer-events: none; }
.mmj-why-blob2 { position: absolute; inset-inline-start: -50px; bottom: -80px; width: 170px; height: 170px; border-radius: 38px; background: rgba(255, 255, 255, 0.05); transform: rotate(18deg); pointer-events: none; }

.mmj-why-title { position: relative; font-weight: 800; font-size: clamp(19px, 1.7vw, 24px); margin-bottom: clamp(12px, min(1.5vw, 2vh), 18px); }

.mmj-why-list { position: relative; display: flex; flex-direction: column; gap: clamp(11px, min(1.2vw, 1.6vh), 14px); }

.mmj-why-item { display: flex; align-items: center; gap: 13px; }
.mmj-why-ic {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mmj-why-item span:last-child { font-weight: 700; font-size: clamp(14px, 1.2vw, 16.5px); }

.mmj-steps { border-radius: 24px; box-shadow: var(--mm-card-shadow); padding: clamp(20px, min(2.2vw, 3vh), 28px); }

.mmj-steps-title { font-weight: 800; color: var(--mm-ink); font-size: clamp(17px, 1.5vw, 21px); margin-bottom: clamp(12px, min(1.4vw, 1.9vh), 17px); }

.mmj-steps-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: clamp(11px, min(1.2vw, 1.6vh), 14px); }

.mmj-step { display: flex; align-items: center; gap: 13px; }
.mmj-step-n {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mm-soft);
    color: var(--mm-orange);
    font-weight: 800;
    font-size: 14.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mmj-step span:last-child { font-weight: 600; color: #55504A; font-size: clamp(13.5px, 1.1vw, 15.5px); }

.mmj-steps-sep { height: 1px; background: var(--mm-line); margin: clamp(12px, min(1.4vw, 1.9vh), 17px) 0 clamp(10px, min(1.2vw, 1.6vh), 14px); }

.mmj-ask { font-weight: 700; color: var(--mm-muted); font-size: clamp(13px, 1.05vw, 14.5px); line-height: 1.9; }
.mmj-ask a { color: var(--mm-orange-deep); font-weight: 800; direction: ltr; unicode-bidi: embed; }
.mmj-ask a:hover { text-decoration: underline; }

/* ---- empty state ----------------------------------------------------------- */
.mmj-empty { position: relative; padding: clamp(40px, 4.4vw, 66px) clamp(26px, 3vw, 44px); text-align: center; }

.mmj-empty-ic {
    width: clamp(66px, 5.6vw, 84px);
    height: clamp(66px, 5.6vw, 84px);
    border-radius: 20px;
    background: var(--mm-soft);
    color: var(--mm-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto clamp(18px, 2vw, 26px);
}

.mmj-empty-title { font-weight: 800; color: var(--mm-ink); font-size: clamp(20px, 1.9vw, 27px); }

.mmj-empty-desc {
    margin: clamp(12px, 1.4vw, 18px) auto 0;
    color: var(--mm-muted);
    font-weight: 500;
    font-size: clamp(14px, 1.15vw, 16px);
    line-height: 1.9;
    max-width: 34em;
}

.mmj-empty-cta { margin-top: clamp(20px, 2.4vw, 30px); }

/* ---- entrance -------------------------------------------------------------- */
.mmj-up {
    opacity: 0;
    transform: translateY(18px);
    animation: mmjUp .65s cubic-bezier(.16, 1, .3, 1) forwards;
    animation-delay: var(--mmj-d, 0ms);
}
@keyframes mmjUp { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .mmj-up { animation: none; opacity: 1; transform: none; }
}

/* ---- responsive ------------------------------------------------------------- */

/* Short laptop screens: the aside stack is meant to end at the fold, and on a
   768px-tall viewport the padding rhythm alone can't close the gap. Only the
   chrome shrinks here (icon chips, numbers, the trailing contact line) — the
   copy keeps its size. */
@media (min-width: 1021px) and (max-height: 830px) {
    /* the form has to hold the fold too, so its rhythm tightens with the aside */
    .mmj-hero { padding: 14px 0 12px; }
    .mmj-title { font-size: clamp(26px, 2.7vw, 36px); }
    .mmj-form-card { padding: clamp(18px, 1.9vw, 24px); }
    .mmj-form-title { font-size: clamp(20px, 1.75vw, 24px); }
    .mmj-form-sub { margin-bottom: 10px; }
    .mmj-label { margin-bottom: 5px; }
    .mmj-form-card { --mmj-ctl-h: 44px; }
    .mmj-pill { padding: 8px 16px; }
    .mmj-pills { margin-bottom: 11px; }
    .mmj-two, .mmj-field-gap { margin-bottom: 9px; }
    .mmj-area { min-height: 58px; }
    .mmj-submit { height: 48px; margin-top: 11px; }
    .mmj-why-ic { width: 34px; height: 34px; border-radius: 10px; }
    .mmj-why-ic svg { width: 17px; height: 17px; }
    .mmj-step-n { width: 28px; height: 28px; font-size: 13.5px; }
    .mmj-ask { line-height: 1.7; }
}

@media (max-width: 1020px) {
    .mmj-grid { grid-template-columns: 1fr; }
    .mmj-why, .mmj-steps { flex: 0 0 auto; }
}

@media (max-width: 700px) {
    .mmj-two { grid-template-columns: 1fr; }
}