/* Moduł "kursy": Classroom, widok modułu i lekcji. Klasy z prefiksem .kursy-. Wartości ze zmiennych tokens.css. */
.kursy { min-width: 0; }

/* ---------- nagłówek Classroom ---------- */
.kursy-gora { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--o-5); align-items: stretch; }
.kursy-gora__tekst p { margin-bottom: 0; }
.kursy-podsumowanie { display: grid; gap: var(--o-2); align-content: start; padding: var(--o-4); }
.kursy-podsumowanie__liczba { font-size: var(--t-3xl); font-weight: 800; line-height: 1; }
.kursy-podsumowanie__liczba small { font-size: var(--t-s); font-weight: 600; color: var(--tekst-2); }
.kursy-podsumowanie__opis { font-size: var(--t-s); color: var(--tekst-2); }
.kursy-podsumowanie .k-przycisk { margin-top: var(--o-2); white-space: normal; text-align: center; }

/* ---------- baner mapy ---------- */
.kursy-mapa {
  display: flex; align-items: center; gap: var(--o-3); padding: var(--o-3) var(--o-4); margin-bottom: var(--o-4);
  background: var(--akcent-tlo); border: 1px solid #ffd2a3; border-radius: var(--r-m);
  color: var(--tekst); text-decoration: none; font-size: var(--t-s);
}
.kursy-mapa:hover { background: #ffe6cc; color: var(--tekst); }
.kursy-mapa__tekst { flex: 1; min-width: 0; }
.kursy-mapa__akcja { font-weight: 800; color: var(--akcent-tekst); white-space: nowrap; }

/* ---------- siatka modułów ---------- */
.kursy-sekcja { margin-bottom: var(--o-6); }
.kursy-sekcja__tytul { font-size: var(--t-l); margin-bottom: var(--o-3); }
.kursy-siatka { display: grid; gap: var(--o-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kursy-karta { display: flex; flex-direction: column; gap: var(--o-3); padding: var(--o-3); text-decoration: none; color: var(--tekst); height: 100%; }
.kursy-karta:hover { color: var(--tekst); }
.kursy-karta--gotowa { border-color: #b9dcc7; background: linear-gradient(var(--ok-tlo), var(--karta) 60%); }
.kursy-okladka {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, var(--akcent), var(--akcent-ciemny));
}
.kursy-okladka--w1 { background: linear-gradient(135deg, var(--tekst), var(--akcent-tekst)); }
.kursy-okladka--w2 { background: linear-gradient(135deg, var(--akcent-tekst), var(--akcent)); }
.kursy-okladka--w3 { background: linear-gradient(135deg, #3a2f22, var(--akcent-ciemny)); }
.kursy-okladka img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kursy-okladka__numer { position: relative; font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); }
.kursy-okladka__znacznik {
  position: absolute; right: var(--o-2); top: var(--o-2); background: var(--ok); color: #fff; font-size: var(--t-xs); font-weight: 800;
  padding: 3px 10px; border-radius: var(--r-pelny);
}
.kursy-karta__tresc { flex: 1; min-width: 0; }
.kursy-karta__nr { font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--akcent-tekst); margin-bottom: 2px; }
.kursy-karta__tytul { font-size: var(--t-m); margin-bottom: var(--o-1); overflow-wrap: anywhere; }
.kursy-karta__opis {
  margin: 0; font-size: var(--t-s); color: var(--tekst-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kursy-karta__postep { display: grid; gap: 6px; }
.kursy-karta__liczby { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--tekst-2); }
.kursy-karta__liczby strong { color: var(--tekst); }

/* ---------- materiały ---------- */
.kursy-szukaj { max-width: 420px; margin-bottom: var(--o-2); }
.kursy-materialy__licznik { font-size: var(--t-s); color: var(--tekst-2); margin-bottom: var(--o-3); min-height: 1.5em; }
.kursy-materialy { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--o-2); }
.kursy-material {
  display: flex; align-items: center; gap: var(--o-3); padding: var(--o-3) var(--o-4);
  background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--r-m);
}
.kursy-material__typ {
  flex: none; min-width: 52px; text-align: center; padding: 6px 8px; border-radius: var(--r-s);
  background: var(--akcent-tlo); color: var(--akcent-tekst); font-size: var(--t-xs); font-weight: 800;
}
.kursy-material__opis { flex: 1; min-width: 0; }
.kursy-material__nazwa { font-weight: 700; overflow-wrap: anywhere; }
.kursy-material__meta { font-size: var(--t-xs); color: var(--tekst-2); overflow-wrap: anywhere; }
.kursy-materialy-modulu { margin-top: var(--o-5); }

/* ---------- układ lekcji ---------- */
.kursy-uklad { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--o-5); align-items: start; }
.kursy-boczna { position: sticky; top: calc(var(--wysokosc-naglowka) + var(--o-4)); padding: var(--o-4); min-width: 0; }
.kursy-wstecz { display: inline-block; font-size: var(--t-s); font-weight: 700; text-decoration: none; margin-bottom: var(--o-3); }
.kursy-modul__nr { font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--akcent-tekst); }
.kursy-modul__tytul { font-size: var(--t-l); margin: 2px 0 var(--o-3); overflow-wrap: anywhere; }
.kursy-modul__liczby { font-size: var(--t-xs); color: var(--tekst-2); margin: 6px 0 var(--o-3); }
.kursy-przelacznik { display: none; }
.kursy-lekcje { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--o-1); }
.kursy-lekcja {
  display: flex; gap: var(--o-3); align-items: flex-start; padding: 10px; border-radius: var(--r-m);
  text-decoration: none; color: var(--tekst); border: 1px solid transparent;
}
.kursy-lekcja:hover { background: var(--karta-2); color: var(--tekst); }
.kursy-lekcja--biezaca { background: var(--akcent-tlo); border-color: #ffd2a3; }
.kursy-lekcja__kolko {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--t-xs); font-weight: 800; border: 2px solid var(--ramka-mocna); color: var(--tekst-2); background: var(--karta);
}
.kursy-lekcja--biezaca .kursy-lekcja__kolko { border-color: var(--akcent); color: var(--akcent-tekst); }
.kursy-lekcja--gotowa .kursy-lekcja__kolko { background: var(--ok); border-color: var(--ok); color: #fff; }
.kursy-lekcja__tekst { display: grid; min-width: 0; }
.kursy-lekcja__tytul { font-weight: 600; font-size: var(--t-s); line-height: 1.35; overflow-wrap: anywhere; }
.kursy-lekcja--biezaca .kursy-lekcja__tytul { font-weight: 800; }
.kursy-lekcja__czas { font-size: var(--t-xs); color: var(--tekst-2); }

/* ---------- prawa kolumna lekcji ---------- */
.kursy-glowna { min-width: 0; }
.kursy-okruszki { margin-bottom: var(--o-3); font-size: var(--t-s); }
.kursy-okruszki__lista { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; color: var(--tekst-2); }
.kursy-okruszki__lista li + li::before { content: "/"; margin: 0 8px; color: var(--tekst-3); }
.kursy-okruszki__lista li { min-width: 0; overflow-wrap: anywhere; }
.kursy-okruszki__lista [aria-current="page"] { color: var(--tekst); font-weight: 700; }
.kursy-naglowek { margin-bottom: var(--o-4); }
.kursy-naglowek__meta { font-size: var(--t-s); color: var(--tekst-2); margin-bottom: var(--o-1); }
.kursy-naglowek h1 { margin-bottom: var(--o-3); overflow-wrap: anywhere; }
.kursy-przycisk--ok { background: var(--ok-tlo); border-color: #b9dcc7; color: var(--ok); }
.kursy-przycisk--ok:hover { background: var(--ok-tlo); color: var(--ok); }
.kursy-opis { font-size: var(--t-l); color: var(--tekst-2); margin: var(--o-4) 0; }

.kursy-wideo { position: relative; aspect-ratio: 16 / 9; width: 100%; background: var(--tekst); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--cien-2); }
.kursy-wideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kursy-wideo--pusto { background: var(--karta-2); border: 1px dashed var(--ramka-mocna); box-shadow: none; display: grid; place-items: center; }
.kursy-wideo__stan { display: grid; gap: var(--o-2); justify-items: center; text-align: center; padding: var(--o-4); color: var(--tekst-2); }
.kursy-wideo__stan strong { color: var(--tekst); }
.kursy-wideo__ikona { width: 56px; height: 56px; border-radius: 50%; background: var(--akcent-tlo); color: var(--akcent-tekst); display: grid; place-items: center; font-size: 1.25rem; }

/* ---------- treść (Markdown) ---------- */
.kursy-tresc { max-width: 72ch; margin: var(--o-4) 0; overflow-wrap: anywhere; }
.kursy-tresc h2, .kursy-tresc h3, .kursy-tresc h4, .kursy-tresc h5 { margin: var(--o-5) 0 var(--o-2); }
.kursy-tresc h2 { font-size: var(--t-xl); } .kursy-tresc h3 { font-size: var(--t-l); } .kursy-tresc h4, .kursy-tresc h5 { font-size: var(--t-m); }
.kursy-tresc ul, .kursy-tresc ol { margin: 0 0 var(--o-3); padding-left: 1.4em; }
.kursy-tresc li { margin-bottom: 4px; }
.kursy-tresc blockquote { margin: 0 0 var(--o-3); padding: var(--o-2) var(--o-4); border-left: 4px solid var(--akcent); background: var(--akcent-tlo); border-radius: 0 var(--r-m) var(--r-m) 0; }
.kursy-tresc blockquote p { margin: 0; }
.kursy-tresc code { background: var(--karta-2); border: 1px solid var(--ramka); border-radius: 6px; padding: 1px 6px; font-size: 0.9em; }
.kursy-tresc pre { background: var(--tekst); color: var(--karta); padding: var(--o-3) var(--o-4); border-radius: var(--r-m); overflow-x: auto; margin: 0 0 var(--o-3); }
.kursy-tresc pre code { background: none; border: 0; padding: 0; color: inherit; }
.kursy-tresc hr { border: 0; border-top: 1px solid var(--ramka); margin: var(--o-4) 0; }

.kursy-transkrypcja { margin: var(--o-4) 0; }
.kursy-transkrypcja__tresc { margin-top: var(--o-3); padding: var(--o-3) var(--o-4); background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--r-m); color: var(--tekst-2); }
.kursy-transkrypcja__tresc .kursy-tresc { margin: 0; }

.kursy-ruch { display: flex; justify-content: space-between; align-items: center; gap: var(--o-3); flex-wrap: wrap; margin-top: var(--o-5); padding-top: var(--o-4); border-top: 1px solid var(--ramka); }
.kursy-ruch__prawa { display: flex; gap: var(--o-2); flex-wrap: wrap; align-items: center; }

/* ---------- responsywność ---------- */
@media (max-width: 1100px) { .kursy-siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .kursy-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kursy-gora { grid-template-columns: minmax(0, 1fr); }
  .kursy-uklad { grid-template-columns: minmax(0, 1fr); }
  .kursy-boczna { position: static; order: 2; }
  .kursy-glowna { order: 1; }
  .kursy-przelacznik {
    display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; padding: 8px 14px;
    background: var(--karta-2); border: 1px solid var(--ramka-mocna); border-radius: var(--r-m); font-weight: 700; cursor: pointer;
  }
  .kursy-przelacznik[aria-expanded="true"] .kursy-przelacznik__znak { transform: rotate(180deg); }
  .kursy-lista-opakowanie { display: none; margin-top: var(--o-3); }
  .kursy-lista-opakowanie--otwarta { display: block; }
}
@media (max-width: 560px) {
  .kursy-siatka { grid-template-columns: minmax(0, 1fr); }
  .kursy-mapa { flex-wrap: wrap; }
  .kursy-ruch { flex-direction: column-reverse; align-items: stretch; }
  .kursy-ruch__prawa { flex-direction: column-reverse; align-items: stretch; }
  .kursy-ruch .k-przycisk { width: 100%; }
  .kursy-material { flex-wrap: wrap; }
  .kursy-okladka__numer { font-size: 2.25rem; }
}