/* ==========================================================================
   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
     2. Siatka trenerów            /trenerzy/
     3. Ocena (gwiazdki)           wszędzie
     4. Akordeon                   strona kursu / produktu / wpisu
     5. Strona pojedynczego trenera
     6. Komunikat dla redaktora
   ========================================================================== */


/* ==========================================================================
   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:      10px;      /* 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 ZWINIĘTEGO paska akordeonu (nagłówek elementu) --- */
	--wt-akordeon-pion:     14px;      /* odstęp góra/dół = wysokość paska */
	--wt-akordeon-poziom:   18px;      /* odstęp lewo/prawo */
	--wt-akordeon-awatar:   52px;      /* miniatura trenera */
	--wt-akordeon-nazwa:    inherit;   /* wielkość nazwiska, np. 18px */
	--wt-akordeon-rola:     .875rem;   /* wielkość stanowiska */
	--wt-akordeon-przerwa:  10px;      /* odstęp między elementami */
}


/* ==========================================================================
   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;
}

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

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


/* ==========================================================================
   4. AKORDEON — [wektor_trenerzy_akordeon] na kursie, produkcie, wpisie
   ========================================================================== */

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

.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: 14px;
	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;
}

.wt-akordeon__awatar img {
	width: var(--wt-akordeon-awatar);
	height: var(--wt-akordeon-awatar);
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

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

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

.wt-akordeon__rola {
	font-size: var(--wt-akordeon-rola);
	color: var(--wt-tekst-slaby);
}

.wt-akordeon__strzalka {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	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: 16px 18px 18px;
	border-top: 1px solid var(--wt-ramka);
}

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

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

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


/* ==========================================================================
   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; }

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

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

.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. KOMUNIKAT DLA REDAKTORA — widoczny tylko dla zalogowanych
   ========================================================================== */

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