/* Ledige stillinger — in the calm style of the other pages: a short dark
   intro like the team page, then white space with the search, quiet
   filters and compact cards. Heading sizes
   come from scale.css. */
.jobs-page{--jobs-gutter:max(var(--page-gutter),calc((100vw - 1536px)/2));background:#fff;color:var(--ink)}
.jobs-page [hidden]{display:none!important}
.jobs-main{padding-top:0}

/* ------------------------------------------------------------------ intro */
.jobs-hero{display:grid;gap:20px;padding:172px var(--jobs-gutter) 80px;background:var(--pine);color:#fff}
.jobs-hero>.eyebrow{width:fit-content;margin:0;padding-bottom:8px;border-bottom:2px solid var(--red);color:#b7c5d6}
.jobs-hero h1{margin:0}
.jobs-hero h1 span{color:var(--red)}
.jobs-hero>p:last-child{max-width:600px;margin:0;color:#d9e2ec;font-size:1rem;line-height:1.7}

/* ------------------------------------------------------ search + filters */
.jobs-catalog{padding:56px var(--jobs-gutter) 96px}
.jobs-filters{display:grid;gap:16px}
.jobs-filters label{display:flex;flex-direction:column;gap:6px;min-width:0;color:var(--ink);font-size:.8125rem;font-weight:500}
.jobs-filters input,.jobs-filters select{width:100%;height:44px;min-width:0;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:.9375rem;font-weight:400;transition:border-color .2s ease}
.jobs-filters input::placeholder{color:#7a8899}
.jobs-filters input:focus,.jobs-filters select:focus{border-color:var(--pine)}
.jobs-filter-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
/* the fold-out button is for phones only */
.jobs-filter-toggle{display:none}

/* ---------------------------------------------------------------- results */
.jobs-results-bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:48px 0 20px;padding-top:24px;border-top:1px solid var(--line)}
.jobs-results-bar h2{margin:0;font-size:1.25rem;line-height:1.3;letter-spacing:-.025em}
.jobs-reset{padding:0;background:none;color:var(--ink);font-size:.875rem;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;cursor:pointer;transition:color .2s ease}
.jobs-reset:hover,.jobs-reset:focus-visible{color:var(--red)}
.jobs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.job-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:26px;border:1px solid var(--line);border-radius:var(--card-radius);background:#fff;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.job-card:hover,.job-card:focus-within{border-color:var(--pine);box-shadow:0 14px 34px #071d3614;transform:translateY(-3px)}
.job-card-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:16px}
.job-card-area{min-width:0;overflow-wrap:anywhere;color:#a21d2c;font-size:.6875rem;font-weight:600;line-height:1.4;letter-spacing:.12em;text-transform:uppercase}
.job-type-tag{flex:none;padding:5px 10px;border-radius:999px;background:var(--mint);color:#3d4f63;font-size:.7rem;font-weight:600}
.job-card h3{margin:0;font-size:1.375rem;line-height:1.2;letter-spacing:-.03em;transition:color .2s ease}
.job-card:hover h3{color:var(--red)}
.job-card-facts{margin:8px 0 0;color:var(--muted);font-size:.875rem}
.job-card-summary{display:-webkit-box;margin:16px 0 0;overflow:hidden;color:var(--muted);font-size:.875rem;line-height:1.65;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.job-technologies{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.job-technologies li{padding:4px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:.75rem;line-height:1.3}
/* chips and the footer sit at the bottom, so cards in a row line up */
.job-card .job-technologies{margin-top:auto;padding-top:20px}
.job-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.job-card-deadline{color:#7a8899;font-size:.75rem;white-space:nowrap}
.job-card-button{display:inline-flex;align-items:center;gap:8px;padding:0;background:none;color:var(--ink);font-size:.875rem;font-weight:600;cursor:pointer}
/* the whole card opens the job, while the button stays the one control */
.job-card-button::after{content:'';position:absolute;inset:0;border-radius:inherit}
.job-card-arrow{color:var(--red);transition:transform .2s ease}
.job-card:hover .job-card-arrow{transform:translateX(3px)}
.jobs-empty{padding:40px 28px;border-radius:var(--card-radius);background:var(--mint);text-align:center}
.jobs-empty h3{margin:0 0 8px;font-size:1.25rem}
.jobs-empty p{max-width:460px;margin:0 auto;color:var(--muted);font-size:.9375rem;line-height:1.6}
.jobs-empty button{min-height:44px;margin-top:20px;padding:10px 18px;border-radius:var(--button-radius);background:transparent;box-shadow:inset 0 0 0 1.5px var(--pine);color:var(--pine);font-size:.875rem;font-weight:600;cursor:pointer}
.jobs-empty button:hover,.jobs-empty button:focus-visible{background:var(--pine);color:#fff}

/* ---------------------------------------------------------- one job */
.job-dialog .button{background:var(--pine);color:#fff;white-space:nowrap}
.job-dialog .button:hover,.job-dialog .button:focus-visible{background:#213852;color:#fff;box-shadow:none}
.job-interest-panel a:not(.button){display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:var(--button-radius);background:transparent;box-shadow:inset 0 0 0 1.5px var(--pine);color:var(--pine);font-size:.9375rem;font-weight:500;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.job-interest-panel a:not(.button):hover,.job-interest-panel a:not(.button):focus-visible{background:var(--pine);color:#fff}

.job-dialog{width:min(640px,calc(100% - 32px));max-height:min(820px,calc(100dvh - 32px));padding:0;border:0;border-radius:var(--card-radius);background:#fff;color:var(--ink);box-shadow:0 24px 64px #071d3638;overflow-y:auto}
.job-dialog::backdrop{background:#071d36a6}
.job-dialog-close{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:1.375rem;line-height:1;cursor:pointer;transition:border-color .2s ease}
.job-dialog-close:hover,.job-dialog-close:focus-visible{border-color:var(--pine)}
#job-dialog-content{padding:32px 36px 0}
.job-detail-header{padding-right:44px}
.job-detail-field{margin:0 0 8px;color:#a21d2c;font-size:.6875rem;font-weight:600;line-height:1.4;letter-spacing:.12em;text-transform:uppercase}
.job-dialog .job-detail-header h2{margin:0;font-size:clamp(1.5rem,2.4vw,1.875rem);line-height:1.15}
.job-detail-facts{margin:8px 0 0;color:var(--muted);font-size:.875rem}
.job-dialog .job-technologies{margin-top:18px}
.job-detail-description{margin:18px 0 0;color:#42566d;font-size:.9375rem;line-height:1.7}
.job-detail-section{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.job-detail-section h3{margin:0 0 8px;font-size:1rem;letter-spacing:-.02em}
.job-detail-list{margin:0;padding-left:18px;color:#42566d;font-size:.875rem;line-height:1.7}
.job-detail-list li+li{margin-top:2px}
/* the action and the deadline share one row */
.job-dialog-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 36px 32px}
.job-dialog-deadline{color:#7a8899;font-size:.8125rem;white-space:nowrap}
.job-interest-panel{margin:0 36px 32px;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--mint);color:var(--ink)}
.job-interest-panel h3{margin:0 0 6px;font-size:1.125rem}
.job-interest-panel>p{margin:0;color:var(--muted);font-size:.875rem;line-height:1.6}
.job-interest-panel>div{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* ---------------------------------------------------------------- smaller */
@media(max-width:1100px){
 .jobs-filter-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
 .jobs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 .jobs-hero{gap:16px;padding:132px var(--jobs-gutter) 48px}
 .jobs-hero>p:last-child{font-size:.9375rem}
 .jobs-catalog{padding-top:32px;padding-bottom:64px}
 /* search and a "Filtre" button side by side; the filters fold out below */
 .jobs-filters{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}
 .jobs-filter-toggle{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:.875rem;font-weight:600;cursor:pointer}
 .jobs-filter-toggle[aria-expanded=true]{border-color:var(--pine)}
 .jobs-filter-count{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-size:.6875rem}
 .jobs-filter-fields{display:none;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:6px}
 .jobs-filters.is-open .jobs-filter-fields{display:grid}
 .jobs-results-bar{margin-top:32px;padding-top:20px}
 .jobs-grid{grid-template-columns:1fr;gap:12px}
 .job-card{padding:22px}
 .job-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px)}
 #job-dialog-content{padding:24px 20px 0}
 .job-dialog-close{top:12px;right:12px}
 .job-dialog-actions{flex-direction:column;align-items:stretch;gap:10px;padding:20px 20px 24px}
 .job-dialog-actions .button{justify-content:center;width:100%}
 .job-dialog-deadline{text-align:center}
 .job-interest-panel{margin:0 20px 24px;padding:18px}
 .job-interest-panel>div{display:grid}
}
@media(prefers-reduced-motion:reduce){.job-card,.job-card-arrow{transition:none}.job-card:hover{transform:none}}