/* Dietlo — KOMPONENT: przycisk.
   Jedyny wlasciciel .dietlo-button i wariantow --purple / --light /
   --secondary / --pulse. Pliki powierzchni dokladaja wylacznie warianty
   w swoim zasiegu (np. .dietlo-collab .dietlo-button--purple), nigdy nie
   redefiniuja klasy bazowej.

   Wyodrebnione i splaszczone z base-pages.css (2026-07-28), wartosci bez
   zmian. Choreografia hero (dietlo-hero-cta-bounce) zostala w
   base-pages.css — to dobor strony, nie komponentu. */

.dietlo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 32px;
  /* Blocksy styles native buttons after parts of the custom UI. Keep the
     shared component radius authoritative across links and <button>s. */
  border-radius: var(--dietlo-radius-control) !important;
  border: 1px solid transparent !important;
  /* Wypelnienie i poswiata jak w CTA hero na home - decyzja wlasciciela
     2026-07-29: to hero jest wzorcem, a nie odwrotnie. Wczesniej komponent
     malowal `--dietlo-green-cta` (#2e7c28), a hero nadpisywal to lokalnie
     na zielen marki; nadpisanie zostalo usuniete, bo baza je wchlonela.

     UWAGA DOSTEPNOSC: bialy tekst na #55b947 daje 2.5:1, czyli ponizej progu
     WCAG AA (4.5:1 dla tego stopnia pisma). Wybor swiadomy i zaakceptowany
     przez wlasciciela - nie "naprawiaj" go z wlasnej inicjatywy. Jesli
     kiedys ma wrocic zgodnosc bez zmiany odcienia, droga jest przez ciemny
     tekst na tym tle (#181b22 daje 6.8:1), nie przez ciemniejsza zielen. */
  background: var(--dietlo-green) !important;
  color: #fff !important;
  font-size: 17px; /* poza skala --dietlo-text-* — udokumentowany dlug */
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(85, 185, 71, 0.24);
  transition:
    transform var(--dietlo-motion-fast) var(--dietlo-ease-out),
    filter var(--dietlo-motion-fast) var(--dietlo-ease-out),
    box-shadow var(--dietlo-motion-fast) var(--dietlo-ease-out);
}

.dietlo-button:focus-visible {
  outline: 3px solid var(--dietlo-purple);
  outline-offset: 2px;
}

.dietlo-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.dietlo-button:active {
  transform: scale(0.98);
  filter: brightness(0.98);
}

.dietlo-button:disabled,
.dietlo-button[aria-disabled="true"] {
  box-shadow: none;
  cursor: not-allowed;
  filter: grayscale(0.18);
  opacity: 0.48;
  transform: none;
}

.dietlo-button:disabled:hover,
.dietlo-button[aria-disabled="true"]:hover {
  filter: grayscale(0.18);
  transform: none;
}

.dietlo-button--purple {
  background: var(--dietlo-purple) !important;
  box-shadow: 0 10px 24px rgba(116, 39, 230, 0.22);
}

.dietlo-button--light {
  background: #f0f1f3;
  color: var(--dietlo-text) !important;
  box-shadow: none;
}

.dietlo-button--secondary {
  background: transparent !important;
  border-color: var(--dietlo-purple) !important;
  color: var(--dietlo-purple) !important;
  box-shadow: none;
}

/* CTA: oddychajacy glow na glownym przycisku (rules.md: tylko hero
   i sticky, nigdy na kazdym przycisku) */

@keyframes dietlo-cta-attention {
  0%, 18%, 100% {
    box-shadow: 0 10px 24px rgba(85, 185, 71, 0.24);
    transform: translateY(0);
  }
  5% {
    transform: translateY(-7px);
  }
  9% {
    transform: translateY(0);
  }
  13% {
    transform: translateY(-4px);
  }
  50% {
    box-shadow:
      0 10px 30px rgba(85, 185, 71, 0.42),
      0 0 0 7px rgba(85, 185, 71, 0.13);
    transform: translateY(0);
  }
}

.dietlo-button--pulse {
  animation: dietlo-cta-attention 5.6s ease-in-out 3s infinite;
}

.dietlo-button--pulse:hover,
.dietlo-button--pulse:focus-visible {
  animation-play-state: paused;
}

/* Reduced motion: informacja bez animacji (wymog rules.md) */
@media (prefers-reduced-motion: reduce) {
  .dietlo-button {
    transition: none;
  }

  .dietlo-button:hover,
  .dietlo-button:active {
    transform: none;
  }

  .dietlo-button--pulse {
    animation: none;
  }
}