/* ==========================================================================
   nis2-przyciski.css - jeden token przycisku na caly serwis

   Ladowany PO nis2-marka.css, PRZED lokalnym <style> strony.

   Powod powstania (29.07.2026): przycisk byl w serwisie w czterech
   wersjach naraz. Landing mial promien 6 i wage 500, podstrony promien 0
   i wage 600, do tego cztery rozne kombinacje rozmiaru i odstepow. Czesc
   wariantow miala gradient i cien, czesc plaski kolor.

   Kanoniczna jest wersja z landingu: plaski kolor, promien 6 px, waga 500.
   Gradient i cien odpadly, bo przycisk ma byc widoczny przez kolor i miejsce,
   a nie przez efekt.

   Kolor akcji to burgund. Turkus jest kolorem WYNIKU i nie moze siadac na
   niczym klikalnym, bo wtedy strona przestaje odrozniac "to sie stalo" od
   "kliknij tutaj".

   Selektory obejmuja obie konwencje: landing pisze .dzialanie, podstrony
   .btn oraz .odnosnik-akcji.
   ========================================================================== */

.btn,
.dzialanie,
.odnosnik-akcji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  border: 1px solid var(--akcent);
  border-radius: var(--promien-maly);
  background: var(--akcent);
  color: #fff;
  font-family: inherit;
  font-size: var(--t-tekst);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.btn:hover,
.dzialanie:hover,
.odnosnik-akcji:hover {
  background: var(--akcent-ciemny);
  border-color: var(--akcent-ciemny);
}

/* --- wariant pusty --------------------------------------------------------
   Drugie wyjscie z tego samego ekranu. Sama ramka, bez wypelnienia, zeby
   nie konkurowal z akcja glowna. */

.btn.secondary,
.dzialanie--pusty {
  background: transparent;
  border-color: var(--wlos-mocny);
  color: var(--atrament);
}

.btn.secondary:hover,
.dzialanie--pusty:hover {
  background: var(--atrament);
  border-color: var(--atrament);
  color: #fff;
}

/* --- wariant maly ---------------------------------------------------------
   Do paska gornego i do wnetrza kart. */

.btn.small,
.dzialanie--maly {
  padding: 11px 19px;
  font-size: var(--t-nota);
}

/* --- na ciemnym tle -------------------------------------------------------
   Burgund na granacie schodzi ponizej progu czytelnosci, wiec przycisk
   odwraca sie: biale tlo, granatowy napis. */

.section--ciemna .btn,
.section.dark .btn,
.sekcja--ciemna .dzialanie {
  background: #fff;
  border-color: #fff;
  color: var(--atrament);
}

.section--ciemna .btn:hover,
.section.dark .btn:hover,
.sekcja--ciemna .dzialanie:hover {
  background: rgba(255, 255, 255, .86);
  border-color: rgba(255, 255, 255, .86);
}

/* --- stan wylaczony -------------------------------------------------------- */

.btn[disabled],
.btn:disabled,
.dzialanie[disabled],
.dzialanie:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* --- odnosnik w tekscie ---------------------------------------------------
   Cel dotykowy musi miec 24 px wysokosci (WCAG 2.5.8). Padding na elemencie
   liniowym powieksza obszar klikniecia, nie ruszajac ukladu tekstu. */

.section p a,
.section li a,
.sekcja p a,
.sekcja li a {
  padding-block: 4px;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .dzialanie,
  .odnosnik-akcji { transition: none; }
}