/* Recruitment: the offers list (jobs_list) and the offer page (job_detail). */

/* ---- list ---------------------------------------------------------------- */
.jobs{padding:72px 0 104px}
.page-hero + .jobs{padding-top:12px}
.jobs-heading{max-width:24ch}
.jobs-lead{margin-top:14px}
.jobs-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:34px 0 22px}
.jobs-select{position:relative;flex:1 1 200px;max-width:280px}
.jobs-select select{
  width:100%;appearance:none;cursor:pointer;font:inherit;font-size:14px;font-weight:700;color:var(--ink);
  background:#fff;border:1.6px solid var(--line-2);border-radius:999px;padding:13px 44px 13px 20px;transition:.2s;
}
.jobs-select select:hover,.jobs-select select:focus{outline:0;border-color:var(--red)}
.jobs-select select:focus-visible{box-shadow:0 0 0 4px var(--red-tint)}
.jobs-select::after{
  content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;pointer-events:none;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);
}
.jobs-count{margin-left:auto;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}

.jobs-list{display:flex;flex-direction:column;gap:12px}
.job-row[hidden]{display:none}
.job-row a{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto auto;align-items:center;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px 26px;transition:.22s;
}
.job-row a:hover{border-color:var(--red);box-shadow:var(--shadow);transform:translateY(-2px)}
.job-row-title{font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.job-row-club{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink-2)}
.job-row-club svg{width:17px;height:17px;flex:0 0 auto;color:var(--red)}
.job-tag{
  display:inline-block;background:var(--bg-soft);border:1px solid var(--line);color:var(--ink-2);
  font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:999px;
}
.job-row-cta{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--red);white-space:nowrap}
.job-row-cta svg{width:16px;height:16px;transition:transform .2s}
.job-row a:hover .job-row-cta svg{transform:translateX(4px)}
.jobs-empty{margin-top:30px;padding:28px;border:1px dashed var(--line-2);border-radius:var(--radius-sm);color:var(--muted);text-align:center;font-weight:600}
.jobs-empty[hidden]{display:none}

@media(max-width:760px){
  .jobs-select{max-width:none}
  .jobs-count{margin-left:0;width:100%}
  .job-row a{grid-template-columns:1fr auto;gap:8px 14px;padding:18px 20px}
  .job-row-title{grid-column:1 / -1}
  .job-row-meta{display:none}
}

/* ---- offer page ---------------------------------------------------------- */
.job-page{padding-top:calc(var(--nav-h) + 56px);padding-bottom:96px}
.job-layout{display:block}
.job-main{max-width:760px}
.job-page.has-apply .job-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,460px);gap:64px;align-items:start}
.job-back{font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--muted);margin-bottom:22px}
.job-back a:hover{color:var(--red)}
.job-title{font-weight:900;letter-spacing:-.02em;text-transform:uppercase;font-size:clamp(32px,4.4vw,56px);line-height:1}
.job-facts{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 6px}
.job-facts li{
  display:inline-flex;align-items:center;gap:8px;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:999px;padding:8px 15px;font-size:13px;font-weight:700;color:var(--ink-2);
}
.job-facts svg{width:16px;height:16px;color:var(--red);flex:0 0 auto}
.job-summary{margin-top:22px}
.job-rich{margin-top:22px;color:var(--ink-2);font-size:16px;line-height:1.75}
.job-rich > * + *{margin-top:14px}
.job-rich ul,.job-rich ol{padding-left:22px}
.job-rich ul{list-style:disc}
.job-rich ol{list-style:decimal}
.job-rich a{color:var(--red);text-decoration:underline}
.job-rich h3,.job-rich h4{color:var(--ink);font-weight:800;margin-top:24px}
.job-intro{margin-top:26px;font-size:16px;font-weight:700;color:var(--ink)}
.job-sub{margin-top:34px;font-size:20px;font-weight:800;letter-spacing:-.01em}
.job-bullets{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.job-bullets li{position:relative;padding-left:22px;color:var(--ink-2);line-height:1.6}
.job-bullets li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--red)}
.job-perks li{padding-left:0;display:flex;gap:10px}
.job-perks li::before{display:none}
.job-perks svg{width:18px;height:18px;flex:0 0 auto;margin-top:3px;color:var(--red)}
.job-apply-jump{display:none;margin-top:30px}

/* The application card (a `form` block moved here by job_detail). */
.job-apply .form-card{max-width:none;margin:0;padding:30px}
.job-apply .form-card.reveal{opacity:1;transform:none}
.job-apply .form-grid{grid-template-columns:1fr;gap:14px}
.job-apply .form-card > .h-display{font-size:22px;line-height:1.2;text-transform:none;letter-spacing:-.01em;margin-bottom:20px !important}

.job-apply--red .form-card{background:var(--red);border-color:var(--red);box-shadow:var(--shadow-red);color:#fff}
.job-apply--red .form-card > .h-display,
.job-apply--red .field label,
.job-apply--red .field label .req,
.job-apply--red .form-consent,
.job-apply--red .form-consent .req{color:#fff}
.job-apply--red .field .hint,
.job-apply--red .form-actions .muted{color:rgba(255,255,255,.82)}
.job-apply--red .field input,.job-apply--red .field select,.job-apply--red .field textarea{background-color:#fff;border-color:transparent}
.job-apply--red .field input:focus,.job-apply--red .field select:focus,.job-apply--red .field textarea:focus{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.35)}
.job-apply--red .field input[type=file]{color:var(--ink-2)}
.job-apply--red .form-consent input{accent-color:var(--ink)}
.job-apply--red .form-actions .btn-red{background:#fff;color:var(--red);box-shadow:0 14px 30px -16px rgba(0,0,0,.45)}
.job-apply--red .form-actions .btn-red:hover{background:var(--ink);color:#fff}
.job-apply--red .form-error{background:#fff;border-radius:10px;padding:10px 12px}

@media(max-width:980px){
  .job-page.has-apply .job-layout{grid-template-columns:1fr;gap:40px}
  .job-page.has-apply .job-apply-jump{display:inline-flex}
}
@media(max-width:560px){
  .job-page{padding-top:calc(var(--nav-h) + 34px)}
  .job-apply .form-card{padding:22px}
}