/* ==========================================================================
   Vincent Cards — zaokraglone rogi zdjec na kartach wpisow (jak Vincent:
   assets/css/site/card.css uzywa var(--radius-medium)=16px niemal
   wszedzie), zamiast ostrych/kwadratowych rogow w Hanoi (0px, zmierzone
   live na stronie glownej).

   CELOWO NIE ruszamy: liczby kolumn siatki (Hanoi: 4, Vincent: 3 —
   zmiana liczby kolumn to duza, strukturalna zmiana gestosci informacji,
   nie tylko "wyglad", i nikt nie zglosil ze obecne 4 kolumny wygladaja
   zle), proporcji zdjec (Hanoi 4:5 na stronie glownej — Vincent sam ma
   niespojne proporcje zaleznie od typu karty, wiec nie ma tu jednej
   "poprawnej" wartosci do skopiowania), ani typografii tytulu karty
   (juz uzywa poprawnego fontu Bricolage, a rozmiar/waga nie byly
   zglaszane jako problem). --- */

.c-post-card__media {
  border-radius: 16px;
}

/* --- Odznaka poziomu dostepu na karcie (jak Vincent: .visibility-badge
   w assets/css/blog/feed.css) — mala "pigulka" z ikona + tekstem
   ("members only", "paid only", albo nazwa konkretnego tieru), widoczna
   gdy post nie jest publiczny. Kolor tla = akcent marki; kolor tekstu/
   ikony liczy automatycznie wbudowany system kontrastu Hanoi
   (data-contrast="accent", ten sam mechanizm co w stopce).

   Pozycja: gdy karta ma zdjecie/wideo, odznaka NAKLADA SIE na nie
   (wysrodkowana, u dolu) zamiast plynac w normalnym ukladzie tekstu —
   wizualnie jak wariant .small-card w Vincencie (tam: position:absolute;
   top:-2.6rem). W markupie odznaka jest jednak RODZENSTWEM
   .c-post-card__media, nie jego dzieckiem (patrz post-card.hbs) — ten
   kontener ma natywnie overflow:hidden (przycina zdjecie pod zaokraglone
   rogi), wiec nested + wystajacy poza jego krawedz element bylby ucinany.
   Zamiast tego odznaka naklada sie ujemnym margin-top w normalnym
   przeplywie flex .c-post-card (patrz regula ponizej) — ten sam efekt
   wizualny, bez przycinania. Dzieki temu tez nie przesuwa tytulu w dol i
   nie zaburza siatki na liscie postow. Tylko gdy karta NIE MA zadnego
   medium (post-card-visibility-badge.hbs wlaczony w .c-post-card__content
   jako fallback), zostaje w normalnym przeplywie tekstu — tam nie ma
   obrazka, na ktorym mogloby "wisiec". --- */
.c-post-card__visibility-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 4px 8px;
  margin-bottom: var(--space-8);
  border-radius: var(--border-radius-default);
  background-color: var(--color-accent);
  color: var(--color-on-accent, #fff);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
}

.c-post-card__media + .c-post-card__visibility-badge {
  /* Dziala tylko gdy odznaka BEZPOSREDNIO nastepuje po .c-post-card__media
     (obie galezie z medium w post-card.hbs) — fallback w .c-post-card__content
     (karta bez medium) nie jest poprzedzony przez .c-post-card__media, wiec
     ta regula go nie dotyczy i zostaje w normalnym przeplywie. */
  align-self: center; /* .c-post-card jest flex-direction:column, wiec bez
    tego element o szerokosci fit-content przylgnalby do lewej krawedzi */
  margin-top: -24px; /* przesuwa w gore: 12px (gap .c-post-card) + ~12px
    (polowa wlasnej wysokosci odznaki), wiec jej SRODEK ladowuje sie
    dokladnie na krawedzi zdjecia — polowa "na" zdjeciu, polowa ponizej */
  margin-bottom: 0;
  z-index: 2; /* dziala bez position:relative — flex-items respektuja
    z-index nawet przy position:static */
}

.c-post-card__visibility-badge svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.c-post-card__visibility-badge-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}