/* ==========================================================================
   Vincent Post Upgrade — ikona w kolku nad tytulem ekranu "tylko dla
   subskrybentow" (jak Vincent: assets/css/blog/single.css .single-cta-icon),
   ktorej natywny Hanoi w ogole nie mial (tylko sam tytul + przycisk).

   Kolko: ikona w kolorze akcentu na bardzo lekko podbarwionym tle (8%
   krycia akcentu) — przy tak subtelnym tle nie trzeba tu liczyc
   kontrastu jak przy odznace na karcie (pelny, mocny kolor akcentu na
   niemal przezroczystym tle akcentu zawsze ma dobry kontrast). --- */

.c-post-upgrade__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--color-accent) 8%, transparent);
  color: var(--color-accent);
}

.c-post-upgrade__icon svg {
  width: 52px;
  height: 52px;
}

.c-post-upgrade__desc {
  color: var(--color-text-secondary);
  /* Vincent: .single-cta-desc.body-1 w typography.css — 1.6rem/1.5 przy
     korzeniu 10px = 16px, mniejsze niz standardowy tekst tresci (20px). */
  font-size: 16px;
  line-height: 1.5;
}

/* Guzik(i) w tym boxie maja byc mniejsze niz standardowy tekst tresci —
   w Vincencie kazdy .button ma font-size: calc(--content-font-size - 0.2rem)
   = 18px (nie 20px), font-weight:600, letter-spacing:0.5px (button.css).
   Zasieg celowo ograniczony do .c-post-upgrade, zeby nie zmienic wygladu
   innych przyciskow .c-button w motywie (nawigacja, stopka, karty, formularz
   newslettera). */
.c-post-upgrade .c-button {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Linia "Masz juz konto? Zaloguj sie" — w Vincencie caly ten wiersz to
   .single-cta-footer: font-size 1.4rem = 14px (mniejsze niz opis wyzej),
   wyrazniejsze tylko pogrubieniem samego "Sign in" (<strong> w markupie). */
.c-post-upgrade__login {
  font-size: 14px;
}