/* Pas "Pilne oferty" - 05-redesign-pilne-transport.md, Blok A.
 * Natywny przewijany pas (overflow-x + scroll-snap), bez biblioteki karuzeli.
 * Tokeny: Job Linker Navy (novamira/get-active-design). */

.jl-pilne {
	margin: 16px 0;
}

.jl-pilne__glowa {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.jl-pilne__tytul {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: #003366;
}

.jl-pilne__kropka {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #D32F2F;
	display: inline-block;
	flex-shrink: 0;
}

.jl-pilne__licznik {
	font-family: "Roboto", sans-serif;
	font-size: 13px;
	color: #5B6470;
}

.jl-pilne__pas {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 12px;
	scrollbar-width: thin;
	list-style: none;
	margin: 0;
	padding: 0 0 4px 0;
	-webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
	mask-image: linear-gradient(90deg, #000 90%, transparent);
}

.jl-pilne__karta {
	scroll-snap-align: start;
	flex: 0 0 260px;
	/* Bez tego dlugi, niezawijalny tytul (white-space:nowrap w .jl-pilne__stanowisko)
	 * podnosil min-content flex-itemu ponad flex-basis - karta byla szersza niz 260px
	 * i w pasie miescila sie tylko jedna. Zdjete po zmianie tytulu na zawijany 2 linie. */
	min-width: 0;
}

.jl-pilne__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	min-height: 118px;
	min-width: 0;
	padding: 12px 14px;
	background: #FFF277;
	border: 1px solid #DDE3EB;
	border-left: 4px solid #D32F2F;
	border-radius: 8px;
	text-decoration: none;
	box-shadow: none;
}

.jl-pilne__link:hover,
.jl-pilne__link:focus-visible {
	border-color: #007BFF;
	border-left-color: #D32F2F;
	background: #FFF9B8;
}

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

.jl-pilne__badge {
	align-self: flex-start;
	background: #D32F2F;
	color: #fff;
	font-family: "Roboto", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: 5px;
	padding: 2px 7px;
}

.jl-pilne__stanowisko {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.25;
	color: #202124;
	/* Zawijanie do 2 linii zamiast obcinania w jednej - dlugie tytuly (np. z myslnikiem
	 * i wersalikami) dostaja druga linie zamiast psuc szerokosc karty. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.jl-pilne__miejsce {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-size: 13px;
	color: #5B6470;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.jl-pilne__stawka {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #003366;
}

@media (max-width: 767px) {
	.jl-pilne__karta {
		flex: 0 0 78vw;
		max-width: 300px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jl-pilne__pas {
		scroll-behavior: auto;
	}
}