/* Stany interakcji komponentów design systemu.

   W projekcie komponenty (Button, ArrowLink, Chip, SocialPill, TileCard) trzymały hover
   w React.useState i wpisywały wynik w style inline. Po prerenderze zostaje sam stan
   spoczynkowy, więc hover trzeba oddać CSS-em. `!important` jest konieczne, bo reguły
   muszą wygrać ze stylem inline, który został w HTML-u.

   Wartości 1:1 z definicji komponentów (_ds_bundle.js). */

.ds-btn,
.ds-chip,
.ds-select,
.ds-arrow-box,
.ds-pill {
  transition: background-color .3s ease-in-out, color .3s ease-in-out,
              border-color .3s ease-in-out, opacity .3s ease-in-out;
}

/* Button — wypełnienie znika, zostaje sama ramka */
.ds-btn--primary:hover   { background: transparent !important; color: var(--ink) !important; }
.ds-btn--secondary:hover { background: transparent !important; color: var(--white) !important; }
.ds-btn--outline:hover   { background: var(--black) !important; color: var(--white) !important; }
.ds-btn--dark:hover      { background: transparent !important; color: var(--ink) !important; }

/* Chip / pigułka wyboru — podświetlenie żółcią marki */
.ds-chip:hover,
.ds-select:hover,
.ds-pill:hover {
  background: var(--yellow) !important;
  color: var(--ink) !important;
}

/* ArrowLink w wersji boxed — inwersja */
.ds-arrow-box:hover { background: var(--black) !important; color: var(--white) !important; }
.ds-arrow-box--on-dark:hover { background: var(--white) !important; color: var(--ink) !important; }

/* Pigułki wyboru w formularzu (Kariera) — stan zaznaczenia.
   W Reakcie trzymał go useState, potem aria-pressed ustawiane przez site.js.
   Teraz to zwykłe <input type="radio|checkbox"> w <label class="ds-select">:
   stan trzyma sam formularz, więc pola wysyłają się same i działa walidacja
   natywna (grupa "miasto" ma required). Wartości 1:1 z komponentu KrChip. */
.ds-select > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ds-select:has(> input:focus-visible) { outline: 2px solid var(--charcoal); outline-offset: 2px; }
.ds-select:has(> input:checked) {
  background: var(--charcoal) !important;
  border-color: var(--charcoal) !important;
  color: #fff !important;
}

/* ArrowLink podkreślony — samo przygaszenie */
.ds-arrow { transition: opacity .3s ease-in-out; }
.ds-arrow:hover { opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .ds-btn,
  .ds-chip,
  .ds-select,
  .ds-arrow-box,
  .ds-arrow,
  .ds-pill { transition: none; }
}