/**
 * Lista kursów — wyłącznie szkielet.
 *
 * Kolory, typografia, odstępy i ramki ustawiasz w zakładce Styl Elementora.
 * Tutaj są tylko reguły, bez których układ by się rozjechał, plus wartości
 * startowe dla krótkiego kodu (gdzie kontrolek Elementora nie ma).
 */

/* Pionowe odstępy karty: JEDNA liczba.

   Do 1.56.1 na odstęp między kursami składały się cztery wartości z czterech
   miejsc: odstęp listy (16), górny odstęp karty (15), wewnętrzny odstęp
   treści (16) i pion kolumny bocznej (16/16). Nad kreską wychodziło 32 px,
   pod nią 31, a zdjęcie stało raz 21, raz 37 px od linii — zależnie od tego,
   ile linijek ma tytuł. Cztery pokrętła, jeden efekt, żadnej spójności.

   Od 1.57.0 wszystko liczy się od `--wk-odstep`: odstęp listy jest zerowy,
   karta ma tyle samo od góry i od dołu, kreska stoi między kartami, a treść
   i kolumna boczna nie mają własnego pionu — biorą go z karty. Wartość
   wybrana z trzech wariantów 2026-09-15: 20 px („zwarty").

   1.57.1: wartość NA SZTYWNO, 5 px, bez kontrolki. W 1.57.0 zmienną
   ustawiała kontrolka „Odstęp między kartami" — i wyszło na jaw, że część
   list ma ją ustawioną ręcznie z czasów, gdy była odstępem siatki: 6 px na
   /kursy/kursy-ksiegowe/, 0 px na /szkolenia/szkolenia-kadrowe/. Po zmianie
   znaczenia te liczby stały się „6 px od kreski" i „treść przyklejona do
   kreski". Użytkownik zdecydował (2026-09-16): wszędzie tyle samo, na sztywno.

   Nazwa zmiennej jest NOWA (`--wk-odstep-karty`, nie `--wk-odstep`) i to nie
   jest kosmetyka. Elementor trzyma wygenerowany CSS strony w pliku
   post-XXXX.css i nie odświeża go po aktualizacji wtyczki — dopiero po
   zapisie strony albo „Regeneruj CSS". Stare `--wk-odstep: 6px` będzie więc
   w tych plikach jeszcze długo; pod nową nazwą nie ma na co trafić.
   Kto chce inną wartość, zmienia tę jedną liczbę tutaj.

   1.59.0: telefon ma własne wartości (12 px od kreski, 16 px od krawędzi,
   12 px między polami) — w sekcji „telefon” na końcu pliku, też na sztywno
   i też silniejsze od kontrolek Elementora. */
.wk-lista {
	--wk-odstep-karty: 5px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

/* Kreska między kartami — ta sama, co między treścią a kolumną boczną
   (1 px, czerń 10 %). Selektor z `+` łapie dopiero drugą kartę i kolejne,
   więc lista z jednym kursem nie dostaje żadnej linii — nie ma czego
   oddzielać. Nad kreską i pod nią jest tyle samo, bo oba odstępy to
   ten sam `padding` karty. Kontrolka „Ramka karty" w Elementorze
   ({{WRAPPER}} .wk-karta, 0,4,0) nadal wygrywa z tą regułą (0,3,0) —
   kto obrysuje karty ramką, dostaje swoją ramkę i na górnej krawędzi. */
.wk-lista .wk-karta + .wk-karta {
	border-top: 1px solid rgba(0, 0, 0, .1);
}

/* Kolumny wyrównane do środka w pionie. Karty bywają różnej wysokości —
   tytuł ma jedną linijkę albo cztery — a rozciąganie wypychało zdjęcie
   do góry, a przycisk do dołu. Zmienisz to w Układ → Wyrównanie w pionie. */
.wk-karta {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: var(--wk-odstep-karty, 5px) 0;
	min-width: 0;
	overflow: hidden;
	position: relative;
	transition: transform .25s ease, box-shadow .25s ease;
}

/* Odwiedzone odnośniki motyw kolorował na czerwono — na liście kursów
   połowa tytułów robiła się przez to inna niż reszta. Kolor bierzemy
   z otoczenia, a kontrolki Elementora i tak go nadpisują. */
.wk-karta a,
.wk-karta a:link,
.wk-karta a:visited,
.wk-karta a:hover,
.wk-karta a:focus,
.wk-karta a:active {
	color: inherit;
}

/* ---------- obrazek ---------- */

/* Kolumna zdjęcia: kadr, a pod nim ocena. Dzięki temu gwiazdki wiążą się
   z twarzą, do której należą, i nie zajmują wiersza pod tytułem. */
.wk-obrazek {
	flex: 0 0 auto;
	width: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

/* Kadr jest KWADRATOWY i przycina zawartość do koła.
 *
 * Dwie rzeczy naraz, bo bez obu koło bywało jajkiem albo kwadratem:
 *
 *   `aspect-ratio: 1` — samo `border-radius: 50%` daje koło tylko wtedy,
 *   gdy pudełko jest kwadratem. Zdjęcia trenerów są kwadratowe i wyglądały
 *   dobrze, ale obrazek wyróżniający kursu bywa panoramą 1200×628 i wtedy
 *   z „koła" wychodził poziomy owal. Teraz kadr trzyma proporcję sam,
 *   a `object-fit: cover` docina zdjęcie symetrycznie.
 *
 *   `overflow: hidden` — promień na samym <img> przegrywa remis z regułą
 *   motywu o tej samej wadze, wczytaną później. Przycięcie opakowaniem
 *   od promienia obrazka nie zależy, więc przegrać nie może. Ta sama
 *   lekcja co przy kartach kursów w drugiej wtyczce.
 *
 * Promień zostaje też na obrazku — po to, żeby kontrolka „Zaokrąglenie"
 * w panelu dalej działała: wpisanie tam wartości w pikselach zmienia
 * kształt obrazka, a kadr idzie za nim regułą niżej.
 */
.wk-obrazek__kadr {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
}

.wk-obrazek a {
	display: block;
	height: 100%;
}

.wk-obrazek img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border: 0;
	border-radius: 50%;
}

/* Zdjęcia trenerów mają obwódkę wypaloną w pliku — dokładanie drugiej
   dawało podwójny pierścień. Rysujemy ją wyłącznie pod logotypem
   zastępczym, żeby kolumna trzymała równy rytm także bez zdjęcia. */
.wk-obrazek--zastepczy img {
	border: 2px solid #17468f;
}

.wk-obrazek .wk-strefa {
	padding: 0;
	justify-content: center;
	flex-wrap: wrap;
	row-gap: 2px;
	width: 100%;
}

/* Gwiazdki pod zdjęciem muszą zmieścić się w szerokości kolumny — przy
   rozmiarze z sekcji „Gwiazdki" pięć znaków plus liczba wychodziło poza
   kadr i było ucinane. Wyższa specyficzność niż kontrolka Elementora,
   bo ta celuje w `.wk-ocena` i inaczej wygrywałaby swoim rozmiarem.

   Tylko od 768 px w górę (1.59.0). Na telefonie gwiazdki schodzą pod
   treść (sekcja „telefon” na końcu pliku) i mają tam wyglądać tak samo
   jak w strefie „Pod treścią” — pełna wielkość pól, bez ściskania do
   szerokości kadru, którego tam już nie ma. */
@media (min-width: 768px) {

	.wk-karta .wk-obrazek .wk-pole--ocena {
		gap: 3px;
		font-size: 12px;
		white-space: nowrap;
	}

	.wk-karta .wk-obrazek .wk-ocena {
		font-size: 10px;
	}

	/* Odstęp między znakami też skalujemy, inaczej pięć gwiazdek nadal
	   nie mieści się w stu pikselach kolumny. */
	.wk-karta .wk-obrazek .wk-ocena__tlo,
	.wk-karta .wk-obrazek .wk-ocena__wypelnienie {
		letter-spacing: .5px;
	}

	.wk-karta .wk-obrazek .wk-ocena__liczba {
		font-size: 12px;
	}
}

/* ---------- treść ---------- */

.wk-tresc {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 16px;   /* pion daje karta (`--wk-odstep-karty`), tu zostaje tylko poziom */
}

/* Tytuł prowadzi wzrok samą wielkością — 1.1em przy 0.875em pól. Grubość ma
   tę samą co one, półgrubą, bo cieńszy tekst pól okazał się nieczytelny.
   Zmienisz to kontrolką Styl → Tytuł → Typografia. */
/* Dwie klasy, nie jedna — z tego samego powodu co w Trenerach.
   Motyw ustawia `.elementor-kit-52 h3 { font-size: 18px }` oraz
   `.elementor-kit-52 a { font-weight: 500 }`; oba to 0,1,1. Samo
   `.wk-tytul` (0,1,0) przegrywało rozmiar, a `.wk-tytul a` (też 0,1,1)
   przegrywało grubość kolejnością arkuszy — i tytuł wychodził na 500,
   choć w tym pliku stoi pogrubienie. Zmierzone na /szkolenia/ 2026-09-11.
   `.wk-karta` opakowuje tytuł zawsze, w widgecie i w krótkim kodzie.

   18 px wprost, nie 1.1em: ta sama wielkość niezależnie od tego, jaki
   znacznik (h2/h3/h4/div) wybierze redakcja w ustawieniach widgetu —
   wcześniej rozmiar zależał od tego, co motyw ma na dany znacznik.
   Kontrolka „Typografia tytułu" w Elementorze ({{WRAPPER}} .wk-tytul a,
   0,2,1 i późniejszy arkusz) nadal wygrywa z obiema regułami. */
.wk-karta .wk-tytul {
	margin: 0 0 6px;
	line-height: 1.3;
	font-size: var(--wk-tytul-rozmiar, 18px);
	font-weight: 700;
}

.wk-karta .wk-tytul a {
	text-decoration: none;
	font-weight: inherit;
	transition: color .15s ease;
}

/* Tytuł jest odnośnikiem, więc po najechaniu ma to po sobie pokazać.
   Specyficzność wyższa niż reguła zerująca kolory odnośników na karcie. */
.wk-karta .wk-tytul a:hover,
.wk-karta .wk-tytul a:focus {
	color: #1667c8;
}

/* Dane pociągnięte ze strony trenera bywają w źródle pogrubione (<strong>
   w opisie ACF), a bywają zwykłe — grubość ustalamy sami, żeby karty
   wyglądały tak samo niezależnie od tego, jak zapisano treść.

   Pola zostają półgrube (600). Próba odchudzenia ich do 400 (1.49.0) wyszła
   zdecydowanie za cienko — przy tej wielkości tekst się rozmywał. Od tytułu
   (700, 18 px) odróżnia je i wielkość, i o stopień mniejsza grubość. */
.wk-pole,
.wk-pole b,
.wk-pole strong,
.wk-pole__wartosc,
.wk-pole__wartosc b,
.wk-pole__wartosc strong {
	font-weight: 600;
}

/* Pola mniejsze od tytułu: tytuł 18 px, pola 15 px przy typowej karcie
   (0.9375em od 16 px). Do 1.55.1 było 0.875em = 14 px — o piksel za mało,
   żeby przy Montserracie tekst nie wyglądał na drobny.
   Kontrolka „Pola dodatkowe → Typografia" ma tę samą wagę i wczytuje się
   później, więc nadal wygrywa — to jest tylko punkt wyjścia. */
.wk-karta .wk-pole {
	font-size: var(--wk-pole-rozmiar, .9375em);
	line-height: 1.4;
}


.wk-opis {
	margin: 6px 0;
}

/* ---------- strefy ---------- */

.wk-strefa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 6px 0;
	min-width: 0;
}

/* Strefa nad tytułem to formuła zajęć: „Online" albo „Stacjonarnie · Krosno".
   Stoi ciasno przy tytule i czyta się jak nadpis, nie jak kolejne pole. */
.wk-strefa--nad-tytulem {
	margin: 0 0 2px;
}

/* Zieleń ta sama co przycisk — formuła i wezwanie do zapisu to jedna para.
   Wyższa specyficzność, bo kontrolka „Pola dodatkowe → Kolor tekstu"
   celuje w `.wk-pole` i inaczej rozjaśniłaby ten napis razem z resztą. */
.wk-karta .wk-pole--formula,
.wk-karta .wk-pole--formula .wk-pole__wartosc {
	color: #288800;
	font-weight: 600;
}

/* „nowość!" — ta sama zieleń co formuła i przycisk, bo to również informacja
   zachęcająca, a nie kolejny szczegół organizacyjny. Ikona bierze kolor
   z `currentColor`, więc idzie za napisem bez osobnej reguły. */
.wk-karta .wk-pole--nowosc,
.wk-karta .wk-pole--nowosc .wk-pole__wartosc {
	color: var(--wk-kolor-nowosci, #288800);
	font-weight: 600;
}

/* Etykieta nad wartością — tak wygląda kolumna z terminem i ceną.
   Prefiks `.wk-karta` daje wyższą specyficzność niż reguła bazowa
   `.wk-pole`, która ustawia układ poziomy — bez tego podpis stawał
   obok wartości, a nie nad nią. */
.wk-karta .wk-pole--blok {
	display: block;
	flex-basis: 100%;
	line-height: 1.35;
}

.wk-karta .wk-pole--blok .wk-pole__etykieta {
	display: block;
	margin: 0 0 1px;
	font-size: .7em;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .65;
}

.wk-karta .wk-pole--blok .wk-pole__wartosc {
	display: block;
	font-size: 1.12em;
}

/* Ikony rysowane przez wtyczkę — kreską, w kolorze przycisku. */
.wk-ikona-svg {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Na przycisku ikona przejmuje kolor napisu, nie zieleń pola —
   zielona ikona na zielonym tle byłaby niewidoczna. */
.wk-przycisk__ikona { color: inherit; }

/* stopka spycha się na dół karty, żeby przyciski w rzędzie były równo */
.wk-strefa--stopka {
	margin-top: auto;
	padding-top: 10px;
}

.wk-strefa--na-obrazku {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	margin: 0;
	pointer-events: none;
}

.wk-strefa--na-obrazku a {
	pointer-events: auto;
}

/* Kolumna boczna to opisany blok danych: termin, cena, pod nimi przycisk.
   Pionowa kreska oddziela to, co się czyta, od tego, co się klika.

   `align-self: stretch` — kolumna jest tak wysoka jak treść karty, więc
   kreska biegnie od `--wk-odstep-karty` pod górną linią do tyle samo nad
   dolną, w każdej karcie tak samo; zawartość centruje `justify-content`
   (od 1.59.1 naprawdę — patrz „Cena i przycisk razem” niżej).

   `flex-wrap: nowrap` — NIE usuwać. Strefy dziedziczą `wrap` po `.wk-strefa`,
   bo rząd pól pod tytułem ma się zawijać. Stos w pionie nie ma się zawijać
   nigdy: przy rozciągniętej kolumnie i niskiej karcie przeglądarka łamała
   termin, cenę i przycisk w trzy kolumny obok siebie, a przycisk wypadał
   za krawędź karty. Wyszło w podglądzie 2026-09-15, zanim trafiło na stronę. */
.wk-strefa--kolumna {
	flex: 0 0 auto;
	align-self: stretch;
	width: 196px;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	gap: 10px;
	padding: 0 0 0 22px;
	border-left: 1px solid rgba(0, 0, 0, .1);
	text-align: center;
}

/* Wszystko w kolumnie na jednej osi — cena, gwiazdki i przycisk
   pod sobą, wyśrodkowane. */
.wk-strefa--kolumna .wk-pole {
	justify-content: center;
	text-align: center;
}

.wk-strefa--kolumna .wk-pole--ocena {
	flex-wrap: wrap;
	row-gap: 2px;
}

/* Przycisk zamyka kolumnę — cena tuż nad wezwaniem, czyli decyzja
   i działanie w jednym miejscu. Karta składa pola przed przyciskiem,
   więc kolejność wychodzi sama. */
.wk-strefa--kolumna .wk-przycisk {
	margin-top: 2px;
}

/* Cena i przycisk razem, na środku kolumny (1.59.1, komputer i tablet).

   Do 1.59.0 cena stała u góry kolumny, a przycisk na jej dnie — odstęp
   między nimi od 14 do 63 px, zależnie od wysokości karty. Dwie przyczyny:

   `flex-basis: 100%` z `.wk-karta .wk-pole--blok` ma w rzędzie pod tytułem
   zmuszać pole do własnej linii. W kolumnie (flex w pionie, rozciągniętej
   do wysokości karty) to samo znaczy „100% WYSOKOŚCI” — pole z ceną
   wypełniało całe wolne miejsce i spychało przycisk na dół.

   Kontrolki „Wyrównanie pól” i „Odstęp między polami” celują
   w `{{WRAPPER}} .wk-strefa` (0,4,0), więc trafiają też w kolumnę, gdzie
   „do lewej” znaczy „do góry”. `justify-content: center` wyżej nigdy nie
   działało. Stąd prefiks z klasy widgetu (0,5,0), jak w sekcji telefonu.

   Odstęp 8 px na sztywno, w każdej liście tak samo — wariant B z trzech
   (14 / 8 / 4 px) pokazanych na prawdziwych kartach, wybór 2026-09-29.
   Ten sam odstęp rozdziela termin i cenę w kursach stacjonarnych.
   Telefon ma własny układ w sekcji na końcu pliku i tej reguły nie widzi. */
@media (min-width: 768px) {

	.wk-lista {
		--wk-kolumna-odstep: 8px;
	}

	.wk-karta .wk-strefa--kolumna .wk-pole--blok {
		flex: 0 0 auto;
	}

	.wk-lista .wk-karta > .wk-strefa--kolumna,
	.elementor-element.elementor-widget-wektor_kursy_lista .wk-lista .wk-karta > .wk-strefa--kolumna {
		justify-content: center;
		gap: var(--wk-kolumna-odstep, 8px);
	}

	.wk-karta .wk-strefa--kolumna .wk-przycisk {
		margin-top: 0;
	}
}

/* ---------- pojedyncze pole ---------- */

/* Wspólna wysokość wiersza dla wszystkich pól w strefie. Bez tego
   pole z ikoną było nieco wyższe od pola bez ikony i znaczniki pod
   tytułem siedziały na różnych wysokościach. */
.wk-pole {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	line-height: 1.4;
	min-height: 1.4em;
}

.wk-pole__wartosc,
.wk-pole__etykieta {
	line-height: inherit;
}

/* Ikony zielone, tekst pola czarny — kolor niesie sama ikona, nie napis.
   Zieleń przez zmienną z wartością zapasową: kontrolka „Kolor ikon"
   ustawia zmienną i wtedy wygrywa, a bez niej i tak nie zadziała
   dziedziczony czarny kolor tekstu, bo ta reguła jest bardziej
   szczegółowa niż cokolwiek, co ustawia kolor całemu polu. */
.wk-pole__ikona {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 1;
}

.wk-karta .wk-pole__ikona {
	color: var(--wk-kolor-ikony, #288800);
}

/* Ikony z biblioteki są pełne. */
.wk-pole__ikona svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Ikony wtyczki są konturowe: żadnego wypełnienia, kolor w kresce.
   Specyficzność wyższa niż reguła wyżej i niż kontrolka koloru ikon,
   inaczej `fill` zamieniał zegar w pełne kółko. */
.wk-karta .wk-pole__ikona .wk-ikona-svg,
.wk-karta .wk-przycisk__ikona .wk-ikona-svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Etykieta („Prowadzący:") lżejsza od wartości, ale nie chuda — 500 przy
   600 wartości daje czytelną różnicę bez rozjeżdżania linijki. */
.wk-pole__etykieta {
	flex: 0 0 auto;
	font-weight: 500;
	opacity: .75;
}

.wk-pole__wartosc {
	min-width: 0;
}

.wk-cena-stara {
	text-decoration: line-through;
	opacity: .6;
	margin-right: 4px;
}

/* WooCommerce wstawia własne znaczniki w cenie — neutralizujemy marginesy */
.wk-pole--cena .amount {
	white-space: nowrap;
}

.wk-pole--cena del,
.wk-pole--cena ins {
	text-decoration: none;
	background: none;
}

.wk-pole--cena del {
	text-decoration: line-through;
	opacity: .6;
	margin-right: 4px;
}

/* ---------- gwiazdki ---------- */

.wk-ocena {
	display: inline-block;
	position: relative;
	flex: 0 0 auto;
	line-height: 1;
}

.wk-ocena__tlo {
	display: block;
	position: relative;
	letter-spacing: 2px;
	white-space: nowrap;
}

.wk-ocena__wypelnienie {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	letter-spacing: 2px;
}

.wk-ocena__liczba {
	font-weight: 600;
}

.wk-ocena__opinie {
	opacity: .7;
}

/* ---------- przycisk ---------- */

.wk-przycisk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 18px;
	font-size: .95em;
	border-radius: 25px;
	background: #288800;
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.wk-przycisk:hover {
	background: #1d6300;
	color: #fff;
}

.wk-przycisk__ikona {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.wk-przycisk__ikona svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Komunikat diagnostyczny — widzi go wyłącznie zalogowany redaktor. */
.wk-pusto {
	padding: 12px;
	background: #fff8e5;
	border: 1px solid #e0c200;
}

.wk-pusto__uwaga {
	display: block;
	margin-top: 4px;
	font-size: .85em;
	opacity: .7;
}

.wk-debug {
	margin: 12px 0;
	border-collapse: collapse;
	font-size: 13px;
}

.wk-debug th,
.wk-debug td {
	padding: 4px 10px;
	border: 1px solid #e0c200;
	text-align: left;
	vertical-align: top;
}

.wk-debug th {
	background: #fff8e5;
}

/* ---------- telefon ---------- */

@media (max-width: 767px) {

	/* Odstępy na telefonie — na sztywno, w każdej liście tak samo (1.59.0).

	   Zgłoszenie 2026-09-24: na telefonie kursy stały za ciasno („lekko
	   rozsuń środek”) — 5 px od kreski, które wystarcza szerokiej i niskiej
	   karcie na komputerze, w wysokim słupku na telefonie sklejało sąsiednie
	   kursy. Pierwsza lista na /kursy/kursy-ksiegowe/ miała do tego wpisane
	   w panelu 0 w trzech polach (odstęp między polami, wewnętrzny odstęp,
	   blok z terminem i ceną): prowadzący i godziny zlewały się
	   w „Wacławik⏲9 godz.”, a treść stała przy samej krawędzi.

	   Kontrolki Elementora mają wagę 0,4,0 i wczytują się PO tym arkuszu,
	   więc zwykła reguła stąd z nimi przegrywa — tak było z odstępem 0
	   w pierwszej liście. Dlatego na telefonie te trzy odstępy liczą się
	   od zmiennych poniżej, a reguły, które je ustawiają, mają dodatkowo
	   prefiks z klasy widgetu (0,5,0). Ta sama decyzja co w 1.57.1:
	   wszędzie tyle samo, jedno miejsce do zmiany, bez przeklikiwania list.
	   Komputer i tablet dalej słuchają kontrolek.

	   --wk-odstep-karty  kreska → treść, tyle samo nad i pod (komputer: 5 px)
	   --wk-tel-bok       krawędź karty → tekst (tytuł, pola, gwiazdki, cena)
	   --wk-tel-pola      między polami w rzędzie i między rzędami */
	.wk-lista {
		--wk-odstep-karty: 12px;
		--wk-tel-bok: 16px;
		--wk-tel-pola: 12px;
	}

	.wk-karta {
		flex-direction: column;
	}

	/* Wnętrze karty rozsunięte o 2 px na każdym styku (1.59.0):
	   formuła–tytuł 2 → 4, tytuł–pola 12 → 14. Kontrolka „Tytuł →
	   Marginesy”, jeśli ktoś ją ustawi, nadal wygrywa (0,4,0). */
	.wk-karta .wk-strefa--nad-tytulem {
		margin-bottom: 4px;
	}

	.wk-karta .wk-tytul {
		margin-bottom: 8px;
	}

	.wk-lista .wk-karta .wk-strefa,
	.elementor-element.elementor-widget-wektor_kursy_lista .wk-lista .wk-karta .wk-strefa {
		gap: var(--wk-tel-pola, 12px);
	}

	/* Gwiazdki pod treścią, nie nad nią (1.59.0).

	   Zdjęcie jest na telefonie domyślnie ukryte, więc z kolumny zdjęcia
	   zostawały same gwiazdki — wyśrodkowane NAD formułą i tytułem,
	   jak podpis pod poprzednim kursem. Redakcja przestawiała je ręcznie
	   na „Pod treścią” (pierwsza lista na /kursy/kursy-ksiegowe/), ale to
	   przestawia je też na komputerze, gdzie mają stać pod zdjęciem.

	   `display: contents` rozpuszcza kolumnę zdjęcia: kadr i strefa
	   „Pod zdjęciem” stają się wprost elementami karty i dostają własne
	   miejsce w kolejności — kadr na górze, strefa zaraz za treścią, przed
	   blokiem z ceną. Znaczniki są te same, więc komputer i tablet nie
	   widzą żadnej zmiany, a w Elementorze nic nie trzeba przestawiać.

	   Kolejność wprost, a nie „jak wyjdzie z kierunku flexa”. Blok
	   z terminem, ceną i przyciskiem ma na telefonie zawsze zamykać
	   kartę — także wtedy, gdy w Elementorze zostanie na telefonie
	   układ poziomy albo gdy ktoś odwróci kierunek karty. */
	.wk-karta > .wk-obrazek {
		display: contents;
	}

	.wk-karta > .wk-obrazek > .wk-obrazek__kadr {
		order: 1;
	}

	/* Treść na całą szerokość karty. Kontrolka „Wyrównanie w pionie”
	   (align-items: center) w układzie kolumnowym działa jak wyśrodkowanie
	   w poziomie — karta z krótkim tytułem i jednym nazwiskiem robiła się
	   węższa od sąsiednich i jej tekst zaczynał się kilkanaście pikseli
	   dalej w prawo („Kurs Rachunkowości od Podstaw”, 2026-09-24). */
	.wk-karta > .wk-tresc {
		order: 2;
		align-self: stretch;
	}

	.wk-lista .wk-karta > .wk-tresc,
	.elementor-element.elementor-widget-wektor_kursy_lista .wk-lista .wk-karta > .wk-tresc {
		padding: 0 var(--wk-tel-bok, 16px);
	}

	/* Strefa spod zdjęcia wygląda teraz jak strefa „Pod treścią”:
	   ten sam odstęp od krawędzi co tekst, żeby gwiazdki zaczynały się
	   w pionie tytułu, i do lewej jak reszta pól. Kontrolka „Wyrównanie
	   pól” (0,4,0) nadal wygrywa. */
	.wk-karta > .wk-obrazek > .wk-strefa--pod-obrazkiem {
		order: 3;
		align-self: stretch;
		width: auto;
		justify-content: flex-start;
		padding: 0 var(--wk-tel-bok, 16px);
	}

	.wk-karta > .wk-strefa--kolumna {
		order: 4;
	}

	/* Kontrolka „Obrazek → Szerokość” ustawia szerokość kolumny zdjęcia,
	   której na telefonie już nie ma (`display: contents`) — kadr trzyma
	   więc swoje 100 px sam. Widać go tylko wtedy, gdy ktoś włączy zdjęcie
	   na telefonie w Styl → Obrazek → Widoczność. */
	.wk-karta .wk-obrazek__kadr {
		width: 100px;
	}

	/* Kolumna danych schodzi pod treść: termin z ceną stają obok
	   siebie, przycisk odsuwa się do prawej krawędzi.

	   Kreski nad blokiem już nie ma. Na wąskim ekranie czytała się
	   jak granica między kartami, więc termin, cena i „Zapisz się”
	   wyglądały na nagłówek karty stojącej niżej. Blok siedzi teraz
	   ciasno pod swoją treścią, a karty rozdziela linia z reguły
	   na końcu tej sekcji.

	   Odstępy boczne równe odstępowi treści (`--wk-tel-bok`), żeby
	   etykieta „CENA” zaczynała się w pionie tytułu. Od 1.59.0 na
	   telefonie na sztywno, także w widgecie — kontrolka Styl → Karta →
	   „Blok z terminem i ceną” działa już tylko na komputerze i tablecie.
	   Góra 14 px (do 1.58.0: 10), czyli treść–cena 16 → 20 px. */
	.wk-karta .wk-strefa--kolumna {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		margin: 0;             /* odstęp między ceną a przyciskiem: `--wk-tel-pola` wyżej */
		border-left: 0;
		border-top: 0;
	}

	.wk-lista .wk-karta > .wk-strefa--kolumna,
	.elementor-element.elementor-widget-wektor_kursy_lista .wk-lista .wk-karta > .wk-strefa--kolumna {
		padding: 14px var(--wk-tel-bok, 16px) 2px;
	}

	.wk-strefa--kolumna .wk-pole--blok {
		flex: 0 0 auto;
	}

	/* Do lewej, nie na środek. Wyśrodkowanie ma sens w kolumnie po
	   prawej stronie karty; pod treścią etykieta „TERMIN” wisiała
	   przez nie nad środkiem daty, zamiast równo z nią i z tytułem. */
	.wk-karta .wk-strefa--kolumna .wk-pole {
		justify-content: flex-start;
		text-align: left;
	}

	.wk-strefa--kolumna .wk-przycisk {
		margin-left: auto;
		width: auto;
		padding-left: 22px;
		padding-right: 22px;
	}

	/* Zdjęcie na telefonie zjadało pierwszy ekran i spychało tytuł
	   w dół, więc kadr znika. Kolumna zostaje, bo gwiazdki spod
	   zdjęcia to dane, nie ozdoba. Reguła celuje wyłącznie w krótki
	   kod — w widgecie to samo robi kontrolka Styl → Obrazek →
	   Widoczność, ustawiana osobno dla telefonu. */
	.wk-lista--shortcode .wk-obrazek__kadr {
		display: none;
	}

	/* Kreska między kartami jest teraz wspólna dla wszystkich szerokości —
	   patrz `.wk-lista .wk-karta + .wk-karta` na górze pliku. Na telefonie
	   zastępuje kreskę nad blokiem danych, którą wyłącza `border-top: 0`
	   wyżej, więc każdy blok z ceną zostaje po swojej stronie linii. */
}