/* Kafel kursu na liscie kursow (strona glowna dla klientow, konto i spis kursow w aplikacji).
   Wydzielony z app-css-11 (2026-11-08, sesja 192), gdy tamten plik zblizyl sie do limitu
   wielkosci; wczytywany zaraz po app-css-11. Kafelki „W przygotowaniu” dopasowuje
   do tego wygladu app-css-17. */

/* Kafel kursu = odnosnik. Ma wygladac na klikalny (reguła 18 UI_GUIDELINES):
   wlasny obrys, cien i wyrazna reakcja na najechanie. Od 2026-11-08 (Tom, wariant C
   makiety) u gory stoi pasek z liczba lekcji i tytulem — tytul ma byc wazniejszy
   od przycisku. Odstepy wewnatrz daja pasek, opis i dol kafla, nie sam kafel. */
.spis-kafel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s ease, transform .15s ease;
}

/* Najechany kafel wyglada jak kafel kursu kupionego (wybor Toma 2026-11-04): ramka
   akcentu grubsza o 1 px — dorysowana cieniem, zeby kafel nie zmienial rozmiaru
   i sasiedzi nie przeskakiwali — i pasek z tytulem w pelnym kolorze akcentu. */
.spis-kafel:hover,
.spis-kafel:focus-visible,
.spis-kafel-kupiony {
  border-color: var(--accent);
  box-shadow: var(--shadow), 0 0 0 1px var(--accent);
}

.spis-kafel:hover,
.spis-kafel:focus-visible {
  transform: translateY(-2px);
}

.spis-kafel-glowa {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .85rem 1.25rem .8rem;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
}

.spis-kafel:hover .spis-kafel-glowa,
.spis-kafel:focus-visible .spis-kafel-glowa,
.spis-kafel-kupiony .spis-kafel-glowa {
  background: var(--accent);
}

/* Miejsce na dwa wiersze tytulu w kazdym kafelku (Tom 2026-11-08): opis i linia nad
   cena zaczynaja sie wszedzie na tej samej wysokosci, takze przy tytule w jednym wierszu. */
.spis-kafel-tytul {
  min-height: calc(2 * 1.3em);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

.spis-kafel:hover .spis-kafel-tytul,
.spis-kafel:focus-visible .spis-kafel-tytul,
.spis-kafel-kupiony .spis-kafel-tytul {
  color: #fff;
}

.spis-kafel-opis {
  padding: .9rem 1.25rem .5rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Dol kafla: cena (gdy jest) z lewej, „Sprawdź” / „Czytaj kurs →” z prawej,
   zawsze na tej samej wysokosci, niezaleznie od dlugosci opisu. */
.spis-kafel-dol {
  margin: auto 1.25rem 0;
  padding: .8rem 0 1.1rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}

.spis-kafel-cena {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

/* „Sprawdź” domyka kafel i mowi, co sie stanie po kliknieciu (regula 6). Maly i jasny,
   zeby nie przycmiewal tytulu (Tom 2026-11-08); ciemnieje po najechaniu na kafel.
   Ten sam wyglad i wymiary co „Chcę taki kurs” (app-css-17), wiec linia nad dolem
   kafla stoi wszedzie na tej samej wysokosci. */
.spis-kafel-akcja {
  margin-left: auto;
  padding: .4rem .85rem;
  font-size: .93rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-radius: 10px;
}

.spis-kafel:hover .spis-kafel-akcja,
.spis-kafel:focus-visible .spis-kafel-akcja {
  color: #fff;
  background: var(--accent-dark);
}

/* Gorna linijka kafla: „Twój kurs · 54 lekcje”. */
.spis-kafel-lekcje {
  color: var(--accent-dark);
  font-size: .85rem;
  font-weight: 600;
}

.spis-kafel:hover .spis-kafel-lekcje,
.spis-kafel:focus-visible .spis-kafel-lekcje,
.spis-kafel-kupiony .spis-kafel-lekcje {
  color: #fff;
}