/* Tarleaks careers — styles for /careers/ and /ar/careers/ only, loaded after site.css (R105).
   Source of truth: this file (hand-written, committed). Colours, type and spacing come from the tokens in
   site.css, so light, dark and RTL follow by themselves; logical properties only. careers.js draws the rows. */
@layer components{

/* ------------------------------------------------------------- open roles */
.careers-where{margin-block:0 var(--s-3)}
.jobs{list-style:none;margin:0 0 var(--s-5);padding:0;display:grid;gap:var(--s-3)}
.jobs[hidden]{display:none}
.job{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-1) var(--s-4);
  padding:var(--s-4) var(--s-5);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg)}
.job:hover,.job:focus-within{border-color:var(--brand)}
.job__title{grid-column:1;font-size:19px;line-height:1.3;margin:0}
.job__title a{color:var(--text);text-decoration:none}
.job__title a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.job__title a:focus-visible{outline:none}
.job:has(.job__title a:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.job__meta{grid-column:1;margin:0;font-size:14px;line-height:1.5}
.job__summary{grid-column:1;margin:0;font-size:15px;line-height:1.6;color:var(--text-2)}
.job__go{grid-column:2;grid-row:1 / span 3;font-weight:650;color:var(--brand);text-decoration:none;white-space:nowrap}
@media (max-width:640px){
  .job{grid-template-columns:minmax(0,1fr)}
  .job__go{grid-column:1;grid-row:auto}
}

/* ------------------------------------------------------------ one job */
[data-careers-text] > .job__meta{margin-block-end:var(--s-2)}
[data-careers-text] h2{font-size:22px;margin-block:var(--s-5) var(--s-2)}
[data-careers-text] ul{padding-inline-start:1.2em}
[data-careers-text] li{margin-block:4px}
[data-careers-closed]{margin-block:var(--s-3) 0}
#apply .form__status:empty{display:none}
}