/* Job-Linker — nowa karta oferty.
 * Faza 2, zadanie 2.6. Utworzone 2026-08-16.
 *
 * System „Job Linker Navy": granat #003366, akcja #007BFF, hairline #DDE3EB,
 * żółty #FFF277 jako dziedziczone tło kart ofert, promień 8px.
 *
 * Kolejność informacji ustawia SZABLON (template-jobs/jobs-styles/inner-grid-v3.php),
 * nie ten plik — kolejność wizualna ma być identyczna z kolejnością w kodzie,
 * żeby czytnik ekranu i klawisz Tab widziały to samo, co oko.
 * Tutaj wyłącznie waga wizualna.
 */

/* === STAWKA — najważniejsza liczba na karcie === */

.jl-card__salary {
	margin: 2px 0 10px;
}

/* Motyw renderuje stawkę jako `.job-salary` z ikoną. Podnosimy jej wagę:
 * z drobnego wiersza w środku karty na pierwszą rzecz po tytule. */
.jl-card__salary .job-salary {
	font-size: 17px;
	font-weight: 700;
	color: #003366;
	font-family: Poppins, sans-serif;
	line-height: 1.3;
}

.jl-card__salary .price-text {
	font-size: 19px;
}

.jl-card__salary .suffix,
.jl-card__salary i {
	font-weight: 400;
	color: #5B6470;
}

/* Oferta bez podanej stawki nie może zostawiać pustej dziury pod tytułem. */
.jl-card__salary:empty {
	display: none;
	margin: 0;
}

/* === TAGI === */

.jl-card__tags {
	margin: 0 0 12px;
}

.jl-card__tags .job-type.with-icon > i {
	display: none; /* ikona zegara przy tagach nic nie wnosi, a zabiera miejsce */
}

/* Na karcie listy (`job-list`) stawka stoi w kolumnie treści, a nie na całej
 * szerokości karty — trzeba jej zdjąć odstęp, który ma w układzie siatki. */
.job-list .jl-card__salary {
	margin: 6px 0 8px;
}

/* Motyw domyślnie chowa etykietę „od / do" przy stawce w układzie listy.
 * Skoro stawka jest teraz głównym elementem, przywracamy pełny zapis. */
.job-list .jl-card__salary .job-salary {
	display: block;
}

/* === ZAUFANIE (pracodawca + odznaki z 2.5 + CTA) === */

.jl-card__trust {
	padding-top: 12px;
	border-top: 1px solid #DDE3EB;
	margin-top: 4px;
}

/* === LOKALIZACJA I WIEK === */

.jl-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #DDE3EB;
	font-size: 13px;
	color: #5B6470;
}

/* === ETYKIETY WIEKU === */

.jl-jc-age {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 5px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	cursor: help;
}

/* „Nowa" dostaje kolor akcji — to jedyna etykieta, która ma przyciągać. */
.jl-jc-age--nowa {
	background: #007BFF;
	color: #FFFFFF;
}

/* „Dodano [data]" jest neutralna: informuje, nie ostrzega. */
.jl-jc-age--starsza {
	background: #F2F5F9;
	color: #5B6470;
	border: 1px solid #DDE3EB;
}

/* „Starsza oferta" ostrzega, ale NIE straszy — czerwień #D32F2F jest
 * zarezerwowana dla pilnych rekrutacji i błędów. Tu wystarczy granat
 * na jasnym tle: kandydat ma sprawdzić, a nie uciec. */
.jl-jc-age--archiwalna {
	background: #FFF277;
	color: #202124; /* `ink` z palety — na żółtym daje pełny kontrast */
}

/* "Aplikacja przez WhatsApp" - plakietka zamiast taga (2026-09-06, na życzenie
 * właściciela: tag gubił się wśród pigułek "Praca za granicą"/"Z zakwaterowaniem").
 * Jedyne świadome odstępstwo od granatowo-niebieskiej palety portalu -
 * zielony to rozpoznawalny kolor marki WhatsApp, nie dekoracja. */
.jl-jc-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 5px;
	background: #25D366;
	color: #FFFFFF;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	cursor: help;
}

.jl-jc-whatsapp__ikona {
	width: 11px;
	height: 11px;
	flex: 0 0 auto;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Cała karta starszej oferty siada wizualnie o poziom niżej — bez ukrywania.
 * Oferty zostają widoczne i na mapie (zasada nr 6), tylko przestają
 * konkurować uwagą ze świeżymi. */
.jl-card--stara .job-title a {
	color: #5B6470;
}

.jl-card--stara:hover .job-title a {
	color: #003366;
}

/* === TELEFON === */

@media (max-width: 575px) {
	.jl-card__salary .job-salary {
		font-size: 16px;
	}

	.jl-card__salary .price-text {
		font-size: 18px;
	}

	/* Przycisk aplikacji na pełną szerokość — kciukiem trafia się w krawędź
	 * ekranu łatwiej niż w mały prostokąt w rogu karty. */
	.jl-card__trust {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.jl-card__trust .ali-right {
		text-align: center;
	}

	.jl-card__trust .ali-right .btn {
		display: block;
		width: 100%;
	}

	.jl-card__meta {
		font-size: 12.5px;
	}
}