/**
 * jl-sekcje.css — sekcje sprzedazowe (/for-employers/, /pricing/, strona glowna)
 *
 * 🔴 Wersja pliku siedzi w `JL_SEKCJE_WERSJA` w `inc/jl-sekcje.php`.
 *    PODBIJ JA PRZY KAZDEJ ZMIANIE TEGO PLIKU — inaczej cache IONOS poda stary.
 *
 * Paleta jest ZAPOZYCZONA z `jl-pakiety.css`, nie wymyslona od nowa: granat
 * #003366, blekit #007BFF, zielen #14603A, ramki #E4EAF0. Nowa sekcja obok
 * cennika ma wygladac jak ta sama strona, a nie jak wklejony szablon.
 *
 * ⚠️ Wszystkie animacje siedza za `prefers-reduced-motion`. Ruch ma tlumaczyc
 *    produkt, a nie zaskakiwac — a czesc kandydatow ma w systemie wylaczone
 *    animacje nie dla wygody, tylko ze wzgledu na zdrowie.
 */

/* 🔴 WLASNY BOX-SIZING — NIE ZAKLADAMY, ZE STRONA GO USTAWIA.
   Bez tego `width:100%` przycisku na waskim ekranie doliczalo do siebie
   padding 2x28 px i CALA STRONA przewijala sie w bok o 20 px. Sekcje trafiaja
   do Elementora, na rozne strony i obok cudzych stylow — musza byc odporne
   na to, czego akurat NIE ma w otoczeniu. Sprawdzone 2026-08-29 w ramce
   414 px: bez tej reguly `scrollWidth` 433 px przy `viewport` 413 px. */
.jl-sek,
.jl-sek *,
.jl-sek *::before,
.jl-sek *::after {
	box-sizing: border-box;
}

/* 🔴 KAZDA SEKCJA MALUJE WLASNE TLO. BEZ WYJATKOW POZA JEDNYM.
   Do 2026-08-29 `kroki`, `gdzie` i `faq` nie mialy zadnego `background`, wiec
   pokazywalo sie to, co akurat bylo pod nimi. Na `/for-employers/` strona jest
   biala i wygladalo dobrze; na stronie glownej pod spodem jest GRANAT — i sekcja
   „Jak znalezc tu prace" wyszla ciemnym tekstem na ciemnym tle. Wlasciciel
   zglosil to z telefonu: „tlo sie zlewa, widac dopiero przy podswietleniu".

   Sekcja wstawiana skrotem moze trafic na dowolna strone i pod dowolne tlo —
   wiec nie wolno jej zakladac, co jest za nia. Jedyny wyjatek to `pigulki`,
   ktore SA zaprojektowane do stania wewnatrz ciemnego hero (i maja to opisane
   przy sobie). */
.jl-sek {
	background: #fff;
	--jl-granat: #003366;
	--jl-granat-ciemny: #14203a;
	--jl-blekit: #007BFF;
	--jl-zielen: #14603A;
	--jl-zielen-tlo: #E8F5EC;
	--jl-tekst: #23303B;
	--jl-tekst-szary: #5A6672;
	--jl-tekst-jasny: #7A8794;
	--jl-ramka: #E4EAF0;
	--jl-tlo: #F7F9FB;
	--jl-tlo-zimne: #F5FAFF;
	--jl-cien: 0 1px 2px rgba(0, 51, 102, .06), 0 8px 24px rgba(0, 51, 102, .06);
	--jl-cien-hover: 0 2px 4px rgba(0, 51, 102, .08), 0 16px 40px rgba(0, 51, 102, .12);

	position: relative;
	padding: 64px 0;
	color: var(--jl-tekst);
	font-size: 16px;
	line-height: 1.6;
}

.jl-sek__kontener {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

/* --- Naglowek sekcji ---------------------------------------------------- */

.jl-sek__glowa {
	max-width: 720px;
	margin: 0 0 40px;
}

.jl-sek__glowa.jest-srodek {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.jl-sek__nad {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--jl-blekit);
}

.jl-sek__tytul {
	margin: 0 0 14px;
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.2;
	font-weight: 700;
	color: var(--jl-granat);
}

.jl-sek__lead {
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--jl-tekst-szary);
}

/* --- Przyciski ---------------------------------------------------------- */

.jl-sek__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 26px 0 0;
}

.jl-sek__glowa.jest-srodek + .jl-sek__akcje {
	justify-content: center;
}

.jl-sek__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 13px 28px;
	border-radius: 10px;
	border: 1px solid transparent;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.jl-sek__btn--glowny {
	background: var(--jl-blekit);
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 123, 255, .28);
}

.jl-sek__btn--glowny:hover,
.jl-sek__btn--glowny:focus-visible {
	background: #0069d9;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 123, 255, .36);
}

.jl-sek__btn--drugi {
	background: #fff;
	color: var(--jl-granat);
	border-color: var(--jl-ramka);
}

.jl-sek__btn--drugi:hover,
.jl-sek__btn--drugi:focus-visible {
	color: var(--jl-granat);
	border-color: #C9D2DC;
	transform: translateY(-2px);
	box-shadow: var(--jl-cien);
}

.jl-sek__btn:focus-visible {
	outline: 3px solid rgba(0, 123, 255, .45);
	outline-offset: 2px;
}

/* --- Hero --------------------------------------------------------------- */

.jl-sek--hero {
	background: linear-gradient(165deg, #F5FAFF 0%, #EAF2FB 60%, #E3EDF8 100%);
}

/* Delikatna siatka w tle — daje glebie bez obrazka do wczytania. */
.jl-sek--hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(0, 51, 102, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 51, 102, .045) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
	pointer-events: none;
}

.jl-sek--hero .jl-sek__kontener {
	position: relative;
}

.jl-sek--hero .jl-sek__tytul {
	font-size: clamp(30px, 4.4vw, 50px);
	letter-spacing: -.015em;
}

.jl-sek__liczby {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 44px auto 0;
	max-width: 780px;
}

.jl-sek__liczba {
	flex: 1 1 190px;
	background: rgba(255, 255, 255, .78);
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 14px;
	padding: 20px 18px;
	text-align: center;
	box-shadow: var(--jl-cien);
	backdrop-filter: blur(4px);
}

.jl-sek__liczba strong {
	display: block;
	font-size: 34px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--jl-granat);
	font-variant-numeric: tabular-nums;
}

.jl-sek__liczba span {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	color: var(--jl-tekst-szary);
}

/* --- Kroki -------------------------------------------------------------- */

.jl-sek__kroki {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.jl-sek__krok {
	position: relative;
	padding-top: 8px;
}

/* Linia laczaca kroki — rysowana TYLKO tam, gdzie kroki naprawde stoja
   obok siebie. Przy zawinieciu do jednej kolumny znikaja (media nizej),
   bo linia w pionie sugerowalaby kolejnosc, ktorej juz nie widac. */
.jl-sek__krok::after {
	content: "";
	position: absolute;
	top: 26px;
	left: calc(50% + 30px);
	right: -24px;
	height: 2px;
	background: repeating-linear-gradient(90deg, #C9D2DC 0 6px, transparent 6px 12px);
}

.jl-sek__krok:last-child::after {
	display: none;
}

.jl-sek__numer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--jl-granat);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	box-shadow: 0 6px 16px rgba(0, 51, 102, .22);
}

.jl-sek__krok-tresc {
	text-align: center;
}

.jl-sek__krok-tresc h3 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--jl-granat);
}

.jl-sek__krok-tresc p {
	margin: 0;
	font-size: 15px;
	color: var(--jl-tekst-szary);
}

/* --- Podswietlanie krokow ----------------------------------------------- */

/* Wlasciciel 2026-08-29: „zeby to sie podswietlalo — jedynka, potem dwojka,
   trojka i czworka, taki loop". Podswietlenie robimy TLEM I CIENIEM, nie
   powiekszeniem: skok rozmiaru przesuwalby sasiednie kroki i uklad falowalby
   w kolko przez cala wizyte. */

.jl-sek__krok {
	border-radius: 14px;
	padding: 16px 14px 14px;
	transition: background-color .35s ease, box-shadow .35s ease;
}

.jl-sek__numer {
	transition: background-color .35s ease, box-shadow .35s ease, color .35s ease;
}

.jl-sek__krok.jest-podswietlony,
.jl-sek__krok:hover,
.jl-sek__krok:focus-within {
	background: #fff;
	box-shadow: var(--jl-cien-hover);
}

.jl-sek__krok.jest-podswietlony .jl-sek__numer,
.jl-sek__krok:hover .jl-sek__numer {
	background: var(--jl-blekit);
	box-shadow: 0 0 0 6px rgba(0, 123, 255, .16), 0 6px 16px rgba(0, 123, 255, .3);
}

/* --- Siatka kart -------------------------------------------------------- */

.jl-sek--karty {
	background: var(--jl-tlo);
}

.jl-sek__siatka {
	display: grid;
	gap: 20px;
}

.jl-sek__siatka--karty {
	grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}

/* 🔴 MINIMUM 300 px, NIE 220 px (poprawka 2026-08-29).
   Przy 220 px na kolumnę na tekst zostawało ~130 px po odjęciu ikony, odstępu
   i wewnętrznych marginesów — „Tagi SUPER OFERTA i PRACA OD ZARAZ w pakietach
   płatnych" łamało się na dziewięć linijek i karty wyglądały jak rozsypane.
   Licząc od kontenera 1140 px: 300 px minimum daje **trzy** kolumny po ~353 px,
   czyli ~260 px na tekst i dwie linijki na opis.
   ⚠️ Zanim zwęzisz to z powrotem, policz miejsce POZOSTAŁE dla tekstu, a nie
   samą szerokość kolumny — ikona i marginesy zabierają tu prawie 100 px. */
.jl-sek__siatka--gdzie {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.jl-sek__karta {
	position: relative;
	background: #fff;
	border: 1px solid var(--jl-ramka);
	border-radius: 14px;
	padding: 26px 24px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Pasek u gory pojawiajacy sie pod kursorem — sygnal, ze karta jest zywa,
   bez podskakiwania calego ukladu. */
.jl-sek__karta::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 22px;
	right: 22px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, var(--jl-blekit), #4dabff);
	opacity: 0;
	transform: scaleX(.4);
	transition: opacity .2s ease, transform .2s ease;
}

/* Podswietlenie z petli wyglada TAK SAMO jak najechanie myszka — 🔴 celowo.
   Gdyby automat mial wlasny, inny wyglad, uzytkownik uczylby sie dwoch jezykow
   wizualnych na jednej stronie. Tu podswietlenie zawsze znaczy „popatrz tutaj".

   ⚠️ `translateY` jest bezpieczne w SIATCE (komorka ma stala wysokosc, sasiedzi
   sie nie przesuwaja), ale NIE w rzedzie krokow — tam podswietlamy samym tlem
   i cieniem. Patrz `.jl-sek__krok.jest-podswietlony`. */
.jl-sek__karta:hover,
.jl-sek__karta:focus-within,
.jl-sek__karta.jest-podswietlony {
	transform: translateY(-3px);
	border-color: #D6E2EE;
	box-shadow: var(--jl-cien-hover);
}

.jl-sek__karta:hover::before,
.jl-sek__karta:focus-within::before,
.jl-sek__karta.jest-podswietlony::before {
	opacity: 1;
	transform: scaleX(1);
}

.jl-sek__karta h3 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--jl-granat);
}

.jl-sek__karta p {
	margin: 0;
	font-size: 15px;
	color: var(--jl-tekst-szary);
}

.jl-sek__ikona {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0 0 16px;
	border-radius: 12px;
	background: var(--jl-tlo-zimne);
	color: var(--jl-blekit);
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.jl-sek__karta:hover .jl-sek__ikona,
.jl-sek__karta.jest-podswietlony .jl-sek__ikona {
	background: var(--jl-blekit);
	color: #fff;
	transform: scale(1.06);
}

.jl-sek__svg {
	width: 24px;
	height: 24px;
}

/* Wariant „gdzie" — gestszy, ikona obok tekstu zamiast nad nim. */
.jl-sek__siatka--gdzie .jl-sek__karta {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 18px 20px;
}

/* Tekst musi móc się kurczyć — bez tego element `flex` broni szerokości
   „min-content" i najdłuższe słowo rozpycha kartę poza siatkę. */
.jl-sek__siatka--gdzie .jl-sek__karta-tresc {
	min-width: 0;
	flex: 1 1 auto;
}

.jl-sek__siatka--gdzie .jl-sek__ikona {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 10px;
}

.jl-sek__siatka--gdzie .jl-sek__svg {
	width: 20px;
	height: 20px;
}

.jl-sek__siatka--gdzie h3 {
	font-size: 15px;
	margin-bottom: 4px;
}

.jl-sek__siatka--gdzie p {
	font-size: 14px;
}

/* --- Porownanie --------------------------------------------------------- */

/* 🔴 PRZEBUDOWANE 2026-08-29 na prosbe wlasciciela: „wyglada jak tabela Excel
   skopiowana i wklejona, zbyt tekstowo". Zostal <table> — bo to NAPRAWDE jest
   porownanie i czytnik ekranu ma je czytac jako tabele — ale przestal wygladac
   jak arkusz: znikly linie siatki, kazdy wiersz jest osobna kartka z odstepem,
   a rozstrzygniecie niesie KOLOR I ZNAK, nie sam tekst. */

.jl-sek--tabela {
	background: linear-gradient(180deg, #F7F9FB 0%, #EEF4FA 100%);
}

.jl-sek__tabela-kosz {
	/* Bez ramki i tla — kartkami sa teraz same wiersze. */
	overflow: visible;
}

.jl-sek__tabela {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 10px;
	font-size: 15px;
}

.jl-sek__tabela th,
.jl-sek__tabela td {
	text-align: left;
	vertical-align: middle;
	padding: 16px 18px;
	background: #fff;
}

.jl-sek__tabela thead th {
	padding: 10px 18px;
	background: transparent;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--jl-tekst-jasny);
	white-space: nowrap;
}

.jl-sek__tabela thead th.jest-nasze {
	background: var(--jl-granat);
	color: #fff;
	border-radius: 10px 10px 0 0;
	text-align: center;
}

.jl-sek__th-puste {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Nazwa porownywanej rzeczy — lewa kolumna, zaokraglona od lewej. */
.jl-sek__tabela tbody th {
	width: 22%;
	font-size: 15px;
	font-weight: 700;
	color: var(--jl-granat);
	border-radius: 12px 0 0 12px;
	border-left: 3px solid var(--jl-ramka);
}

/* Kolumna „jak to zwykle wyglada" — celowo wyciszona. */
.jl-sek__tabela tbody td {
	color: var(--jl-tekst-jasny);
	font-size: 14px;
}

/* Nasza kolumna — mocna, zielona, z ptaszkiem. To ona ma przyciagac oko. */
.jl-sek__tabela tbody td.jest-nasze {
	background: var(--jl-zielen-tlo);
	color: var(--jl-zielen);
	font-size: 15px;
	font-weight: 600;
	border-radius: 0 12px 12px 0;
	box-shadow: inset 3px 0 0 #2E9E5B;
}

/* Znak przy tresci — ptaszek albo kreska. */
.jl-sek__znak {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	margin-top: 1px;
}

.jl-sek__tabela td {
	display: table-cell;
}

.jl-sek__tabela td > span {
	display: inline;
}

.jl-sek__tabela tbody td .jl-sek__znak {
	vertical-align: -3px;
	margin-right: 8px;
	color: #C9D2DC;
}

.jl-sek__tabela tbody td.jest-nasze .jl-sek__znak {
	color: #2E9E5B;
}

.jl-sek__tabela tbody tr th,
.jl-sek__tabela tbody tr td {
	transition: transform .18s ease, box-shadow .18s ease;
}

.jl-sek__tabela tbody tr:hover th,
.jl-sek__tabela tbody tr:hover td {
	box-shadow: 0 6px 18px rgba(0, 51, 102, .1);
}

.jl-sek__tabela tbody tr:hover td.jest-nasze {
	background: #DCF0E4;
	box-shadow: inset 3px 0 0 #2E9E5B, 0 6px 18px rgba(0, 51, 102, .1);
}

/* --- Pasek kontrastowy miedzy sekcjami ---------------------------------- */

/* Zielony, nie granatowy — 🔴 celowo INNY kolor niz koncowe CTA. Dwa identyczne
   granatowe pasy na jednej stronie czytaja sie jak powtorka i drugi przestaje
   zatrzymywac wzrok. Ten przerywa biel w polowie strony, tamten domyka. */
.jl-sek--pasek {
	padding: 40px 0;
	background: linear-gradient(120deg, #14603A 0%, #1E7A47 55%, #2E9E5B 100%);
	color: #fff;
}

.jl-sek--pasek .jl-sek__glowa {
	max-width: 860px;
	margin-bottom: 0;
}

.jl-sek--pasek .jl-sek__tytul {
	font-size: clamp(21px, 2.4vw, 28px);
	color: #fff;
	margin-bottom: 8px;
}

.jl-sek--pasek .jl-sek__lead {
	font-size: 15px;
	color: rgba(255, 255, 255, .88);
}

.jl-sek--pasek .jl-sek__akcje {
	margin-top: 20px;
}

.jl-sek--pasek .jl-sek__btn--glowny {
	background: #fff;
	color: #14603A;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.jl-sek--pasek .jl-sek__btn--glowny:hover,
.jl-sek--pasek .jl-sek__btn--glowny:focus-visible {
	background: #F2FBF5;
	color: #14603A;
}

/* Kotwica przy kartach pakietow — zeby przyklejony naglowek nie zaslonil
   pierwszej karty po skoku. */
#pakiety {
	scroll-margin-top: 110px;
}

/* --- Szybkie filtry pod wyszukiwarka ------------------------------------ */

/* 🔴 JEDYNY WYJATEK OD REGULY „kazda sekcja maluje wlasne tlo".
   Pigulki stoja WEWNATRZ granatowego hero Elementora i to ono daje tlo —
   wlasne tlo zrobiloby bialy prostokat w srodku hero. */
.jl-sek--pigulki {
	padding: 0;
	background: transparent;
}

.jl-sek--pigulki .jl-sek__kontener {
	padding-top: 14px;
	padding-bottom: 0;
}

.jl-sek__pigulki {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.jl-sek__pigulki-etykieta {
	margin-right: 4px;
	font-size: 14px;
	color: rgba(255, 255, 255, .78);
}

.jl-sek__pigulka {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .35);
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.jl-sek__pigulka em {
	font-style: normal;
	font-size: 12px;
	font-weight: 700;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .22);
	font-variant-numeric: tabular-nums;
}

/* Pigulka w KOLORZE TAGU — tym samym, ktory ten tag ma na liscie ofert.
   Kolor przychodzi z taksonomii przez zmienne `--jl-tag-*` (patrz
   `jl_sekcje_pigulki()`), wiec wlasciciel zmienia go przy tagu, nie tutaj. */
.jl-sek__pigulka.jest-kolorowa {
	background: var(--jl-tag-tlo, rgba(255, 255, 255, .12));
	border-color: transparent;
	color: var(--jl-tag-tekst, #fff);
	box-shadow: 0 2px 8px rgba(0, 20, 45, .28);
}

.jl-sek__pigulka.jest-kolorowa em {
	background: rgba(0, 0, 0, .16);
}

.jl-sek__pigulka:hover,
.jl-sek__pigulka:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--jl-granat);
	transform: translateY(-1px);
}

.jl-sek__pigulka:hover em,
.jl-sek__pigulka:focus-visible em {
	background: rgba(0, 51, 102, .12);
}

/* Kolorowa pigulka pod kursorem tylko sie unosi — NIE bieleje.
   Zmiana koloru odbierala by jedyny sygnal, po ktorym kandydat rozpoznaje
   ten tag na liscie ofert. */
.jl-sek__pigulka.jest-kolorowa:hover,
.jl-sek__pigulka.jest-kolorowa:focus-visible {
	background: var(--jl-tag-tlo, #fff);
	color: var(--jl-tag-tekst, #fff);
	border-color: rgba(255, 255, 255, .65);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 20, 45, .38);
}

.jl-sek__pigulka.jest-kolorowa:hover em,
.jl-sek__pigulka.jest-kolorowa:focus-visible em {
	background: rgba(0, 0, 0, .16);
}

/* --- Wyszukiwarka na stronie glownej ------------------------------------ */

/* 🔴 TO NIE JEST NASZ WIDGET — to formularz wtyczki (`apus_element_job_board_pro_
   search_form`). Poprawiamy WYLACZNIE odstepy, i wylacznie na stronie glownej.
   Ten sam formularz stoi na liscie ofert, gdzie wyglada dobrze i gdzie zmiana
   ukladu byloby regresja — stad `body.home` w kazdym selektorze.

   ⚠️ Nie przepisujemy tego formularza na wlasny. Jest sercem strony glownej,
   a jego obsluga (Select2, geolokalizacja, przekazanie filtrow) siedzi we
   wtyczce. Wlasna kopia rozjechalaby sie przy pierwszej aktualizacji.

   Zmierzone 2026-08-29: kazda `.form-group` ma `margin-bottom: 30px` — TAKZE
   w ostatnim wierszu. Zostawialo to 30 px martwego miejsca pod polami i panel
   wygladal na przeciazony u dolu. Wlasciciel zglosil to jako „zle marginesy,
   zly padding". */

/* 🔴 BIALA KARTA TO `.filter-listing-form`, NIE `.form-search`.
   `.form-search` to `<form>` — jest PRZEZROCZYSTY i obejmuje takze linijke
   „Popularne wyszukiwania", ktora lezy POZA bialym panelem, na granacie.
   Padding, zaokraglenie i cien nalozone na `.form-search` odsuwaly wiec sama
   biala karte do srodka, a cien szedl na niewidoczne pudlo. Zmierzone, nie
   zgadniete — `.form-search` ma `background: transparent`, a `.filter-listing-form`
   `background: #fff`.

   Zmierzony stan wyjsciowy bialej karty: `padding: 0`, pola dotykaja gornej
   krawedzi, a na dole zostaje **30 px** z marginesu ostatniego pola. Dokladnie
   to wlasciciel zglosil jako „zle marginesy, zly padding".

   ⚠️ Marginesow pol ani ukladu wierszy NIE ruszamy. Pierwsze podejscie zerowalo
   `margin-bottom` w `.row:last-child` — a ten wiersz ma wysokosc 0 (to schowane
   „wiecej opcji"), wiec regula trafiala w pustke, za to odstepy miedzy widocznymi
   polami zmalaly z 47 do 31 px. Wystarczy wyrownac padding karty. */

/* Panel dostaje rowny oddech ze wszystkich stron zamiast dolnej dziury,
   a przy okazji wyglada na to, czym jest: NAJWAZNIEJSZYM elementem strony.
   To jest portal z ofertami pracy — wyszukiwarka ma byc jego bohaterem,
   nie jednym z wielu blokow (uwaga wlasciciela, 2026-08-29). */
/* 🔴 PADDING I ZAOKRAGLENIE KARTY USTAWIA **ELEMENTOR**, NIE TEN PLIK.
   Sprawdzone przez CSSOM: wygrywala regula z `post-30.css`
   (`.elementor-30 .elementor-element-0d96b5b .filter-listing-form`), czyli
   ustawienia SAMEGO WIDGETU (`padding_box` = 0, `border-radius` = 8).
   Nasza regula o nizszej specyficznosci nakladala tylko cien — stad falszywe
   wrazenie, ze „czesc dziala".

   Poprawione u zrodla, w ustawieniach widgetu: `padding_box` 30/30/0/30
   (dol zerowy, bo daje go 30 px marginesu ostatniego pola — razem 30/30),
   wersja mobilna 18/16/0/16, `border-radius` 16.

   ⚠️ Nie dopisuj tu `padding` z `!important`. Walka specyficznoscia z wlasnymi
   ustawieniami widgetu konczy sie tak, ze wlasciciel zmienia wartosc
   w Elementorze i nic sie nie dzieje — a przyczyny szuka sie godzinami. */
body.home .form-search .filter-listing-form {
	box-shadow: 0 4px 10px rgba(0, 20, 45, .10), 0 24px 60px rgba(0, 20, 45, .28);
}

/* Linijka „Popularne wyszukiwania" lezy pod bialym panelem, na granacie —
   dostaje wlasny odstep, zeby nie przyklejala sie do karty. */
body.home .form-search .content-trending {
	margin-top: 4px;
}

/* Pola: wyrazniejsza ramka, zeby bialy panel nie zlewal sie w jedna plame. */
body.home .form-search .form-control,
body.home .form-search .select2-selection {
	border: 1px solid #dfe6ee;
	font-size: 16px;
}

body.home .form-search .form-control:focus,
body.home .form-search .select2-container--open .select2-selection {
	border-color: var(--jl-blekit, #007BFF);
	box-shadow: 0 0 0 3px rgba(0, 123, 255, .16);
}

/* Przycisk — to on konczy cala te strone. Ma byc widoczny od razu. */
body.home .form-search .btn-submit {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .01em;
	box-shadow: 0 6px 18px rgba(0, 51, 102, .3);
	transition: transform .16s ease, box-shadow .16s ease;
}

body.home .form-search .btn-submit:hover,
body.home .form-search .btn-submit:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(0, 51, 102, .38);
}

/* --- Liczniki portalu na telefonie -------------------------------------- */

/* 🔴 ROZMIAR LICZNIKOW USTAWIA **ELEMENTOR**, NIE TEN PLIK.
   Wlasciciel 2026-08-29 z telefonu: „liczba ofert, krajow, branz jest zbyt duza,
   zajmuje za duzo miejsca". Pierwsza proba szla przez CSS i przegrala
   specyficznoscia z `post-30.css`
   (`.elementor-30 .elementor-element.elementor-element-c2930ab ...`),
   czyli z wlasnymi ustawieniami widgetu — dokladnie tak samo jak przy paddingu
   wyszukiwarki. To juz DRUGI raz ta sama pulapka w jednej sesji.

   Poprawione w ustawieniach czterech widgetow `counter`:
   `typography_number_font_size_mobile` = 26 px (bylo 36), `_tablet` = 30 px,
   `typography_title_font_size_mobile` = 12 px (bylo 13).

   ⚠️ Nie dopisuj tu `font-size` z `!important` — wlasciciel zmieni potem rozmiar
   w Elementorze i nic sie nie stanie. */


/* --- FAQ ---------------------------------------------------------------- */

.jl-sek__faq {
	max-width: 820px;
	margin: 0 auto;
	border: 1px solid var(--jl-ramka);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	box-shadow: var(--jl-cien);
}

.jl-sek__pyt {
	border-bottom: 1px solid var(--jl-ramka);
}

.jl-sek__pyt:last-child {
	border-bottom: 0;
}

.jl-sek__pyt > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	font-size: 16px;
	font-weight: 600;
	color: var(--jl-granat);
	cursor: pointer;
	list-style: none;
	transition: background-color .16s ease;
}

.jl-sek__pyt > summary::-webkit-details-marker {
	display: none;
}

.jl-sek__pyt > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--jl-blekit);
	border-bottom: 2px solid var(--jl-blekit);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}

.jl-sek__pyt[open] > summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.jl-sek__pyt > summary:hover {
	background: var(--jl-tlo-zimne);
}

.jl-sek__pyt > summary:focus-visible {
	outline: 3px solid rgba(0, 123, 255, .45);
	outline-offset: -3px;
}

.jl-sek__odp {
	padding: 0 22px 20px;
}

.jl-sek__odp p {
	margin: 0;
	font-size: 15px;
	color: var(--jl-tekst-szary);
}

/* --- CTA ---------------------------------------------------------------- */

.jl-sek--cta {
	background: linear-gradient(135deg, var(--jl-granat) 0%, var(--jl-granat-ciemny) 100%);
	color: #fff;
}

.jl-sek--cta .jl-sek__tytul {
	color: #fff;
}

.jl-sek--cta .jl-sek__lead {
	color: rgba(255, 255, 255, .82);
}

.jl-sek--cta .jl-sek__nad {
	color: #7ec2ff;
}

.jl-sek--cta .jl-sek__btn--drugi {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .4);
}

.jl-sek--cta .jl-sek__btn--drugi:hover {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .7);
	color: #fff;
}

/* --- Wejscie w kadr ----------------------------------------------------- */

/* 🔴 Stan poczatkowy nadaje JavaScript (klasa na `<html>`), NIE ten plik.
   Gdyby przezroczystosc byla tu na sztywno, wylaczony JavaScript zostawilby
   niewidoczna strone. Tak najgorszy przypadek to brak animacji. */
.jl-js-ruch .jl-sek__karta,
.jl-js-ruch .jl-sek__krok,
.jl-js-ruch .jl-sek__liczba {
	opacity: 0;
	transform: translateY(14px);
}

.jl-js-ruch .jl-sek.jest-widoczna .jl-sek__karta,
.jl-js-ruch .jl-sek.jest-widoczna .jl-sek__krok,
.jl-js-ruch .jl-sek.jest-widoczna .jl-sek__liczba {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease var(--jl-op, 0ms), transform .5s ease var(--jl-op, 0ms);
}

/* --- Wezsze ekrany ------------------------------------------------------ */

@media (max-width: 900px) {
	.jl-sek {
		padding: 48px 0;
	}

	.jl-sek__krok::after {
		display: none;
	}

	.jl-sek__kroki {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.jl-sek__krok {
		display: flex;
		gap: 16px;
		text-align: left;
	}

	.jl-sek__numer {
		margin: 0;
		flex: 0 0 auto;
		width: 38px;
		height: 38px;
		font-size: 16px;
	}

	.jl-sek__krok-tresc {
		text-align: left;
	}
}

@media (max-width: 720px) {
	.jl-sek__glowa {
		margin-bottom: 28px;
	}

	.jl-sek__akcje {
		flex-direction: column;
	}

	.jl-sek__btn {
		width: 100%;
	}

	.jl-sek__liczba {
		flex-basis: 100%;
	}

	/* Tabela → karty. 🔴 NIE poziomy suwak: porownanie, ktore trzeba
	   przewijac bokiem, przestaje cokolwiek porownywac. */
	.jl-sek__tabela,
	.jl-sek__tabela tbody,
	.jl-sek__tabela tr,
	.jl-sek__tabela td,
	.jl-sek__tabela tbody th {
		display: block;
		width: auto;
	}

	.jl-sek__tabela thead {
		display: none;
	}

	/* Caly wiersz staje sie jedna kartka. */
	.jl-sek__tabela tbody tr {
		background: #fff;
		border-radius: 12px;
		box-shadow: var(--jl-cien);
		padding: 4px 0 10px;
		margin-bottom: 12px;
	}

	.jl-sek__tabela tbody th {
		width: auto;
		padding: 14px 16px 8px;
		border-radius: 12px 12px 0 0;
		border-left: 0;
		border-bottom: 1px solid var(--jl-ramka);
		font-size: 15px;
	}

	.jl-sek__tabela tbody td {
		padding: 10px 16px;
		font-size: 14px;
	}

	/* Bez naglowka tabeli trzeba powiedziec, czyja to kolumna. */
	.jl-sek__tabela td::before {
		content: attr(data-etykieta);
		display: block;
		margin-bottom: 2px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: var(--jl-tekst-jasny);
	}

	.jl-sek__tabela tbody td.jest-nasze {
		border-radius: 10px;
		margin: 2px 12px 0;
		padding: 12px 14px;
		box-shadow: inset 3px 0 0 #2E9E5B;
	}

	.jl-sek__tabela tbody td.jest-nasze::before {
		color: #2E9E5B;
	}
}

/* --- Mniej ruchu -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.jl-js-ruch .jl-sek__karta,
	.jl-js-ruch .jl-sek__krok,
	.jl-js-ruch .jl-sek__liczba {
		opacity: 1;
		transform: none;
	}

	.jl-sek *,
	.jl-sek *::before,
	.jl-sek *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* =========================================================================
 * TELEFON — ZACIESNIENIE ODSTEPOW
 *
 * 🔴 Zgloszenie wlasciciela 2026-08-29 (testuje wylacznie na telefonie):
 * „strasznie duze odstepy pomiedzy elementami, za duzo miejsca zajmuja".
 *
 * Zmierzony stan wyjsciowy przy 390 px: cala strona glowna miala
 * **10 155 px** wysokosci, czyli okolo trzynastu ekranow. Najwieksze bloki:
 * liczniki 893 px (cztery karty jedna pod druga), wyroznione oferty 1398 px,
 * „Co tu znajdziesz" 2285 px.
 *
 * ⚠️ Zmniejszamy ODSTEPY, nie tresc. Zadna sekcja nie znika i zaden tekst nie
 * jest skracany — na waskim ekranie po prostu nie ma miejsca na oddech
 * zaprojektowany dla monitora.
 *
 * ⚠️ Wszystko w jednym miejscu i tylko dla `max-width: 767px`. Widok na
 * komputerze zostaje nietkniety — wlasciciel nie mial jak go sprawdzic.
 * ====================================================================== */

@media (max-width: 767px) {

	/* Sekcje: 48/48 -> 34/34. */
	.jl-sek {
		padding: 34px 0;
	}

	.jl-sek__kontener {
		padding: 0 16px;
	}

	/* Naglowek sekcji — 40 px odstepu pod nim to na telefonie caly ekran mniej. */
	.jl-sek__glowa {
		margin-bottom: 22px;
	}

	.jl-sek__lead {
		font-size: 15px;
		line-height: 1.55;
	}

	/* Karty: ciasniej i blizej siebie. */
	.jl-sek__siatka {
		gap: 10px;
	}

	.jl-sek__karta {
		padding: 16px 16px 18px;
	}

	.jl-sek__ikona {
		width: 38px;
		height: 38px;
		margin-bottom: 10px;
		border-radius: 10px;
	}

	.jl-sek__karta h3 {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.jl-sek__karta p {
		font-size: 14px;
		line-height: 1.5;
	}

	/* Kroki. */
	.jl-sek__kroki {
		gap: 12px;
	}

	.jl-sek__krok {
		padding: 10px 12px;
	}

	.jl-sek__numer {
		width: 34px;
		height: 34px;
		font-size: 15px;
	}

	/* Pasek kontrastowy i CTA. */
	.jl-sek--pasek {
		padding: 28px 0;
	}

	.jl-sek--cta {
		padding: 34px 0;
	}

	/* Pigulki filtrow — ciasniej, zeby zmiescilo sie ich wiecej w wierszu. */
	.jl-sek__pigulki {
		gap: 6px;
	}

	.jl-sek__pigulka {
		padding: 6px 11px;
		font-size: 12px;
	}
}

/* =========================================================================
 * TELEFON — ELEMENTY SPOZA NASZEGO MODULU
 *
 * ⚠️ To sa widgety wtyczki i motywu. Ruszamy WYLACZNIE odstepy i rozmiary,
 * i wylacznie na stronie glownej (`body.home`) oraz na telefonie.
 * ====================================================================== */

@media (max-width: 767px) {

	/* Naglowki miedzy sekcjami („Praca w:", „Przegladaj po zawodach:")
	   mialy same marginesy wieksze niz wysokosc tekstu. */
	body.home .elementor-widget-heading {
		margin-bottom: 8px;
	}

	body.home .elementor-widget-heading .elementor-heading-title {
		line-height: 1.25;
	}

	/* ⚠️ Banerow kategorii NIE dopychamy wlasnym paddingiem. Pierwsza proba
	   ustawiala `padding: 10px 12px` i baner UROSL z 95 na 112 px, bo wlasny
	   padding byl mniejszy niz ten, ktory mial. Zmierzone, nie zgadniete.
	   Zostaje sama typografia — ona zmniejsza baner, nie powieksza. */
	body.home .widget-job-category-banner .title {
		font-size: 14px;
		line-height: 1.3;
	}

	/* Naglowki miedzysekcyjne („Praca w:", „Przegladaj po zawodach:") —
	   na telefonie zajmowaly po 126 px na jedna linijke tekstu. */
	body.home .elementor-element-3477537 .elementor-heading-title,
	body.home .elementor-element-b63cfde .elementor-heading-title {
		font-size: 17px;
	}

	body.home .elementor-element-b63cfde {
		padding-top: 4px;
		padding-bottom: 4px;
	}

	/* Liczniki: ikona 48 px nad kazda liczba to na telefonie polowa karty. */
	body.home .elementor-element-30270b5 .elementor-icon {
		font-size: 16px;
		padding: 8px;
	}

	body.home .elementor-element-30270b5 .elementor-widget-icon {
		margin-bottom: 4px;
	}

	/* Wyroznione oferty: naglowek i akapit blizej listy. */
	body.home .elementor-element-de0aa3f .elementor-widget-heading,
	body.home .elementor-element-de0aa3f .elementor-widget-text-editor {
		margin-bottom: 6px;
	}

	body.home .elementor-element-de0aa3f .elementor-widget-text-editor {
		font-size: 14px;
		line-height: 1.5;
	}

	/* Karta oferty w karuzeli — ciasniej.
	   ⚠️ Zaczep to `.widget-jobs`, NIE `.jobs-vertical-carousel`. Ta druga klasa
	   jest nazwa WIDGETU w Elementorze i nie pojawia sie w HTML-u — selektor
	   z nia nie pasowal do niczego, a wygladal poprawnie. Zmierzony lancuch
	   przodkow karty: .widget-jobs > .widget-content > .slick-carousel > ... */
	body.home .widget-jobs .job-list {
		padding: 14px;
	}
}

/* =========================================================================
 * WYROZNIONE OFERTY — BIALE KARTY ZAMIAST KOLOROWEGO TLA
 *
 * 🔴 Wlasciciel 2026-08-29: „te kolory sie nie zgadzaja, moze postawic na biale
 * tlo nowoczesne albo jakos to inaczej wyroznic".
 *
 * Zmierzone zrodlo: ustawienia motywu (styl `inline`) malowaly CALA karte —
 * `.job-list.is-urgent` na **#fdff8e** (jaskrawa zolc), `.job-list.is-featured`
 * na **#d6e4ff**. Przy dwoch ofertach obok siebie strona wygladala jak zestaw
 * naklejek, a tresc ginela w tle.
 *
 * Rozwiazanie: karta biala, a wyroznienie niesie **pasek z lewej krawedzi**.
 * Rozroznienie zostaje (zolty = pilne, niebieski = wyroznione), ale kolor
 * przestaje konkurowac z trescia oferty.
 *
 * 🔴 TYLKO NA STRONIE GLOWNEJ (`body.home`). Te same kolory dzialaja na liscie
 * ofert, gdzie wlasciciel ich NIE zglaszal — a zmiana globalna byla by cicha
 * regresja na stronie, ktorej nikt nie ogladal.
 * ====================================================================== */

/* ⚠️ Ramka NIEBIESKAWA, nie szara (uwaga wlasciciela 2026-08-29). Sekcja ma
   teraz biale tlo, wiec szara ramka na bialym znikala — karta wygladala jak
   plaski tekst. Blekit wiaze te oferty z kolorem marki i z pigulkami filtrow. */
body.home .widget-jobs .job-list.is-featured,
body.home .widget-jobs .job-list.is-urgent {
	position: relative;
	background: #fff;
	border: 1px solid #CFE0F5;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0, 51, 102, .05), 0 10px 28px rgba(0, 51, 102, .07);
	overflow: hidden;
}

body.home .widget-jobs .job-list.is-featured::before,
body.home .widget-jobs .job-list.is-urgent::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
}

/* Pilne — cieply akcent. Zolc zostaje, ale jako kreska, nie jako plama. */
body.home .widget-jobs .job-list.is-urgent::before {
	background: #f0b400;
}

/* Wyroznione — akcent w kolorze marki. */
body.home .widget-jobs .job-list.is-featured::before {
	background: #007BFF;
}

/* Oferta i pilna, i wyrozniona — dwa kolory w jednym pasku, zeby nie ukrywac
   jednej z cech tylko dlatego, ze druga jest w tej samej klasie. */
body.home .widget-jobs .job-list.is-featured.is-urgent::before {
	background: linear-gradient(180deg, #007BFF 0 50%, #f0b400 50% 100%);
}

body.home .widget-jobs .job-list {
	transition: transform .18s ease, box-shadow .18s ease;
}

body.home .widget-jobs .job-list:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(0, 51, 102, .07), 0 16px 40px rgba(0, 51, 102, .13);
}

/* --- Karta oferty na telefonie ------------------------------------------ */

/* Zmierzone przy 390 px: karta ma 392 px wysokosci przy 140 px na komputerze.
   Sklada sie na to tytul lamiacy sie na trzy linijki (94 px) i pionowa lista
   metadanych (172 px). Przy dwoch kartach w kadrze kandydat widzi jedna oferte
   na ekran — a mial „latwo przegladac".

   ⚠️ Nic nie usuwamy. Tytul dostaje limit dwoch linijek (reszta pod wielokropkiem,
   pelna nazwa zostaje w `title` i w linku), a metadane ciasniejszy odstep. */
@media (max-width: 767px) {

	body.home .widget-jobs .job-list .job-title {
		font-size: 16px;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	body.home .widget-jobs .job-list .job-list-content {
		padding-left: 12px;
	}

	body.home .widget-jobs .job-list .job-metas {
		font-size: 13px;
		line-height: 1.4;
	}

	body.home .widget-jobs .job-list .job-metas > * {
		margin-bottom: 2px;
	}

	body.home .widget-jobs .job-list .employer-logo,
	body.home .widget-jobs .job-list .employer-logo img {
		width: 40px;
		height: 40px;
	}
}

/* --- „Job-Linker w liczbach" — odstep pod tytulem ----------------------- */

/* Zmierzone: od dolu tytulu do kart bylo 40 px na komputerze i 28 px na
   telefonie, mimo ze margines WIDGETU ustawilem na 8/6 px. Reszte dawal
   wlasny `margin-bottom` akapitu `<p>` w srodku widgetu — a na to Elementor
   NIE MA kontrolki, wiec tu CSS jest wlasciwym miejscem, nie obejsciem.

   ⚠️ Wasko, na jeden widget. Globalne zerowanie marginesow naglowkow
   Elementora rozjechaloby odstepy na wszystkich stronach portalu. */
body.home .elementor-element-5f52427 .elementor-heading-title {
	margin: 0;
}

/* --- „Przegladaj po zawodach" — osiem kafelkow zawodow ------------------ */

/* 🔴 Zgloszenie wlasciciela 2026-08-29: „tam tez jest scroll na bok, zrob male
   ikonki, dwie kolumny".
   Zmierzone przy 390 px: kontener siatki mial `clientWidth` 293 px przy
   `scrollWidth` **426 px** — czyli kafelki wystawaly poza ekran i sekcja
   przewijala sie bokiem.

   ⚠️ Kontener Elementora MIAL juz poprawnie ustawione `grid_columns_grid_mobile`
   na 2. Mimo to wyliczone `grid-template-columns` wychodzilo **`205px 205px`** —
   kolumny nie liczyly sie od szerokosci kontenera, tylko od tresci kafelka.
   Dlatego tutaj CSS jest wlasciwym narzedziem, a nie obejsciem: nie ma
   kontrolki, ktora kazalaby kolumnom sie zwezac.

   `minmax(0, 1fr)` to sedno poprawki — samo `1fr` ma domyslnie `min-width: auto`,
   wiec element nadal nie schodzi ponizej szerokosci swojej tresci. */

@media (max-width: 767px) {

	body.home .elementor-element-e9c30ff {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px !important;
	}

	body.home .elementor-element-e9c30ff > * {
		min-width: 0;
	}

	/* Kafelek: ciasniej i mniejsza ikona — ma byc czytelny, nie okazaly. */
	body.home .widget-job-category-banner .category-banner-inner {
		padding: 10px 8px;
	}

	body.home .widget-job-category-banner .category-icon {
		font-size: 18px;
		line-height: 1;
		margin-bottom: 4px;
	}

	body.home .widget-job-category-banner .category-icon i {
		font-size: 18px;
	}

	/* 🔴 TYTUL MUSI MIEC PRAWO ZAWINAC SIE NA DWIE LINIJKI.
	   Motyw przycina go do jednej (`overflow: hidden` przy wysokosci jednego
	   wiersza) i przy 128 px kolumny **piec z osmiu nazw bylo uciete** —
	   „Malarz/Wykonczenia wnetrz", „Elektryk przemyslowy", „Praca na budowie",
	   „Prace magazynowe", „Praca na produkcji". Ucieta nazwa zawodu jest gorsza
	   niz przewijanie w bok, ktore naprawialismy: kandydat nie wie, w co klika.
	   Limit dwoch linijek trzyma wysokosc kafelka w ryzach. */
	body.home .widget-job-category-banner .title {
		font-size: 12.5px;
		line-height: 1.25;
		word-break: break-word;
		hyphens: auto;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		max-height: none;
		white-space: normal;
	}
}


/* --- Sekcja „Wyroznione oferty pracy" — odstepy na komputerze ------------ */

/* 🔴 Tlo tej sekcji bylo PRZEZROCZYSTE, a `<body>` ma niebieski
   `radial-gradient(#007BFF 25%, #003366 85%)`. Kazda sekcja bez wlasnego tla
   pokazuje wiec granat — ta sama przyczyna, co przy „Jak znalezc tu prace".
   Sekcja dostala biale tlo w ustawieniach Elementora.

   ⚠️ Odstepy: kazdy widget miał `margin-bottom: 20 px`, a naglowek dodatkowo
   swoj wlasny margines akapitu. Razem robilo to ponad 100 px samych przerw
   miedzy tytulem a oferami. Zmniejszone w ustawieniach widgetow; tutaj tylko
   to, na co Elementor nie ma kontrolki. */

body.home .elementor-element-de0aa3f .elementor-heading-title {
	margin: 0;
}

body.home .elementor-element-de0aa3f .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Karta oferty — delikatne podniesienie zamiast zmiany koloru. */
body.home .widget-jobs .job-list:hover {
	border-color: #A9C9EE;
}

/* --- Przycisk „Zobacz wiecej ofert pracy" ------------------------------- */

/* 🔴 Byl CZERWONY (#d9534f) — wlasciciel 2026-08-29: „ten przycisk tez nalezaloby
   inaczej wyroznic, nie takim kolorem".
   Zrodlo czerwieni: ustawienie widgetu `button_type: danger`, ktore doklada klase
   `elementor-button-danger`. Zmienione u zrodla na domyslne; tutaj sam wyglad.

   Obrys zamiast wypelnienia jest tu celowy: to jest przycisk DRUGORZEDNY.
   Glowna akcja strony glownej to wyszukiwarka i klikniecie w konkretna oferte —
   „zobacz wiecej" ma byc dostepne, a nie krzyczec glosniej od ofert. */
body.home .elementor-element-6e861b0 .elementor-button {
	background-color: transparent;
	color: #003366;
	border: 2px solid #C9D2DC;
	border-radius: 10px;
	font-weight: 600;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

body.home .elementor-element-6e861b0 .elementor-button:hover,
body.home .elementor-element-6e861b0 .elementor-button:focus-visible {
	background-color: #003366;
	border-color: #003366;
	color: #fff;
}

/* --- Karuzela ofert: WYCOFANE 2026-08-29 -------------------------------- */

/* 🔴 BYLO TU ZDJECIE `padding` i `height` ze `.slick-list`, zeby usunac 380 px
   pustki z „center mode". **WYCOFANE PO ZGLOSZENIU WLASCICIELA**: karuzela
   przestala dzialac — ofert nie dalo sie ani przewijac, ani kliknac.

   Dlaczego moj test tego nie wylapal: sprawdzilem, ze `transform` sie nie zmienia
   (czyli ze slick nie obraca) i uznalem to za dowod, ze zdjecie stalej wysokosci
   jest bezpieczne. To bylo pytanie o ZLA RZECZ. Slick przy `slick-vertical`
   pozycjonuje slajdy wzgledem wysokosci `.slick-list`; `height: auto` rozjezdza
   mu geometrie i obszar klikalny, nawet gdy nic sie nie obraca.

   ⚠️ Nie przywracaj tego bez sprawdzenia KLIKALNOSCI I PRZEWIJANIA na zywej
   stronie — sam pomiar wysokosci nie wystarczy. Pustke trzeba usunac inaczej:
   przez `centerMode` w inicjalizacji karuzeli (atrybuty `data-centermode`
   i `data-centerpadding` w szablonie motywu), a nie przez nadpisywanie tego,
   co slick wyliczyl. */

/* --- Gradient na brzegach karuzeli ofert -------------------------------- */

/* 🔴 TO BYL TEN „GRADIENT ZA WYROZNIONYMI OFERTAMI" (zgloszenie 2026-08-29).
   Nie tlo sekcji — sekcja jest biala. Maluja go DWA PSEUDOELEMENTY:
   `.slick-list::before` i `::after`, kazdy wysoki na 210 px, wypelniony
   `rgba(194, 228, 255, 0.9)`. Motyw wygasza nimi brzegi pionowej karuzeli.

   ⚠️ `elementFromPoint()` ICH NIE POKAZUJE — dlatego pierwsze szukanie zrodla
   koloru nic nie dalo i wygladalo, jakby tlo bylo poprawne. Pseudoelementy
   sprawdza sie przez `getComputedStyle(el, '::before')`.

   🟢 Usuniecie ich jest bezpieczne: to czysta dekoracja, `position: absolute`,
   bez wplywu na wysokosc listy, pozycje slajdow ani obszar klikalny —
   w odroznieniu od zdejmowania `padding`/`height`, ktore ZEPSULO karuzele
   i zostalo wycofane (patrz komentarz wyzej).

   ℹ️ Od 2026-08-29 na stronie glownej karuzeli JUZ NIE MA — zastapila ja zwykla
   lista (`layout_type: list`). Regula zostaje jako zabezpieczenie: gdyby ktos
   wrocil do karuzeli, gradient nie wroci razem z nia. */

body.home .widget-jobs .slick-list::before,
body.home .widget-jobs .slick-list::after {
	display: none;
}