/* Ogłoszenia o pracę — karty z rozwijanymi szczegółami */
.ax-jobs {
  position: relative;
  padding: var(--ax-sec-pad-m) 0;
  background: var(--ax-ink);
  color: var(--ax-paper);
  /* Tony w jednym miejscu - karta, obrys i tekst różnią się tylko nimi. */
  --ax-job-card: rgba(244, 241, 235, 0.045);
  --ax-job-card-2: rgba(244, 241, 235, 0.015);
  --ax-job-line: rgba(244, 241, 235, 0.13);
  --ax-job-line-on: rgba(244, 241, 235, 0.3);
  --ax-job-soft: rgba(244, 241, 235, 0.62);
  --ax-job-mute: rgba(244, 241, 235, 0.4);
}

.ax-jobs--paper {
  background: var(--ax-paper);
  color: var(--ax-navy);
  --ax-job-card: rgba(255, 255, 255, 0.62);
  --ax-job-card-2: rgba(255, 255, 255, 0.28);
  --ax-job-line: rgba(53, 59, 102, 0.13);
  --ax-job-line-on: rgba(53, 59, 102, 0.32);
  --ax-job-soft: rgba(53, 59, 102, 0.66);
  --ax-job-mute: rgba(53, 59, 102, 0.45);
}

.ax-jobs__inner {
  max-width: var(--ax-maxw);
  margin: 0 auto;
  padding: 0 var(--ax-gutter);
}

/* --- Nagłówek sekcji --- */
.ax-jobs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(16px, 2.4vw, 40px);
  margin-bottom: clamp(28px, 3.4vw, 52px);
}

.ax-jobs__head-col { flex: 1 1 460px; max-width: min(100%, 640px); }
.ax-jobs__head-aside { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

.ax-jobs__eyebrow {
  display: block;
  margin-bottom: var(--ax-label-gap);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ax-steel);
}

.ax-jobs__heading {
  margin: 0;
  font-weight: 300;
  font-size: clamp(30px, 4vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

.ax-jobs__intro {
  margin: 0;
  max-width: 42ch;
  font-size: 16px;
  line-height: 1.74;
  color: var(--ax-job-soft);
  text-wrap: pretty;
}

.ax-jobs__tally {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ax-job-mute);
  font-variant-numeric: tabular-nums;
}

/* --- Karta ogłoszenia --- */
/*
 * Dwie oferty w wierszu, równej wysokości - inaczej karty o krótszym tytule
 * albo opisie kończyły się wyżej i wiersz wyglądał na niedokończony.
 */
.ax-jobs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(12px, 1.4vw, 18px);
}

/*
 * Gdy któraś karta jest rozwinięta, wiersz wraca do naturalnych wysokości.
 * Bez tego sąsiadka rosłaby razem z rozwiniętą i zostawała z kilkuset pikselami
 * pustki w środku. Zeskok sąsiadki jest przy tym niewielki, bo równa się tylko
 * różnicy wysokości z widoku zwiniętego - nie całej wysokości szczegółów.
 */
.ax-jobs__list:has(.ax-jobs__item.is-open) {
  align-items: start;
}

/*
 * Karta zamiast wiersza oddzielonego linią. Kreski układały wszystkie
 * ogłoszenia w jeden pion tekstu; kadr karty mówi, gdzie kończy się jedno
 * stanowisko i zaczyna następne, nawet gdy oba są rozwinięte.
 */
.ax-jobs__item {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  /* Kolumna, żeby stopka karty mogła zjechać na dół rozciągniętego kadru. */
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--ax-job-line);
  border-radius: 18px;
  background: linear-gradient(158deg, var(--ax-job-card), var(--ax-job-card-2));
  transition: border-color 380ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .ax-jobs__item:hover { border-color: var(--ax-job-line-on); }
}

.ax-jobs__item.is-open { border-color: var(--ax-job-line-on); }

/* Numer porządkowy jako znak wodny - ta sama rola co „1988" w sekcji historii. */
.ax-jobs__ghost {
  position: absolute;
  top: clamp(-6px, -0.4vw, 0px);
  right: clamp(14px, 1.6vw, 26px);
  font-size: clamp(56px, 6vw, 96px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.05em;
  color: currentColor;
  opacity: 0.055;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.ax-jobs__card-head { position: relative; z-index: 1; }

/* Logotyp wystawcy w plakietce - lista miesza spółki grupy. */
.ax-jobs__brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: clamp(14px, 1.6vw, 20px);
  padding: 10px 15px;
  border: 1px solid var(--ax-job-line);
  border-radius: 10px;
  background: rgba(244, 241, 235, 0.04);
}

.ax-jobs--paper .ax-jobs__brand { background: rgba(53, 59, 102, 0.03); }

/* Logotyp jest tu identyfikacją wystawcy, nie znaczkiem - przy 16px nazwa
   spółki pod słowem AGROBEX schodziła poniżej progu czytelności. */
.ax-jobs__brand img { display: block; height: clamp(21px, 1.7vw, 26px); width: auto; }

.ax-jobs__role {
  margin: 0;
  font-weight: 300;
  font-size: clamp(24px, 2.9vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.ax-jobs__role a {
  color: inherit;
  text-decoration: none;
  transition: color 300ms ease;
}

.ax-jobs__role a:hover { color: var(--ax-steel); }

/* Opis roli - jedyna proza na zwiniętej karcie, po niej kandydat decyduje,
   czy rozwijać wymagania. */
.ax-jobs__desc {
  margin: clamp(12px, 1.4vw, 16px) 0 0;
  max-width: 54ch;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ax-job-soft);
  text-wrap: pretty;
}

/* --- Metryka --- */
.ax-jobs__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  padding: 0;
}

.ax-jobs__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--ax-job-line);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ax-job-soft);
}

/* Miejsce pracy to pierwsze pytanie kandydata - dostaje pełny kontrast. */
.ax-jobs__chip--place {
  border-color: var(--ax-job-line-on);
  color: currentColor;
}

.ax-jobs__chip-ico { flex: 0 0 auto; width: 11px; height: 13px; color: var(--ax-steel); }

/* --- Szczegóły --- */
/*
 * Wolne miejsce rozciągniętej karty zbiera się tutaj, nad szczegółami. Dzięki
 * temu „Aplikuj" siada na dole kadru i stopki obu kart stoją w jednej linii,
 * a własny odstęp stopki zostaje nietknięty. Rozwinięta karta wolnego miejsca
 * nie ma, więc szczegóły wchodzą tuż pod pigułkami, jak dotąd.
 */
.ax-jobs__detail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 0fr;
  margin-top: auto;
  transition: grid-template-rows 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ax-jobs__item.is-open .ax-jobs__detail { grid-template-rows: 1fr; }

.ax-jobs__detail-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 260ms ease;
}

.ax-jobs__item.is-open .ax-jobs__detail-inner { opacity: 1; transition: opacity 380ms ease 140ms; }

.ax-jobs__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  padding: clamp(22px, 2.6vw, 34px) 0 clamp(4px, 0.6vw, 8px);
}

/* O podziale na kolumny decyduje szerokość karty, nie okna - przy dwóch
   ofertach w wierszu karta ma połowę siatki, choć okno jest szerokie. */
@container (min-width: 660px) {
  .ax-jobs__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 44px);
  }
}

.ax-jobs__col-label {
  display: block;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ax-job-line);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ax-job-mute);
}

/* Kreska zamiast kropki - punkty są zdaniami, nie hasłami. */
.ax-jobs__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ax-job-soft);
}

.ax-jobs__bullets li {
  position: relative;
  padding-left: 20px;
}

.ax-jobs__bullets li + li { margin-top: 9px; }

.ax-jobs__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 1px;
  background: var(--ax-steel);
}

/* --- Stopka karty --- */
.ax-jobs__foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: clamp(20px, 2.2vw, 28px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--ax-job-line);
}

.ax-jobs__apply {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--ax-paper);
  color: var(--ax-ink);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 320ms ease, color 320ms ease;
}

.ax-jobs--paper .ax-jobs__apply { background: var(--ax-navy); color: var(--ax-paper); }

@media (hover: hover) and (pointer: fine) {
  .ax-jobs__apply:hover { background: var(--ax-steel); color: var(--ax-ink); }
}

.ax-jobs__valid { margin-left: auto; font-size: 11px; color: var(--ax-job-mute); }

/* Przełącznik przy prawej krawędzi - reszta stopki to droga do aplikacji. */
.ax-jobs__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 6px 0 14px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ax-job-soft);
  cursor: pointer;
  transition: color 300ms ease;
}

.ax-jobs__toggle svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  box-sizing: border-box;
  border: 1px solid var(--ax-job-line);
  border-radius: 50%;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), border-color 300ms ease, background 300ms ease;
}

.ax-jobs__toggle:hover { color: currentColor; }
.ax-jobs__toggle:hover svg { border-color: var(--ax-job-line-on); }
.ax-jobs__toggle:focus-visible { outline: 2px solid var(--ax-steel); outline-offset: 3px; border-radius: 999px; }

.ax-jobs__item.is-open .ax-jobs__toggle svg { transform: rotate(180deg); }

/* --- Stany poboczne --- */
.ax-jobs__empty,
.ax-jobs__ext {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ax-job-soft);
}

.ax-jobs__ext { margin-top: clamp(24px, 2.8vw, 40px); }

.ax-jobs__ext a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--ax-job-line);
  padding-bottom: 4px;
  transition: gap 380ms cubic-bezier(0.16, 1, 0.3, 1), border-color 300ms ease;
}

.ax-jobs__ext a:hover { gap: 16px; border-bottom-color: var(--ax-job-line-on); }

@media (max-width: 860px) {
  .ax-jobs__cols { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 1040px) {
  .ax-jobs__list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .ax-jobs__item { border-radius: 14px; }
  .ax-jobs__valid { margin-left: 0; }
  .ax-jobs__ghost { font-size: 52px; opacity: 0.05; }
  /* Chipy poniżej 11px przestają być czytelne na telefonie. */
  .ax-jobs__chip { font-size: 11px; padding: 9px 14px; }
  .ax-jobs__apply { width: 100%; justify-content: center; }
  .ax-jobs__toggle { margin-left: 0; padding-left: 0; }
  .ax-jobs__role a { display: inline-block; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .ax-jobs__item,
  .ax-jobs__detail,
  .ax-jobs__detail-inner,
  .ax-jobs__toggle svg,
  .ax-jobs__ext a { transition: none; }
}

/* --- Pas filtrów spółek --------------------------------------------------
 * Wygląd jest ten sam co w filtrach aktualności - to ta sama rola na stronie
 * i użytkownik nie ma powodu uczyć się jej dwa razy. Różnica jest w mechanice:
 * tam filtr przeładowuje archiwum przez adres, tu chowa karty na miejscu, bo
 * wakaty są krótką listą wczytaną w całości i przeładowanie byłoby stratą.
 */
.ax-jobs__filters {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 30px);
  margin-bottom: clamp(22px, 2.6vw, 36px);
  border-bottom: 1px solid rgba(53, 59, 102, 0.14);
}

.ax-jobs__filter {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 0 0 12px;
  margin-bottom: -1px;
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(53, 59, 102, 0.45);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 320ms ease, border-color 320ms ease;
}

.ax-jobs__filter:hover {
  color: var(--ax-navy);
}

.ax-jobs__filter.is-active {
  color: var(--ax-navy);
  border-bottom-color: var(--ax-navy);
}

.ax-jobs__filter-count {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(53, 59, 102, 0.38);
}

/*
 * Sekcja na granacie odwraca kontrast pasa - blok występuje w dwóch tonacjach
 * i bez tego filtry ginęły na ciemnym tle.
 */
.ax-jobs--ink .ax-jobs__filters {
  border-bottom-color: rgba(244, 241, 235, 0.16);
}

.ax-jobs--ink .ax-jobs__filter {
  color: rgba(244, 241, 235, 0.5);
}

.ax-jobs--ink .ax-jobs__filter:hover,
.ax-jobs--ink .ax-jobs__filter.is-active {
  color: var(--ax-paper);
  border-bottom-color: var(--ax-paper);
}

.ax-jobs--ink .ax-jobs__filter-count {
  color: rgba(244, 241, 235, 0.4);
}

/* Karta odfiltrowana wypada z układu i z kolejności tabulacji. */
.ax-jobs__item[hidden] {
  display: none;
}