.jobs-directory { background: linear-gradient(160deg, #f4f8fb, #fff 45%, #f5faf7); }
.job-search-panel { display: grid; align-items: end; gap: 12px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 48px rgba(11, 35, 64, .09); grid-template-columns: 1.45fr repeat(3, .75fr); }
.job-search-panel label { position: relative; display: grid; gap: 7px; color: var(--navy); font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.job-search-panel input, .job-search-panel select { width: 100%; min-height: 50px; padding: 12px 13px; color: var(--ink); background: #f8fafc; border: 1px solid var(--line); border-radius: 9px; font-size: .78rem; letter-spacing: normal; text-transform: none; }
.job-search-main input { padding-left: 43px; }
.job-search-main b { position: absolute; bottom: 13px; left: 15px; color: var(--blue2); font-size: 1.2rem; line-height: 1; }
.job-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 24px 0 16px; }
.job-results-bar p { margin: 0; color: var(--muted); font-size: .75rem; }
.job-results-bar strong { color: var(--navy); font-size: 1rem; }
.job-results-bar button { padding: 0; color: var(--blue2); background: transparent; border: 0; font-size: .72rem; font-weight: 800; }
.modern-job-grid { display: grid; gap: 17px; grid-template-columns: repeat(3, 1fr); }
.modern-job-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 35px rgba(11, 35, 64, .06); cursor: pointer; transition: transform .25s, box-shadow .25s, border-color .25s; }
.modern-job-card:hover { border-color: color-mix(in srgb, var(--job-accent) 35%, var(--line)); box-shadow: 0 22px 50px rgba(11, 35, 64, .12); transform: translateY(-6px); }
.modern-job-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--job-accent) 32%, transparent); outline-offset: 3px; }
.modern-job-image { position: relative; height: 205px; overflow: hidden; background: var(--job-accent); }
.modern-job-image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(6, 28, 45, .78), transparent 62%); }
.modern-job-image > img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.modern-job-card:hover .modern-job-image > img { transform: scale(1.045); }
.modern-job-image > div { position: absolute; z-index: 1; right: 18px; bottom: 16px; left: 18px; display: flex; align-items: center; gap: 9px; color: #fff; }
.modern-job-flag { width: 36px; height: 25px; object-fit: cover; border: 2px solid rgba(255, 255, 255, .9); border-radius: 4px; box-shadow: 0 6px 14px rgba(0, 0, 0, .24); }
.modern-job-image > div strong { font-size: .72rem; }
.modern-job-body { padding: 23px; }
.modern-job-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modern-job-meta span { color: var(--job-accent); font-size: .61rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.modern-job-meta small { padding: 5px 8px; color: #27613f; background: #edf8f1; border-radius: 999px; font-size: .56rem; font-weight: 800; }
.modern-job-body h3 { margin: 25px 0 7px; color: var(--navy); font: 800 1.22rem/1.25 "Manrope", sans-serif; }
.modern-job-body > p { margin: 0; color: var(--muted); font-size: .69rem; }
.modern-job-footer { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.modern-job-footer strong { color: var(--navy); font-size: .72rem; }
.modern-job-footer span { color: var(--blue2); font-size: .68rem; font-weight: 800; }
.job-empty { padding: 55px; background: #fff; border: 1px dashed var(--line); border-radius: 18px; text-align: center; }
.job-empty > span { color: var(--blue2); font-size: 2.4rem; }
.job-empty h3 { margin: 12px 0 5px; color: var(--navy); }
.job-empty p { margin: 0; color: var(--muted); font-size: .76rem; }
.jobs-detail-modal { width: min(calc(100% - 30px), 900px); max-height: min(90vh, 900px); padding: 0; overflow: auto; color: var(--ink); background: #fff; border: 0; border-radius: 24px; box-shadow: 0 35px 100px rgba(5, 24, 45, .38); }
.jobs-detail-modal::backdrop { background: rgba(5, 20, 34, .8); backdrop-filter: blur(7px); }
.jobs-modal-image { position: relative; min-height: 310px; overflow: hidden; color: #fff; background: var(--job-accent); }
.jobs-modal-image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(5, 24, 45, .96), rgba(5, 24, 45, .08) 75%); }
.jobs-modal-image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jobs-modal-image > button { position: absolute; z-index: 2; top: 20px; right: 20px; display: grid; width: 42px; height: 42px; padding: 0; color: #fff; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; font-size: 1.45rem; place-items: center; }
.jobs-modal-image > div { position: absolute; z-index: 1; right: 32px; bottom: 29px; left: 32px; }
.jobs-modal-image span { color: #b8d6f7; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.jobs-modal-destination { display: flex; align-items: center; gap: 9px; }
.jobs-modal-destination img { width: 38px; height: 26px; object-fit: cover; border: 2px solid rgba(255, 255, 255, .85); border-radius: 4px; }
.jobs-modal-image h2 { margin: 7px 0; font: 800 clamp(2rem, 4vw, 3.4rem)/1.05 "Manrope", sans-serif; letter-spacing: -.045em; }
.jobs-modal-image p { margin: 0; color: rgba(255, 255, 255, .7); font-size: .75rem; }
.jobs-modal-body { padding: 30px 32px 34px; }
.jobs-modal-facts { display: grid; overflow: hidden; margin-bottom: 30px; background: #f5f8fb; border: 1px solid var(--line); border-radius: 14px; grid-template-columns: repeat(3, 1fr); }
.jobs-modal-facts div { padding: 18px; border-right: 1px solid var(--line); }
.jobs-modal-facts div:last-child { border: 0; }
.jobs-modal-facts small, .jobs-modal-facts strong { display: block; }
.jobs-modal-facts small { color: var(--muted); font-size: .59rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.jobs-modal-facts strong { margin-top: 7px; color: var(--navy); font-size: .8rem; }
.jobs-modal-columns { display: grid; gap: 38px; grid-template-columns: 1fr 1fr; }
.jobs-modal-columns h3 { margin: 0 0 16px; color: var(--navy); font-size: 1rem; }
.jobs-modal-columns ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.jobs-modal-columns li { position: relative; padding-left: 23px; color: var(--muted); font-size: .74rem; line-height: 1.55; }
.jobs-modal-columns li::before { position: absolute; top: .2em; left: 0; display: grid; width: 15px; height: 15px; content: "✓"; color: #fff; background: var(--job-accent); border-radius: 50%; font-size: .5rem; font-weight: 900; place-items: center; }
.jobs-modal-note { margin: 28px 0 0; padding: 14px 16px; color: #6b5a28; background: #fff8df; border: 1px solid #f1df9f; border-radius: 9px; font-size: .66rem; line-height: 1.55; }
.jobs-modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; }
.jobs-modal-actions .outline { color: var(--navy); background: #fff; border-color: var(--line); }
.jobs-modal-pathways { display: grid; gap: 12px; margin-top: 24px; grid-template-columns: 1fr 1fr; }
.jobs-modal-pathways > div { display: grid; align-content: start; gap: 8px; padding: 19px; background: #f5f8fb; border: 1px solid var(--line); border-radius: 13px; }
.jobs-modal-pathways > div:last-child { background: #fff9e8; border-color: #efdda1; }
.jobs-modal-pathways small { color: var(--blue2); font-size: .63rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.jobs-modal-pathways strong { min-height: 42px; color: var(--navy); font-size: .84rem; line-height: 1.5; }
.jobs-modal-pathways .btn { width: 100%; margin-top: 4px; }
.jobs-employer-modal { width: min(calc(100% - 30px), 760px); max-height: 90vh; padding: 0; overflow: auto; color: var(--ink); background: #fff; border: 0; border-radius: 22px; box-shadow: 0 35px 100px rgba(5, 24, 45, .38); }
.jobs-employer-modal::backdrop { background: rgba(5, 20, 34, .8); backdrop-filter: blur(7px); }
.jobs-employer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 28px 30px; color: #fff; background: linear-gradient(125deg, var(--navy), var(--blue2)); }
.jobs-employer-head .eyebrow { margin-bottom: 8px; color: var(--yellow); }
.jobs-employer-head h2 { margin: 0; color: #fff; font: 800 clamp(1.65rem, 3.5vw, 2.6rem)/1.12 "Manrope", sans-serif; letter-spacing: -.04em; }
.jobs-employer-head p:last-child { max-width: 570px; margin: 10px 0 0; color: rgba(255, 255, 255, .75); font-size: .76rem; line-height: 1.6; }
.jobs-employer-head > button { display: grid; width: 40px; height: 40px; flex: 0 0 40px; padding: 0; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; font-size: 1.4rem; place-items: center; }
.jobs-employer-body { padding: 28px 30px 32px; }
.jobs-employer-form { display: grid; gap: 16px; }
.jobs-employer-form .form-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.jobs-employer-form .field label { display: block; margin-bottom: 7px; color: var(--navy); font-size: .72rem; font-weight: 800; }
.jobs-employer-form .field input, .jobs-employer-form .field textarea { width: 100%; min-height: 47px; padding: 11px 13px; color: var(--ink); background: #fff; border: 1px solid #cdd8e2; border-radius: 8px; }
.jobs-employer-form .field textarea { min-height: 115px; resize: vertical; }
.jobs-employer-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 4px; }
.jobs-employer-actions .outline { color: var(--navy); background: #fff; border-color: var(--line); }
.jobs-submission-success { display: grid; gap: 5px; margin: 0 0 28px; padding: 18px 20px; border-left: 4px solid #2f9365; box-shadow: 0 10px 28px rgba(11, 35, 64, .08); }
.jobs-submission-success strong { color: #195d39; font: 800 .78rem "Manrope", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.jobs-submission-success span { color: #315f48; }
@media (max-width: 1000px) { .job-search-panel { grid-template-columns: 1fr 1fr; } .modern-job-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 650px) { .job-search-panel, .modern-job-grid, .jobs-modal-facts, .jobs-modal-columns, .jobs-modal-pathways, .jobs-employer-form .form-row { grid-template-columns: 1fr; } .jobs-modal-facts div { border-right: 0; border-bottom: 1px solid var(--line); } .jobs-modal-image { min-height: 260px; } .jobs-modal-body, .jobs-employer-body { padding: 24px 21px 27px; } .jobs-employer-head { padding: 24px 21px; } .jobs-modal-actions, .jobs-employer-actions { flex-direction: column-reverse; } .jobs-modal-actions .btn, .jobs-employer-actions .btn { width: 100%; } }

/* Job metadata remains secondary without dropping below a comfortable reading size. */
.modern-job-image > div strong { font-size: .78rem; }
.modern-job-meta span { color: #36536f; font-size: .72rem; }
.modern-job-meta small { font-size: .68rem; }
.modern-job-body > p { color: #526579; font-size: .78rem; }
.modern-job-footer strong,
.modern-job-footer span { font-size: .76rem; }