/* =========================================================
   CIPIT — jobs.css
   Depinde de tokenii din site.css (--pad-x, paleta, gradientele)
   ========================================================= */

/* ---------- hero ---------- */
.hero--jobs{
  background-image:var(--g-lagoon);
  background-size:200% 200%;animation:drift 28s ease-in-out infinite;
  padding:calc(90px + clamp(40px,7vh,90px)) var(--pad-x) clamp(74px,11vh,130px);
}
.hero--jobs h1{max-width:15ch;font-size:clamp(40px,8.8vw,108px)}

.jobs-section{padding:clamp(48px,7vh,86px) 0 clamp(80px,12vh,140px)}

/* ---------- căutare + filtre ---------- */
.jobs-bar{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:24px 24px 20px;margin-bottom:24px;
}
.jobs-search{margin-bottom:18px}
.jobs-search input{
  width:100%;background:var(--cream);border:1px solid var(--line);border-radius:99px;
  padding:15px 22px;font-family:var(--mono);font-size:14.5px;color:var(--ink);
  transition:border-color .18s,box-shadow .18s;
}
.jobs-search input::placeholder{color:var(--grey)}
.jobs-search input:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(8,65,194,.14);
}

.filter-group{margin-bottom:12px}
.filter-group:last-child{margin-bottom:0}
.filter-label{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);margin-bottom:8px;
}
.filter-chips{display:flex;flex-wrap:wrap;gap:7px}
.chip-f{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  background:transparent;border:1px solid var(--line);border-radius:99px;
  padding:8px 14px;cursor:pointer;color:var(--grey);
  transition:background .18s,color .18s,border-color .18s;
}
.chip-f:hover{border-color:#8b93a7;color:var(--ink)}
.chip-f.is-active{background:var(--blue);color:#fff;border-color:var(--blue)}

.jobs-count{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--grey);margin:0 0 20px}

/* ---------- listă ---------- */
.jobs-list{display:grid;gap:10px}
.job{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  padding:18px 22px;border:1px solid var(--line);border-radius:12px;
  text-decoration:none;color:var(--ink);background:#fff;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.job[hidden]{display:none}
.job:hover{
  border-color:#c3cbe0;
  box-shadow:0 8px 24px -12px rgba(8,65,194,.18);
  transform:translateY(-2px);
}
.job__main{display:flex;align-items:center;gap:16px;min-width:0}
.job__logo{width:44px;height:44px;border-radius:10px;flex:none;object-fit:contain;background:var(--cream)}
.job__logo--letter{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:20px;
  color:var(--blue-deep);background:#e8edff;
}
.job__title{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.03em;margin:0 0 3px;line-height:1.25}
.job__company{font-size:14.5px;color:var(--grey);margin:0}

.job__meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:flex-end}
.job__tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  background:var(--cream);border-radius:99px;padding:5px 11px;color:var(--grey);white-space:nowrap;
}
.job__tag--cat{background:#e8edff;color:var(--blue-deep)}
.job__tag--sal{background:#e6f7f5;color:var(--teal-deep)}
.job__date{font-family:var(--mono);font-size:10.5px;color:var(--grey)}

/* ---------- încarcă mai multe ---------- */
.btn--load{
  display:block;width:100%;margin-top:18px;text-align:center;
  background:transparent;border:1px solid var(--line);border-radius:12px;
  padding:16px;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;
  color:var(--grey);cursor:pointer;transition:background .18s,color .18s;
}
.btn--load:hover{background:var(--ink);color:var(--cream)}
.btn--load[hidden]{display:none}

.jobs-updated{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--grey);margin:28px 0 0;text-align:center;
}

/* ---------- gol ---------- */
.jobs-empty{text-align:center;padding:clamp(42px,6vh,72px) 20px;color:var(--grey)}
.jobs-empty p{margin:0;font-size:16px}

@media (max-width:700px){
  .job{grid-template-columns:1fr;gap:12px}
  .job__meta{justify-content:flex-start}
  .job__logo{width:38px;height:38px}
}