/* docs/stylesheets/extra.css */

/* Celujemy w obrazek logo w nagłówku */
.md-header__logo img {
    /* Tworzy maskę: środek jest widoczny (black),
       a krawędzie stają się przezroczyste (transparent).
       Wartości 60% i 100% kontrolują jak ostre jest przejście. */
    -webkit-mask-image: radial-gradient(circle, black 60%, transparent 100%);
            mask-image: radial-gradient(circle, black 60%, transparent 100%);
    /* Opcjonalnie: lekkie ogólne zmiękczenie */
    /* filter: blur(1px); */
}
/* Styl dla inteligentnego logo (Badge) */
.wiki-badge {
  /* Ustawienia pozycji (takie jak były) */
  float: right;
  margin: 0 0 20px 20px;
  width: 250px;
  max-width: 100%;

  /* NOWE: Efekt winiety (rozmyte krawędzie) */
  /* Środek (do 70%) jest w pełni widoczny, potem powoli zanika do 100% */
  -webkit-mask-image: radial-gradient(circle, black 65%, transparent 100%);
  mask-image: radial-gradient(circle, black 65%, transparent 100%);
}

/* Wersja na telefon - zachowujemy centrowanie, ale też dodajemy rozmycie */
@media screen and (max-width: 768px) {
  .wiki-badge {
    float: none;
    display: block;
    margin: 0 auto 20px auto;
    width: 200px;
  }
}