/**
 * 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).
 */

.wk-lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

/* 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;
	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. */
.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: 16px;
}

/* Tytuł zaciągnięty do listy jest pogrubiony z automatu — to on ma prowadzić
   wzrok. Zmienisz to kontrolką Styl → Tytuł → Typografia. */
.wk-tytul {
	margin: 0 0 6px;
	line-height: 1.3;
	font-size: 1.1em;
	font-weight: 700;
}

.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ść.
   Wartość jest półgruba, etykieta lekka, więc oko trafia najpierw w dane. */
.wk-pole,
.wk-pole b,
.wk-pole strong,
.wk-pole__wartosc,
.wk-pole__wartosc b,
.wk-pole__wartosc strong {
	font-weight: 600;
}


.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.
   Karta nie ma ramki, więc ta kreska jest jedyną linią w układzie —
   oddziela to, co się czyta, od tego, co się klika. */
.wk-strefa--kolumna {
	flex: 0 0 auto;
	width: 196px;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 10px;
	padding: 16px 0 16px 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;
}

/* ---------- 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) {

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

	/* 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 {
		order: 1;
	}

	.wk-karta > .wk-tresc {
		order: 2;
	}

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

	/* Prefiks `.wk-karta` jest tu konieczny: kontrolka „Obrazek →
	   Szerokość” ustawia `{{WRAPPER}} .wk-obrazek { width: 100px }`
	   i przebijała regułę bez prefiksu. Kolumna zdjęcia zostawała
	   wąska, a przy wyrównaniu do środka zdjęcie lądowało na osi
	   karty zamiast przy lewej krawędzi. */
	.wk-karta .wk-obrazek {
		width: 100%;
		align-items: flex-start;
	}

	.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 wewnętrznemu odstępowi treści (16 px),
	   żeby etykieta „TERMIN” zaczynała się w pionie tytułu. To jest
	   wartość startowa dla krótkiego kodu — w widgecie te same odstępy
	   ustawia kontrolka Styl → Karta → „Blok z terminem i ceną”. */
	.wk-karta .wk-strefa--kolumna {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 8px 24px;
		margin: 0;
		padding: 10px 16px 2px;
		border-left: 0;
		border-top: 0;
	}

	.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;
	}

	/* Granica między kartami zamiast kreski nad blokiem danych.
	   Linia stoi w odstępie listy (Układ → Odstęp między kartami),
	   więc każdy blok z ceną zostaje po swojej stronie kreski.
	   Specyficzność 0,3,0 — wyższa niż kontrolka „Ramka karty”,
	   więc gdybyście kiedyś obrysowali karty ramką, na telefonie
	   górna krawędź weźmie kolor stąd. */
	.wk-lista .wk-karta + .wk-karta {
		border-top: 1px solid rgba(0, 0, 0, .1);
		padding-top: 14px;
	}
}