/* ==========================================================================
   WEKTOR WIEDZY — TRENERZY | arkusz globalny
   --------------------------------------------------------------------------
   Gdzie wkleić (jedno z poniższych, nie w kilku naraz):
     A) Wygląd → Dostosuj → Dodatkowy CSS
     B) Elementor → Ustawienia witryny → Własny CSS      (wymaga Elementor Pro)
     C) motyw potomny: style.css

   Jeśli używasz tego pliku globalnie, wyłącz arkusz wtyczki, żeby nie
   ładować tych samych reguł dwa razy — w functions.php motywu potomnego:

       add_filter( 'wektor_trenerzy_ladowac_css', '__return_false' );

   Cała personalizacja odbywa się przez zmienne w bloku :root poniżej.
   Nie trzeba grzebać w regułach ani stylować pojedynczych widgetów.

   SPIS TREŚCI
     1. Zmienne globalne         (1.1 — łamanie długich napisów)
     2. Siatka trenerów            /trenerzy/
     3. Ocena (gwiazdki)           wszędzie
     4. Akordeon                   trenerzy na kursie, kursy na profilu trenera
     5. Strona pojedynczego trenera
     6. Blok „Prowadzi: …"         strona webinaru / kursu
     7. Komunikat dla redaktora
     8. Karty kursów            profil trenera, uklad="karty"
   ========================================================================== */


/* ==========================================================================
   1. ZMIENNE GLOBALNE — tu zmieniasz wygląd całości
   ========================================================================== */

:root {
	--wt-akcent:       #17468f;   /* kolor marki: paski, nagłówki, przyciski */
	--wt-tekst:        inherit;   /* nazwiska w siatce — dziedziczy z motywu */
	--wt-tekst-tresc:  #0a0a0a;   /* opisy trenerów */
	--wt-tekst-slaby:  #6b7280;   /* stanowiska, liczba opinii */
	--wt-ramka:        #e5e7eb;   /* obramowania i puste gwiazdki */
	--wt-tlo:          #ffffff;   /* tło elementów akordeonu */
	--wt-gwiazdka:     #f0ad4e;   /* wypełnienie gwiazdek */
	--wt-promien:      12px;      /* zaokrąglenie rogów */
	--wt-kontener:     1200px;    /* szerokość treści na stronie trenera */
	--wt-foto:         150px;     /* średnica okrągłego zdjęcia w siatce */

	/* --- rozmiar paska akordeonu (nagłówek elementu) ---
	   Jeden zestaw liczb steruje całym akordeonem: trenerami na stronie
	   kursu i kursami na stronie trenera. Żeby zmienić skalę akordeonu,
	   zmieniaj te wartości, a nie reguły niżej. */
	--wt-akordeon-pion:     20px;      /* odstęp góra/dół = wysokość paska */
	--wt-akordeon-poziom:   24px;      /* odstęp lewo/prawo */
	--wt-akordeon-awatar:   80px;      /* miniatura trenera */
	--wt-akordeon-nazwa:    20px;      /* wielkość nazwiska */
	--wt-akordeon-rola:     1rem;      /* wielkość stanowiska */
	--wt-akordeon-przerwa:  14px;      /* odstęp między elementami */
	--wt-akordeon-odstep:   18px;      /* odstęp zdjęcie ↔ tekst ↔ strzałka */
	--wt-akordeon-tresc:    1.0625rem; /* wielkość rozwiniętego opisu */
	--wt-akordeon-ocena:    1rem;      /* wielkość gwiazdek w pasku */
	--wt-akordeon-strzalka: 13px;      /* bok kwadracika strzałki */

	/* --- akordeon kursów na stronie trenera --- */
	--wt-kursy-miniatura:   72px;      /* średnica okrągłej miniatury kursu */

	/* Karty kursów na profilu trenera — liczby z zaakceptowanej makiety. */
	--wt-kurs-foto:         100px;     /* średnica okrągłego zdjęcia w karcie */
	--wt-kurs-tytul:        20px;      /* wielkość tytułu kursu */
	--wt-kurs-odstep:       25px;      /* odstęp między kartami */
	--wt-kurs-kolumna:      190px;     /* szerokość kolumny z terminem i ceną */
	--wt-kurs-akcent:       #288800;   /* zieleń formuły, ikon i przycisku */

	/* --- strona trenera: portret w widgecie Elementora `wt-foto-trenera` ---
	   Domyślna średnica. Kontrolka „Szerokość obrazu" w samym widgecie
	   wygrywa z tą wartością, więc to tylko ratunek dla stron, na których
	   szerokości nie ustawiono w ogóle. 200 px = tyle, ile na wzorcowej
	   stronie /trenerzy/daniel-palyga/. */
	--wt-foto-trenera:      200px;

	/* --- blok „Prowadzi: …" na stronie webinaru / kursu --- */
	--wt-prowadzacy-foto:   118px;     /* bok zdjęcia, jak w widgecie na wzorcu */
	--wt-prowadzacy-odstep: 15px;      /* odstęp zdjęcie ↔ tekst */
}


/* --- 1.1 Łamanie długich napisów (dotyczy wszystkich widoków) -------------
   Nazwisko bez spacji ("dsnciuewagsfhjawhsefljkahsfkjasdnfjk"), adres URL
   wklejony w opis albo tytuł kursu z długim skrótem potrafiły wyjechać poza
   kartę i rozepchnąć wiersz siatki. Ta reguła pozwala łamać takie napisy
   w środku wyrazu — ale dopiero wtedy, gdy inaczej nie zmieściłyby się
   w swojej kolumnie. Zwykły tekst łamie się normalnie, po spacjach. */

.wt-siatka,
.wt-akordeon,
.wt-kafle,
.wt-trener {
	overflow-wrap: anywhere;
	word-break: break-word;   /* starsze Safari, gdzie „anywhere” nie działa */
}


/* ==========================================================================
   2. SIATKA TRENERÓW — [wektor_trenerzy_siatka] na /trenerzy/
   ========================================================================== */

.wt-siatka {
	display: grid;
	grid-template-columns: repeat(var(--wt-kolumny, 4), minmax(0, 1fr));
	gap: 28px 24px;
}

@media (max-width: 900px) {
	.wt-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
	.wt-siatka { grid-template-columns: minmax(0, 1fr); }
}

/* Wygląd karty odwzorowany 1:1 z wektorwiedzy.pl/trenerzy/ — okrągła
   fotografia 150 px i nazwisko 22/600 w kolorze marki. Tam nie ma efektu
   najechania: reguła hover zmienia kolor nazwiska na dokładnie ten sam
   odcień, więc nic się wizualnie nie dzieje. Nie dokładam własnych. */

.wt-karta { text-align: center; }

.wt-karta__link {
	display: block;
	text-decoration: none;
	color: var(--wt-tekst);
}

.wt-karta__foto {
	display: block;
	width: var(--wt-foto, 150px);
	height: var(--wt-foto, 150px);
	margin-inline: auto;
	overflow: hidden;
	border-radius: 50%;
	background: #f3f4f6;
}

.wt-karta__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.wt-karta__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 2.5rem;
	color: var(--wt-tekst-slaby);
}

.wt-karta__nazwa {
	display: block;
	margin: 8px 0 16px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wt-akcent);
	text-align: center;
}

.wt-karta__rola {
	margin: -8px 0 6px;
	font-size: .875rem;
	color: var(--wt-tekst-slaby);
}


/* ==========================================================================
   3. OCENA — pasek gwiazdek z częściowym wypełnieniem
   ========================================================================== */

.wt-ocena {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .875rem;
	line-height: 1;
	white-space: nowrap;
}

.wt-ocena__tlo {
	position: relative;
	display: inline-block;
	color: var(--wt-ramka);
	letter-spacing: 2px;
}

.wt-ocena__wypelnienie {
	position: absolute;
	inset: 0;
	overflow: hidden;
	color: var(--wt-gwiazdka);
	white-space: nowrap;
}

/* Grupa = jedna kategoria trenerów: nagłówek i pod nim zwykła siatka.
   Odstęp nad tytułem większy niż pod nim, żeby tytuł trzymał się swojej
   siatki, a nie wisiał w połowie drogi między dwiema. */
.wt-grupa + .wt-grupa {
	margin-top: 48px;
}

/* Dwie klasy, a nie jedna — celowo.
   Motyw ustawia `.elementor-kit-52 h2 { font-size: 18px }`, czyli 0,1,1;
   samo `.wt-grupa__tytul` to 0,1,0 i przegrywało, więc nagłówek dziedziny
   wychodził MNIEJSZY niż nazwisko na karcie pod nim. `.wt-grupa` opakowuje
   ten nagłówek zawsze i wychodzi wyłącznie z tej wtyczki, więc podniesienie
   wagi do 0,2,0 nie sięga niczego poza siatką trenerów.
   Rozmiar i wyśrodkowanie zrównane z `.wt-karta__nazwa`. */
.wt-grupa .wt-grupa__tytul {
	margin: 0 0 var(--wt-grupa-odstep, 40px);
	font-size: var(--wt-grupa-tytul, 22px);
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	color: var(--wt-akcent);
}

/* Nagłówek strony jest przyklejony do góry okna, więc skok do kotwicy
   chowałby nagłówek grupy pod nim. Margines kotwicy odsuwa cel o wysokość
   paska; do przestawienia zmienną, bo wysokość paska należy do motywu. */
.wt-grupa {
	scroll-margin-top: var(--wt-kotwica-odstep, 120px);
}


/* ==========================================================================
   3b. KAFLE DZIEDZIN — [wektor_trenerzy_kategorie]

   Wzorzec: „Kategorie kursów" na /kursy/ — kafel z zaokrągleniem 12 px,
   napis biały 20/600 na środku, zdjęcie w tle przycięte `cover`.
   Domyślnie BEZ zdjęcia: wtyczka nie wozi ze sobą grafik, bo to treść
   redakcji, nie kod. Kafel bez zdjęcia jest jednolity w kolorze marki.
   ========================================================================== */

.wt-dziedziny {
	display: grid;
	grid-template-columns: repeat(var(--wt-kolumny, 4), minmax(0, 1fr));
	gap: 20px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

@media (max-width: 900px) {
	.wt-dziedziny { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
	.wt-dziedziny { grid-template-columns: minmax(0, 1fr); }
}

/* Motyw potrafi dokładać `list-style` i marginesy każdemu `li` w treści. */
.wt-dziedziny .wt-dziedziny__poz {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Dwie klasy z tego samego powodu co przy nagłówku grupy: motyw ustawia
   własny kolor i podkreślenie na `a`, a reguła jednoklasowa mu nie dorównuje
   i kafel wychodził w kolorze odnośnika zamiast białym. */
.wt-dziedziny .wt-dziedzina {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wt-dziedzina-wys, 136px);
	padding: 20px;
	border-radius: 12px;
	background-color: var(--wt-akcent);
	background-image: var(--wt-dziedzina-obraz, none);
	background-size: cover;
	background-position: 50% 50%;
	color: #fff;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
}

/* Przyciemnienie wyłącznie pod zdjęciem. Na jednolitym tle marki niczego nie
   poprawia, a odbiera mu nasycenie. Napis stoi wyżej w stosie, więc zostaje
   czytelny niezależnie od tego, jak jasne zdjęcie wybierze redakcja. */
.wt-dziedziny .wt-dziedzina--zdjecie::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10, 26, 56, .55);
}

.wt-dziedziny .wt-dziedzina__napis {
	position: relative;
	z-index: 1;
	font-size: var(--wt-dziedzina-napis, 20px);
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
}

.wt-dziedziny .wt-dziedzina:hover,
.wt-dziedziny .wt-dziedzina:focus-visible {
	color: #fff;
	text-decoration: none;
}

.wt-dziedziny .wt-dziedzina:hover .wt-dziedzina__napis,
.wt-dziedziny .wt-dziedzina:focus-visible .wt-dziedzina__napis {
	text-decoration: underline;
}

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

.wt-ocena__opinie { color: var(--wt-tekst-slaby); }


/* ==========================================================================
   4. AKORDEON
      [wektor_trenerzy_akordeon] — trenerzy na kursie, produkcie, wpisie
      [wektor_trener_kafle]      — kursy na stronie trenera (modyfikator
                                   .wt-akordeon--kursy, patrz 4.1)
   ========================================================================== */

.wt-akordeon__naglowek { margin: 0 0 24px; }

.wt-akordeon__item {
	border: 1px solid var(--wt-ramka);
	border-radius: var(--wt-promien);
	background: var(--wt-tlo);
	margin-bottom: var(--wt-akordeon-przerwa);
	overflow: hidden;
}

.wt-akordeon__item[open] { border-color: var(--wt-akcent); }

.wt-akordeon__tytul {
	display: flex;
	align-items: center;
	gap: var(--wt-akordeon-odstep);
	padding: var(--wt-akordeon-pion) var(--wt-akordeon-poziom);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.wt-akordeon__tytul::-webkit-details-marker { display: none; }

.wt-akordeon__tytul:focus-visible {
	outline: 2px solid var(--wt-akcent);
	outline-offset: -2px;
}

/* Zdjęcie NIE kurczy się razem z tekstem.
   Bez „flex: 0 0 auto” dłuższy tytuł ściskał tę ramkę, a że motyw narzuca
   wszystkim obrazkom „max-width: 100%”, zdjęcie kurczyło się razem z nią —
   robiło się z koła spłaszczone jajko, a kolumna tekstu zaczynała się w jego
   miejscu i wyglądała, jakby na nie nachodziła. Stąd oba objawy naraz. */
/* Opakowanie przycina do koła. Nie podajemy mu wymiarów: przy `flex: 0 0 auto`
   i `line-height: 0` obejmuje dokładnie obrazek, więc jedna reguła obsługuje
   wszystkie trzy rozmiary awatara — trenera (80 px), kursu (72 px) i wersję
   telefonową — i żaden nie może się rozjechać z drugim. */
.wt-akordeon__awatar {
	flex: 0 0 auto;
	line-height: 0;
	overflow: hidden;
	border-radius: 50%;
}

.wt-akordeon__awatar img {
	width: var(--wt-akordeon-awatar);
	height: var(--wt-akordeon-awatar);
	max-width: none;   /* zdejmuje ograniczenie motywu */
	border: 0;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* Gwiazdki też trzymają swoją szerokość — mają white-space: nowrap,
   więc ściśnięte wychodziłyby poza pasek zamiast się zawinąć. */
.wt-akordeon .wt-ocena { flex: 0 0 auto; }

.wt-akordeon__osoba {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-right: auto;
	min-width: 0;
}

.wt-akordeon__nazwa {
	font-weight: 600;
	font-size: var(--wt-akordeon-nazwa);
	line-height: 1.3;
}

.wt-akordeon__rola,
.wt-akordeon__meta {
	font-size: var(--wt-akordeon-rola);
	color: var(--wt-tekst-slaby);
	line-height: 1.4;
}

.wt-akordeon .wt-ocena { font-size: var(--wt-akordeon-ocena); }

.wt-akordeon__strzalka {
	flex: 0 0 auto;
	width: var(--wt-akordeon-strzalka);
	height: var(--wt-akordeon-strzalka);
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
	opacity: .55;
}

.wt-akordeon__item[open] .wt-akordeon__strzalka { transform: rotate(-135deg); }

.wt-akordeon__tresc {
	padding: var(--wt-akordeon-pion) var(--wt-akordeon-poziom) calc(var(--wt-akordeon-pion) + 4px);
	border-top: 1px solid var(--wt-ramka);
	font-size: var(--wt-akordeon-tresc);
	line-height: 1.6;
}

.wt-akordeon__tresc > *:first-child { margin-top: 0; }
.wt-akordeon__tresc > *:last-child { margin-bottom: 0; }

.wt-akordeon__wiecej { margin-top: 16px; font-size: 1rem; }
.wt-akordeon__wiecej a { color: var(--wt-akcent); }

@media (max-width: 600px) {
	.wt-akordeon__tytul { flex-wrap: wrap; gap: 12px; }
	.wt-akordeon__awatar img {
		width: calc(var(--wt-akordeon-awatar) * .7);
		height: calc(var(--wt-akordeon-awatar) * .7);
	}
	.wt-akordeon .wt-ocena { order: 3; width: 100%; }
}


/* --- 4.1 Akordeon kursów na stronie trenera — .wt-akordeon--kursy ---------
   Ten sam pasek co u trenerów, dwie różnice: pod tytułem idzie linia terminu
   i ceny, a rozwinięta treść kończy się przyciskiem prowadzącym na kurs.

   Miniatura jest kołem, tak samo jak awatar trenera — tylko mniejszym.
   Obrazki wyróżniające kursów na wektorwiedzy.pl to w praktyce kwadratowe
   portrety prowadzących (960x960), więc koło mieści taki kadr bez cięcia,
   a szerszym banerom obcina symetrycznie boki. */

.wt-akordeon--kursy .wt-akordeon__awatar img {
	width: var(--wt-kursy-miniatura);
	height: var(--wt-kursy-miniatura);
}

/* Cena to nie przypis — ciemniej i grubiej niż linia terminu obok. */
.wt-akordeon--kursy .wt-akordeon__cena {
	font-weight: 600;
	color: var(--wt-tekst-tresc);
}

.wt-akordeon--kursy .wt-akordeon__cta {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 3px;
	background: var(--wt-akcent);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: opacity .2s ease;
}

.wt-akordeon--kursy .wt-akordeon__cta:hover,
.wt-akordeon--kursy .wt-akordeon__cta:focus { opacity: .85; color: #fff; }

@media (max-width: 600px) {
	.wt-akordeon--kursy .wt-akordeon__awatar img {
		width: calc(var(--wt-kursy-miniatura) * .8);
		height: calc(var(--wt-kursy-miniatura) * .8);
	}
}


/* ==========================================================================
   5. STRONA POJEDYNCZEGO TRENERA — /trenerzy/imie-nazwisko/
      Układ odwzorowany z sekcji Elementora na /trenerzy/szymon-trzemzalski/
   ========================================================================== */

.wt-kontener {
	max-width: var(--wt-kontener);
	margin-inline: auto;
	padding-inline: 20px;
}

/* --- 5.1 Pasek nagłówkowy w kolorze marki + falisty kształt --- */

.wt-hero {
	position: relative;
	background: var(--wt-akcent);
	padding: 60px 0 95px;
	overflow: hidden;
}

.wt-hero__tytul {
	margin: 0;
	color: #fff;
	font-size: 46px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
}

.wt-hero__ksztalt {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	line-height: 0;
	direction: ltr;
}

.wt-hero__ksztalt svg {
	display: block;
	width: calc(300% + 1.3px);
	height: 55px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.wt-hero__ksztalt path { fill: #fff; }

/* Odkomentuj, jeśli motyw zamyka treść w wąskim kontenerze
   i niebieski pasek nie jest pełnej szerokości ekranu:

.wt-hero {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
*/

@media (max-width: 1024px) {
	.wt-hero { padding: 40px 0 70px; }
	.wt-hero__tytul { font-size: 34px; }
}

@media (max-width: 600px) {
	.wt-hero__tytul { font-size: 26px; }
}

/* --- 5.2 Dwie kolumny: wizytówka | opis --- */

.wt-profil { padding: 40px 0; }

.wt-profil__uklad {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

.wt-profil__wizytowka { text-align: center; }

/* `inline-block`, żeby opakowanie objęło samo zdjęcie, a nie całą szerokość
   wizytówki — inaczej przycięcie do koła nie miałoby czego przycinać. */
.wt-profil__foto {
	display: inline-block;
	line-height: 0;
	overflow: hidden;
	border-radius: 50%;
}

.wt-profil__foto img {
	width: 150px;
	height: 150px;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* --- 5.2 Zdjęcie trenera w szablonie Elementora --------------------------
   Reguły wyżej (`.wt-profil__foto`) obsługują WYŁĄCZNIE szablon awaryjny
   wtyczki. Na wektorwiedzy.pl strony trenerów rysuje Elementor: każdy trener
   ma własny dokument, a portret stoi w widgecie „Obraz z opisem". Do tamtego
   obrazka klasy wtyczki nie sięgają, więc dostaje je stąd.

   ZAKRES: wyłącznie widget z dopisaną klasą `wt-foto-trenera`.

   Wersja 2.18.1 próbowała inaczej — regułą obejmującą każdy widget obrazka
   na stronie trenera (`body.single-trener .elementor-widget-image…`). Było to
   za szerokie i **zostało wycofane**: reguła łapała też logo w nagłówku
   i obrazki w treści, robiła z nich koła i rozjeżdżała im wielkość.
   Wniosek: kształt narzucamy jednemu, wskazanemu widgetowi — nigdy „wszystkim
   obrazkom na stronie", bo stronę buduje ktoś inny niż wtyczka.

   Klasę wpisuje się raz, w Elementorze: zaznacz widget ze zdjęciem →
   Zaawansowane → Klasy CSS → `wt-foto-trenera`. Wzorzec strony trenera ma ją
   już wpisaną, więc nowi trenerzy dostają ją sami. Dla utworzonych wcześniej
   działa też akcja „Zastosuj wzorzec" na liście trenerów — ale uwaga,
   ta nadpisuje cały układ strony. */

/* „Obraz z opisem": przycinamy opakowanie. `figure` zawiera tam sam obrazek,
   podpis stoi obok, w `.elementor-image-box-content`, więc nic nie ucierpi. */
.wt-foto-trenera .elementor-image-box-img {
	/* Szerokość jest tylko DOMYŚLNA: kontrolka „Szerokość obrazu" w widgecie
	   ma tę samą wagę i wczytuje się później, więc dalej wygrywa. Ta wartość
	   ratuje trenerów zbudowanych ze starszej kopii wzorca, w której
	   szerokości w ogóle nie było — bez niej zdjęcie zajmowało całą kolumnę. */
	width: var(--wt-foto-trenera, 200px);
	max-width: 100%;
	overflow: hidden;
	border-radius: 50%;
	line-height: 0;
}

/* Zwykły widget „Obraz" — kształt na samym obrazku, BEZ przycinania
   opakowania: przy włączonym podpisie Elementor wkłada tam `figcaption`,
   a przycięcie zjadłoby podpis razem z rogami.

   `!important` jest tu konieczne i świadome. Bez przycinania zostaje sam
   promień, a ten przegrywa z regułą motywu celującą w `img` — sprawdzone:
   przy motywie z `border-radius: 5px !important` wychodził zaokrąglony
   kwadrat zamiast koła. Selektor trafia wyłącznie w portret tego trenera
   (klasę dokłada wtyczka po identyfikatorze zdjęcia), więc zakres jest
   tak wąski, jak się da. */
.wt-foto-trenera.elementor-widget-image .elementor-widget-container img {
	width: var(--wt-foto-trenera, 200px);
	max-width: 100%;
	border-radius: 50% !important;
}

/* Kwadrat wymuszony, bo promień 50% na prostokącie daje elipsę.

   `!important` przy wysokości jest konieczne: kontrolka „Wysokość obrazu"
   w widgecie zapisuje się do CSS dokumentu selektorem
   `.elementor-NNN .elementor-element.elementor-element-XXX .elementor-image-box-img img`
   — waga (0,4,1) przeciw naszej (0,2,1), więc bez tego zawsze wygrywa.
   Sprawdzone na profilu z portretem 664×444 i wysokością 100 px: widget
   robił z niego 200×100, czyli elipsę. Po tej regule 200×200 i koło.

   Zakres pozostaje jednym widgetem — klasę `wt-foto-trenera` dokłada wtyczka
   po identyfikatorze załącznika. Logo w nagłówku sprawdzone na żywej stronie:
   170,7×32 px, promień 0 — nietknięte. To jest właśnie różnica wobec wycofanej
   wersji 2.18.1, która celowała we wszystkie obrazki na stronie trenera. */
.wt-foto-trenera .elementor-image-box-img img,
.wt-foto-trenera.elementor-widget-image .elementor-widget-container img {
	display: block;
	height: auto !important;
	aspect-ratio: 1 !important;   /* kwadrat niezależnie od proporcji pliku */
	object-fit: cover;            /* nadmiar docięty symetrycznie do środka */
	border-radius: 50%;
}

.wt-foto-trenera .elementor-image-box-img img {
	width: 100%;
	max-width: none;
}

.wt-profil__nazwa {
	margin: 16px 0 4px;
	font-size: 22px;
	font-weight: 600;
	color: var(--wt-akcent);
	text-align: center;
}

.wt-profil__rola {
	margin: 0 0 8px;
	color: var(--wt-tekst-slaby);
	font-size: 15px;
}

.wt-profil__linkedin { margin: 12px 0 0; font-size: 15px; }
.wt-profil__linkedin a { color: var(--wt-akcent); }

.wt-profil__opis {
	font-size: 16px;
	line-height: 24px;
	color: var(--wt-tekst-tresc);
}

.wt-profil__opis > *:first-child { margin-top: 0; }
.wt-profil__opis > *:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
	.wt-profil__uklad { grid-template-columns: 1fr; gap: 28px; }
}

/* --- 5.3 Nagłówek "Trener X prowadzi u nas:" --- */

.wt-prowadzi { padding: 10px 0 30px; }

.wt-prowadzi__naglowek {
	margin: 0 0 24px;
	font-size: 26px;
	font-weight: 500;
	color: var(--wt-akcent);
	text-align: center;
}

@media (max-width: 600px) {
	.wt-prowadzi__naglowek { font-size: 21px; }
}

/* --- 5.4 Kafle kursów --- */

/* Dwie kolumny po 50%. Ostatni kafel, gdy jest ich nieparzysta liczba,
   schodzi do nowego wiersza i staje na srodku w tej samej szerokosci 50%.
   Dziala tak samo dla 1, 3, 5 kafli. Ta sama zasada obowiazuje w widgecie
   Petla Elementora — patrz .elementor-loop-container nizej. */
.wt-kafle {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.wt-kafle > :last-child:nth-child(odd) {
	grid-column: 1 / -1;
	max-width: calc(50% - 12px);
	margin-inline: auto;
}

@media (max-width: 780px) {
	.wt-kafle { grid-template-columns: minmax(0, 1fr); }

	.wt-kafle > :last-child:nth-child(odd) {
		grid-column: auto;
		max-width: none;
	}
}

/* Wyśrodkowanie pojedynczego kafla w widgecie Pętla Elementora
   ustawionym na 2 kolumny. Usun, jesli nie korzystasz z Petli. */
.wt-petla-kursow .elementor-loop-container > :last-child:nth-child(odd) {
	grid-column: 1 / -1;
	max-width: calc(50% - 12px);
	margin-inline: auto;
}

@media (max-width: 780px) {
	.wt-petla-kursow .elementor-loop-container > :last-child:nth-child(odd) {
		grid-column: auto;
		max-width: none;
	}
}

/* Odwzorowanie widgetu Call to Action ze stron trenerów: płaskie tło w
   kolorze marki, proste rogi, wysokość 280 px, wyściółka 35 px. Na wzorcu
   nie ma obrazka tła, a najechanie przyciemnia kafel nakładką 30% czerni. */

.wt-kafel {
	position: relative;
	display: flex;
	min-height: 280px;
	padding: 35px;
	border-radius: 0;
	background-color: var(--wt-akcent);
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	transition: background-color .3s ease;
}

.wt-kafel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .3);
	opacity: 0;
	transition: opacity .3s ease;
}

.wt-kafel:hover::after { opacity: 1; }

/* Obrazek wyróżniający kursu jako tło kafla — na wzorcu nie jest używany.
   Włączenie: zmień display na block. */
.wt-kafel__tlo {
	display: none;
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.wt-kafel__tresc {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-align: center;
}

.wt-kafel__tytul {
	margin: 0 0 15px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
}

.wt-kafel__opis {
	margin: 0 0 15px;
	font-size: 16px;
	line-height: 1.5;
	color: #fff;
}

/* Linia terminu i ceny — domyślnie kafel pokazuje sam tytuł i przycisk,
   te linie pojawiają się dopiero po włączeniu w krótkim kodzie. */
.wt-kafel__meta {
	margin: 0 0 15px;
	font-size: 15px;
	line-height: 1.4;
	color: #fff;
	opacity: .92;
}

.wt-kafel__cena {
	font-size: 17px;
	font-weight: 600;
	opacity: 1;
}

.wt-kafel__cena del { opacity: .65; font-weight: 400; }
.wt-kafel__cena ins { text-decoration: none; }

.wt-kafel__przycisk {
	padding: 12px 24px;
	border: 2px solid #fff;
	border-radius: 3px;
	background: #fff;
	color: var(--wt-akcent);
	font-size: 15px;
	font-weight: 500;
}

.wt-odstep { height: 70px; }


/* ==========================================================================
   6. BLOK „PROWADZI: …" — [wektor_trener_prowadzi]
      Odwzorowanie widgetu Elementora „Pole obrazka" (pozycja: z lewej,
      wyrównanie: do góry) ze stron webinarów. Liczby zdjęte ze wzorca
      /blog/webinar-podatek-vat-2027-…/: zdjęcie 118 px, odstęp 15 px,
      nagłówek 18/600 w kolorze marki z marginesem 8/16, opis 16/24.
   ========================================================================== */

.wt-prowadzacy {
	display: flex;
	align-items: flex-start;
	gap: var(--wt-prowadzacy-odstep);
}

/* Dwóch przypisanych trenerów = dwa bloki jeden pod drugim. */
.wt-prowadzacy + .wt-prowadzacy { margin-top: 28px; }

/* Koło przycięte NA OPAKOWANIU — patrz obszerna uwaga przy kartach kursów
   (sekcja 8). Skrót: sam `border-radius` na <img> przegrywa remis z regułą
   motywu wczytaną później, przycięcie przez `overflow` nie przegrywa nigdy. */
.wt-prowadzacy__foto {
	flex: 0 0 auto;   /* patrz uwaga przy akordeonie: motyw ściska obrazki */
	line-height: 0;
	overflow: hidden;
	border-radius: 50%;
}

.wt-prowadzacy__foto img {
	display: block;
	width: var(--wt-prowadzacy-foto);
	height: var(--wt-prowadzacy-foto);
	max-width: none;
	border: 0;
	border-radius: 50%;
	object-fit: cover;
}

/* Wyjście awaryjne: ksztalt="kwadrat" w krótkim kodzie — dokładnie taki
   kadr, jaki dawał stary widget Elementora „Pole obrazka". Od 2.18.0 trzeba
   o to poprosić jawnie; domyślnie blok „Prowadzi:" ma koło, tak jak
   wszystkie pozostałe zdjęcia w obu wtyczkach. */
.wt-prowadzacy--kwadrat .wt-prowadzacy__foto,
.wt-prowadzacy--kwadrat .wt-prowadzacy__foto img { border-radius: 0; }

.wt-prowadzacy__tresc { min-width: 0; }

.wt-prowadzacy__tytul {
	margin: 8px 0 16px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wt-akcent);
	text-align: left;
}

.wt-prowadzacy__opis {
	font-size: 16px;
	line-height: 24px;
	color: var(--wt-tekst-tresc);
}

.wt-prowadzacy__opis > *:first-child { margin-top: 0; }
.wt-prowadzacy__opis > *:last-child { margin-bottom: 0; }

.wt-prowadzacy__wiecej { margin: 12px 0 0; font-size: 15px; }
.wt-prowadzacy__wiecej a { color: var(--wt-akcent); }

@media (max-width: 600px) {
	.wt-prowadzacy { flex-direction: column; }
}


/* ==========================================================================
   7. KOMUNIKAT DLA REDAKTORA — widoczny tylko dla zalogowanych
   ========================================================================== */

.wt-info {
	padding: 12px 16px;
	border: 1px dashed #d1d5db;
	border-radius: 8px;
	color: var(--wt-tekst-slaby);
}


/* ==========================================================================
   8. KARTY KURSÓW NA PROFILU TRENERA        [wektor_trener_kursy uklad="karty"]
   --------------------------------------------------------------------------
   Ten sam kształt co karta z widgetu „Lista kursów", ale rysowany tutaj —
   układ ma działać także bez tamtej wtyczki i bez jej arkusza.
   Liczby pochodzą z zaakceptowanej makiety karty.
   ========================================================================== */

.wt-kursy {
	display: grid;
	/* minmax(0,1fr), nie samo 1fr: domyślne minimum ścieżki to jej treść,
	   więc długi tytuł szkolenia rozpychał kartę poza ekran telefonu
	   zamiast się zawinąć — a razem z nią wypychał przycisk poza kadr. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wt-kurs-odstep, 25px);
}

.wt-kurs {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--wt-kurs-przerwa, 20px);
	min-width: 0;
	/* Karta celowo bez ramki i cienia — tak wygląda lista ofertowa. */
}

/* Kolor odnośników bierzemy z otoczenia: motyw kolorował odwiedzone tytuły
   na czerwono i połowa listy robiła się inna niż reszta.
   Prefiks `.wt-kursy` daje wagę wyższą niż reguły motywu celujące
   w `a:visited` wewnątrz widgetu — sama `.wt-kurs a` im przegrywała
   i pierwszy, już odwiedzony tytuł zostawał czerwony. */
.wt-kursy .wt-kurs a,
.wt-kursy .wt-kurs a:link,
.wt-kursy .wt-kurs a:visited,
.wt-kursy .wt-kurs a:active {
	color: inherit;
	text-decoration: none;
}

/* Tytuł jest odnośnikiem, więc po najechaniu ma to po sobie pokazać. */
.wt-kursy .wt-kurs a:hover,
.wt-kursy .wt-kurs a:focus-visible {
	color: var(--wt-kurs-najechanie, #004ef5);
	text-decoration: none;
}

/* ---------- zdjęcie + ocena ---------- */

.wt-kurs__foto {
	flex: 0 0 auto;
	width: var(--wt-kurs-foto, 100px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

/* Kolumna z samymi gwiazdkami, bez zdjęcia — węższa, bo nie musi mieścić
   kadru, a przy stu pikselach zostawiałaby dziurę obok tytułu. */
.wt-kurs__foto--bez-zdjecia {
	width: auto;
	min-width: var(--wt-kurs-ocena-szer, 74px);
	justify-content: center;
}

/* Koło robimy NA OPAKOWANIU, nie tylko na obrazku.
   Samo `border-radius` na <img> bywa przebite: motyw i Elementor potrafią
   narzucić obrazkom własny promień regułą o tej samej wadze, a wtedy wygrywa
   arkusz wczytany później — objaw jest taki, że portrety z kołem wypalonym
   w pliku wyglądają dobrze, a logo wstawione jako obrazek wyróżniający
   zostaje kwadratem. Przycięcie przez `overflow` na opakowaniu jest na taki
   remis odporne, bo nie zależy od promienia samego obrazka. */
.wt-kurs__foto a {
	display: block;
	width: var(--wt-kurs-foto, 100px);
	height: var(--wt-kurs-foto, 100px);
	overflow: hidden;
	border-radius: 50%;
	line-height: 0;
}

/* max-width:none zdejmuje ograniczenie motywu — bez tego dłuższy tytuł
   spłaszczał koło w jajko. Ta sama pułapka co w akordeonie.
   Selektor celowo dwuczłonowy, żeby nie remisował z regułą motywu. */
.wt-kurs .wt-kurs__foto img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border: 0;
	border-radius: 50%;
	object-fit: cover;
}

.wt-kurs__foto .wt-ocena {
	font-size: var(--wt-kurs-ocena, .9375rem);
}

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

.wt-kurs__tresc {
	flex: 1 1 auto;
	min-width: 0;
}

.wt-kurs__formula {
	display: block;
	color: var(--wt-kurs-akcent, #288800);
	font-size: var(--wt-kurs-formula, .875rem);
	font-weight: 600;
	margin-bottom: 4px;
}

.wt-kurs__tytul {
	margin: 0;
	font-size: var(--wt-kurs-tytul, 20px);
	line-height: var(--wt-kurs-tytul-interlinia, 1.5);
	font-weight: 600;
	/* Długie tytuły szkoleń łamiemy także w środku wyrazu — inaczej
	   zbitka skrótów rozpychała kartę poza kolumnę. */
	overflow-wrap: anywhere;
}

.wt-kurs__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 10px 0 0;
	color: var(--wt-tekst-slaby, #6b7280);
	font-size: var(--wt-kurs-meta, .9375rem);
}

.wt-kurs__pole {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.wt-kurs__ikona {
	flex: 0 0 auto;
	color: var(--wt-kurs-akcent, #288800);
}

/* ---------- kolumna z terminem, ceną i przyciskiem ---------- */

.wt-kurs__kolumna {
	flex: 0 0 auto;
	width: var(--wt-kurs-kolumna, 190px);
	padding-left: var(--wt-kurs-kolumna-odstep, 24px);
	border-left: 1px solid var(--wt-ramka, #e5e7eb);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 2px;
}

.wt-kurs__para {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wt-kurs__etykieta {
	font-size: .6875rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wt-tekst-slaby, #6b7280);
}

.wt-kurs__wartosc {
	font-size: var(--wt-kurs-wartosc, 1.0625rem);
	margin-bottom: 6px;
}

.wt-kurs__cena {
	font-weight: 600;
}

/* Cena z WooCommerce niesie własne znaczniki — zdejmujemy z nich style,
   żeby kwota nie wychodziła mniejsza od etykiety nad nią. */
.wt-kurs__cena .amount,
.wt-kurs__cena bdi {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.wt-kurs__cena del {
	opacity: .55;
	font-weight: 400;
	margin-right: 6px;
}

.wt-kurs__cta {
	display: inline-block;
	margin-top: 4px;
	padding: var(--wt-kurs-cta-pion, 8px) var(--wt-kurs-cta-poziom, 18px);
	background: var(--wt-kurs-akcent, #288800);
	border-radius: var(--wt-kurs-cta-promien, 25px);
	font-size: var(--wt-kurs-cta, .9375rem);
	line-height: 1.4;
	white-space: nowrap;
}

.wt-kurs__cta,
.wt-kurs a.wt-kurs__cta:link,
.wt-kurs a.wt-kurs__cta:visited,
.wt-kurs a.wt-kurs__cta:hover,
.wt-kurs a.wt-kurs__cta:focus {
	color: #ffffff;
}

.wt-kurs__cta:hover,
.wt-kurs__cta:focus {
	filter: brightness(.92);
}

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

@media (max-width: 600px) {

	.wt-kurs {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	/* Zdjęcie schodzi z ekranu — na szerokości telefonu zabierało połowę
	   wiersza tytułowi, a ten na liście kursów jest najważniejszy.
	   Przywrócenie bez ruszania reguł:  --wt-kurs-foto-telefon: flex; */
	.wt-kurs__foto {
		display: var(--wt-kurs-foto-telefon, none);
	}

	.wt-kurs__tresc {
		flex: 1 1 100%;
	}

	/* Blok z terminem i ceną kładzie się w rząd: pary po lewej, przycisk
	   dopchnięty do prawej. Kreski nad nim NIE ma — na wąskim ekranie
	   czytała się jak granica karty i termin z ceną wyglądały na nagłówek
	   pozycji stojącej niżej. Karty rozdziela sam odstęp. */
	.wt-kurs__kolumna {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: flex-start;
		gap: 10px var(--wt-kurs-telefon-przerwa, 22px);
		padding: var(--wt-kurs-telefon-odstep, 18px) 0 0;
		margin-top: 0;
		border-left: 0;
		text-align: left;
	}

	.wt-kurs__para {
		align-items: flex-start;
	}

	.wt-kurs__wartosc {
		margin-bottom: 0;
	}

	.wt-kurs__cta {
		margin-top: 0;
		margin-left: auto;
	}
}