/* Kariera w Grupie — spis ofert w jednowierszowych rzędach, pastylki filtrów przy nagłówku */
.ax-gcar {
  padding: var(--ax-sec-pad-l) 0 var(--ax-sec-end);
  background: var(--ax-sand);
  color: var(--ax-navy);
  /* Krzywa serwisu; nie ma jej w tokenach, więc powtarzamy ją lokalnie raz. */
  --ax-gcar-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /*
   * Kolory kropek bierze warstwa marki Grupy (agrobex-grupa/assets/css/brand.css).
   * Blok mieszka w motywie nadrzędnym, więc w serwisie bez tej warstwy tokeny
   * nie istnieją i kropka wyszłaby czarna — stąd wartości zapasowe. Budowa
   * bierze wariant „on-paper", bo ta sekcja stoi na piasku, nie na granacie.
   */
  --ax-gcar-dot-dev: var(--ax-grupa-dot-dev, var(--ax-steel));
  --ax-gcar-dot-bud: var(--ax-grupa-dot-bud-on-paper, var(--ax-ink));
  /* Złota Logistyki nie ma w palecie nadrzędnej — zapas musi być wartością. */
  --ax-gcar-dot-log: var(--ax-grupa-dot-log, #c8b08a);
}

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

/* --- Nagłówek z pastylkami --- */

/*
 * Pastylki stoją w tym samym wierszu co nagłówek i siadają na jego dolnej
 * linii. To nie oszczędność miejsca: filtr jest wtedy czytany jako druga część
 * zdania nagłówka („Wiele zawodowych dróg" — których?), a nie jako osobny pas
 * narzędzi nad listą.
 */
.ax-gcar__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 44px);
  margin-bottom: clamp(44px, 5.2vw, 80px);
}

.ax-gcar__head-col {
  min-width: 0;
}

.ax-gcar__eyebrow {
  display: block;
  margin-bottom: clamp(16px, 2vw, 32px);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ax-steel);
}

.ax-gcar__eyebrow-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  vertical-align: -1px;
  margin-right: 9px;
}

.ax-gcar__eyebrow-mark svg {
  width: 9px;
  height: 7.2px;
  fill: currentColor;
}

.ax-gcar__heading {
  margin: 0;
  font-weight: 600;
  font-size: clamp(38px, 4.6vw, 80px);
  line-height: 0.94;
  letter-spacing: -0.032em;
}

.ax-gcar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ax-gcar__filter {
  min-height: 38px;
  padding: 0 16px;
  font: inherit;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ax-navy);
  background: transparent;
  border: 1px solid rgba(53, 59, 102, 0.28);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.35s var(--ax-gcar-ease), color 0.35s var(--ax-gcar-ease),
    border-color 0.35s var(--ax-gcar-ease);
}

.ax-gcar__filter.is-active {
  background: var(--ax-ink);
  color: var(--ax-paper);
  border-color: var(--ax-ink);
}

@media (hover: hover) and (pointer: fine) {
  .ax-gcar__filter:not(.is-active):hover {
    background: rgba(53, 59, 102, 0.08);
    border-color: var(--ax-navy);
  }
}

/* --- Rzędy ofert --- */

.ax-gcar__list {
  display: grid;
  gap: 8px;
}

/*
 * Rząd, nie karta. Cztery kolumny czyta się w poprzek listy: stanowisko rośnie
 * z treścią (1.4fr), trzy pozostałe biorą tyle, ile potrzebują, więc spółka i
 * miejsce stoją w kolumnach na całej długości spisu i dają się porównać z
 * wiersza na wiersz.
 */
.ax-gcar__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto auto;
  gap: clamp(14px, 2.4vw, 40px);
  align-items: center;
  padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 28px);
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(53, 59, 102, 0.12);
  border-radius: var(--ax-radius);
  color: var(--ax-navy);
  text-decoration: none;
  transition: background 0.4s var(--ax-gcar-ease);
}

/* Rząd odfiltrowany wypada z układu i z kolejności tabulacji. */
.ax-gcar__row[hidden] {
  display: none;
}

.ax-gcar__role {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ax-gcar__title {
  font-weight: 500;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ax-gcar__desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(53, 59, 102, 0.6);
  text-wrap: pretty;
}

.ax-gcar__co {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(53, 59, 102, 0.7);
  white-space: nowrap;
}

.ax-gcar__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.ax-gcar__dot--dev { background: var(--ax-gcar-dot-dev); }
.ax-gcar__dot--bud { background: var(--ax-gcar-dot-bud); }
.ax-gcar__dot--log { background: var(--ax-gcar-dot-log); }
/* Oferta bez rozpoznanej spółki: kropka w granacie tekstu, bez własnego koloru. */
.ax-gcar__dot--grupa { background: rgba(53, 59, 102, 0.45); }

.ax-gcar__where {
  font-size: 13.5px;
  color: rgba(53, 59, 102, 0.6);
  white-space: nowrap;
}

.ax-gcar__arrow {
  justify-self: end;
  display: inline-block;
  font-size: 18px;
  transition: transform 0.5s var(--ax-gcar-ease), color 0.5s var(--ax-gcar-ease);
}

@media (hover: hover) and (pointer: fine) {
  .ax-gcar__row:hover {
    background: rgba(255, 255, 255, 0.55);
  }

  .ax-gcar__row:hover .ax-gcar__arrow {
    transform: translateX(8px);
    color: var(--ax-steel);
  }
}

.ax-gcar__row:focus-visible,
.ax-gcar__filter:focus-visible,
.ax-gcar__cta:focus-visible {
  outline: 2px solid var(--ax-steel);
  outline-offset: 4px;
}

/* --- Domknięcie sekcji --- */

.ax-gcar__empty {
  margin: 0;
  max-width: 52ch;
  color: rgba(53, 59, 102, 0.72);
  text-wrap: pretty;
}

.ax-gcar__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(28px, 3.4vw, 48px);
}

.ax-gcar__intro {
  margin: 0;
  max-width: 52ch;
  line-height: 1.62;
  color: rgba(53, 59, 102, 0.72);
  text-wrap: pretty;
}

.ax-gcar__cta {
  display: inline-block;
  padding: 15px 28px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ax-paper);
  background: var(--ax-ink);
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.38s var(--ax-gcar-ease), color 0.38s var(--ax-gcar-ease);
}

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

@media (max-width: 900px) {
  /*
   * Cztery kolumny w 390 px dałyby cztery słupki po jednym słowie. Rząd
   * przełamuje się więc na trzy piętra: stanowisko ze strzałką w jednej linii
   * (strzałka zostaje przy tytule, bo to ona mówi, że rząd jest linkiem),
   * pod nimi spółka, na końcu miejsce i wymiar na całej szerokości.
   */
  .ax-gcar__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
    /* Pole dotyku: padding daje więcej, ale rząd bez opisu nie może zejść niżej. */
    min-height: 44px;
  }

  .ax-gcar__role {
    grid-column: 1;
    grid-row: 1;
  }

  .ax-gcar__arrow {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .ax-gcar__co {
    grid-column: 1;
    grid-row: 2;
  }

  .ax-gcar__where {
    grid-column: 1 / -1;
    grid-row: 3;
    white-space: normal;
  }

  /*
   * Pastylki schodzą pod nagłówek, więc wyrównanie do jego dolnej linii traci
   * sens - w jednej kolumnie liczy się lewa krawędź.
   */
  .ax-gcar__head {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ax-gcar__row,
  .ax-gcar__arrow,
  .ax-gcar__filter,
  .ax-gcar__cta {
    transition-duration: 0.01ms;
  }

  /* Ruch znika, kolor zostaje - strzałka nadal reaguje, tylko się nie przesuwa. */
  .ax-gcar__row:hover .ax-gcar__arrow {
    transform: none;
  }
}