/**
 * Pojedyncza oferta pracy - style sekcji.
 *
 * Typografia i kolory przeniesione z szablonu Elementora "oferta pracy" (ID 12003).
 */

/* =====================================================
   HERO
   ===================================================== */

.kariera-strefa .oferta-pracy-hero {
	position: relative;
	/* Pas nagłówka ma na produkcji 275 px wysokości przy paddingu 70 px. */
	min-height: 275px;
	display: flex;
	align-items: center;
	padding-block: 70px;
	background-color: var(--kariera-ciemny);
	background-size: cover;
	background-position: center;
	color: var(--kariera-bialy);
	text-align: center;
}

.kariera-strefa .oferta-pracy-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.kariera-strefa .oferta-pracy-hero__tresc {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.kariera-strefa .oferta-pracy-hero__tytul {
	font-family: var(--kariera-font-naglowek);
	font-style: normal;
	font-size: 31px !important;
	font-weight: 700;
	line-height: 31px;
	color: var(--kariera-bialy);
	margin: 0;
}

/* =====================================================
   ZDJĘCIE + OPIS
   ===================================================== */

/* Produkcja: dwie równe kolumny po 570 px w rzędzie 1140 px. */
.kariera-strefa .oferta-pracy-opis__uklad {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	padding-inline: 40px;
	align-items: start;
}

.kariera-strefa .oferta-pracy-opis__media,
.kariera-strefa .oferta-pracy-opis__tekst {
	padding-inline: 10px;
}

/* Produkcja renderuje zdjęcie w naturalnym rozmiarze (512x611), nie rozciąga go. */
.kariera-strefa .oferta-pracy-opis__obraz {
	width: auto;
	max-width: 100%;
	height: auto;
	display: block;
}

.kariera-strefa .oferta-pracy-opis__naglowek {
	font-family: var(--kariera-font-naglowek);
	font-style: normal;
	font-size: 25px !important;
	font-weight: 700;
	line-height: 25px;
	color: var(--kariera-tekst);
	margin: 0 0 20px;
}

/* Produkcja: Mulish 16 px z interlinią 24 px, margines 14,4 px pod każdym akapitem. */
.kariera-strefa .oferta-pracy-opis__tresc {
	font-size: 16px;
	line-height: 24px;
}

.kariera-strefa .oferta-pracy-opis__tresc p {
	margin: 0 0 14.4px;
}

/* Ścieżka kariery */

.kariera-strefa .oferta-pracy-sciezka__naglowek {
	font-family: var(--kariera-font-naglowek);
	font-style: normal;
	font-size: 18px !important;
	font-weight: 700;
	line-height: 18px;
	color: var(--kariera-tekst);
	/* Produkcja: 20 px do pierwszego akapitu opisu. */
	margin: 0 0 20px;
}

.kariera-strefa .oferta-pracy-sciezka {
	list-style: none;
	/* Produkcja: pierwszy złoty kwadrat 34 px pod marginesem ostatniego akapitu,
	   a pod ostatnim stopniem zostaje jeszcze 23 px do końca kolumny. */
	margin: 34px 0 23px;
	padding: 0;
	max-width: 550px;
}

.kariera-strefa .oferta-pracy-sciezka__stopien {
	display: flex;
	align-items: center;
	/* Produkcja: 20 px między kwadratem a nazwą stopnia. */
	gap: 20px;
}

/* Kreska w dół między kolejnymi stopniami awansu. Stoi w osi złotego kwadratu
   (44 px szerokości, więc 21 px + 2 px kreski daje środek na 22 px) i dokładnie
   w połowie 32-pikselowego odstępu - po 6 px wolnego nad i pod nią. */
.kariera-strefa .oferta-pracy-sciezka__stopien:not(:last-child)::after {
	content: '';
	position: absolute;
	top: calc(100% + 6px);
	left: 21px;
	margin: 0;
	width: 2px;
	height: 20px;
	background: var(--kariera-zloty);
	opacity: 0.6;
}

.kariera-strefa .oferta-pracy-sciezka__stopien:not(:last-child) {
	position: relative;
	margin-bottom: 30px;
}

.kariera-strefa .oferta-pracy-sciezka__numer {
	display: grid;
	place-items: center;
	flex: 0 0 44px;
	width: 44px;
	height: 35px;
	font-family: var(--kariera-font-naglowek);
	font-size: 24px;
	font-weight: 400;
	font-style: normal;
	line-height: 24px;
	/* Playfair domyślnie daje cyfry nautyczne: "1" ma 14 px wysokości, "2" 13 px z 1 px
	   zejściem, a "3" schodzi 4 px pod linię pisma - przy takich cyfrach każda stoi
	   w kwadracie inaczej. Cyfry linearne są równe: 17 px, bez zejścia. */
	font-variant-numeric: lining-nums;
	/* Grid centruje wiersz tekstu, a nie sam glif: linia pisma wypada poniżej środka
	   kwadratu, więc cyfra stoi za nisko. Dolny padding podnosi ją o połowę swojej
	   wartości; 0,1333em to dokładnie ta różnica dla Playfaira z cyframi linearnymi
	   (przy 24 px = 3,2 px). Ta sama stała siedzi w kariera.css na osi rekrutacji. */
	padding-bottom: 0.1333em;
	color: var(--kariera-bialy);
	background: var(--kariera-zloty);
	border-radius: 0;
}

.kariera-strefa .oferta-pracy-sciezka__nazwa {
	/* Zeruje margines odziedziczony po h2 - produkcja ma 0. */
	margin: 0;
	font-family: var(--kariera-font-naglowek);
	/* Jak wyżej: przebijamy h2 z Customizera. */
	font-size: 16px !important;
	font-weight: 400;
	font-style: normal;
	line-height: 16px;
	color: var(--kariera-tekst);
}

.kariera-strefa .oferta-pracy-sciezka__opis {
	font-size: 14px;
	color: #4a4a4a;
}


/* =====================================================
   ZAKŁADKI OFERTY
   ===================================================== */

.kariera-strefa .oferta-pracy-zakladki-sekcja {
	background: transparent;
}

/* Produkcja: zakładki 223/231/175 x 57 px, padding 15/35, odstęp 10 px, wyśrodkowane. */
.kariera-strefa .oferta-pracy-zakladki__paski {
	justify-content: center;
	border-bottom: 0;
	gap: 10px;
}

.kariera-strefa .oferta-pracy-zakladki__przycisk {
	padding: 15px 35px;
	/* Produkcja: Playfair Display 18/600 (mierzone na .e-n-tab-title-text). */
	font-size: 18px !important;
	font-weight: 600;
	line-height: 27px;
	border: 0;
	/* Produkcja: nieaktywna zakładka ma tło #F1F2F3 (nie białe) i tekst #072B31. */
	background: #f1f2f3;
	color: var(--kariera-ciemny);
}

.kariera-strefa .oferta-pracy-zakladki__przycisk.is-aktywny {
	background: var(--kariera-zloty);
	border-color: var(--kariera-zloty);
	color: var(--kariera-bialy);
}

.kariera-strefa .oferta-pracy-zakladki__tresc {
	/* Produkcja: panel 1120x649 px z paddingiem 10 px. */
	padding: 10px;
	font-size: 16px;
	line-height: 24px;
	/* Produkcja: treść zakładek dziedziczy globalny kolor tekstu Elementora #7A7A7A. */
	color: #7a7a7a;
	text-align: left;
}

/* =====================================================
   FORMULARZ
   ===================================================== */

.kariera-strefa .oferta-pracy-formularz .oferta-pracy-naglowek {
	font-size: 32px !important;
	/* Reguła bazowa wymusza line-height: 30px - produkcja ma 32 px. */
	line-height: 32px;
	/* Produkcja: nagłówek formularza jest kursywą. */
	font-style: italic;
}

/* Produkcja: w szarej sekcji (#F4F4F4) formularz siedzi w białym bloku 1120x402 px.
   Padding 20 px dokłada już sam skrót Elementora (na dwóch poziomach), więc tutaj
   go nie powtarzamy - zerujemy tylko margines dolny sekcji ze skrótu. */
.kariera-strefa .oferta-pracy-formularz__pole {
	max-width: none;
	margin-inline: auto;
	padding: 0;
	background: var(--kariera-bialy);
}

.kariera-strefa .oferta-pracy-formularz__pole .elementor-section:last-child {
	margin-bottom: 0;
}

/* =====================================================
   ZOBACZ TEŻ
   ===================================================== */

.kariera-strefa .oferta-pracy-zobacz .oferta-pracy-naglowek {
	font-size: 32px !important;
	line-height: 32px;
	/* Produkcja: nagłówek siedzi w bloku z paddingiem 10 px, kafel startuje 30 px niżej. */
	margin-bottom: 10px;
}

/* Kafle "Zobacz też" - geometria zmierzona na wellclinic.pl:
   kolumna 570x329 z paddingiem 20 px, w środku ramka 530x289 z obramowaniem
   1 px #E4E4E4 i paddingiem dolnym 10 px; obraz 528x193, nagłówek i odnośnik
   rozdzielone marginesami po 20 px. */

.kariera-strefa .oferta-pracy-zobacz__lista {
	list-style: none;
	margin: 0 -10px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
}

.kariera-strefa .oferta-pracy-zobacz__kafel {
	padding: 20px;
}

.kariera-strefa .oferta-pracy-zobacz__karta {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 0 0 10px;
	border: 1px solid var(--kariera-linia);
	text-align: center;
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.kariera-strefa .oferta-pracy-zobacz__obraz {
	width: 100%;
	aspect-ratio: 528 / 193;
	object-fit: cover;
	display: block;
	margin-bottom: 20px;
}

.kariera-strefa .oferta-pracy-zobacz__tytul {
	font-family: var(--kariera-font-naglowek);
	font-style: normal;
	/* Musi przebić regułę h2 z "Dodatkowego CSS" w Customizerze (26 px !important). */
	font-size: 20px !important;
	font-weight: 700;
	line-height: 20px;
	color: var(--kariera-tekst);
	margin: 0 0 20px;
}

.kariera-strefa .oferta-pracy-zobacz__cta {
	font-family: var(--kariera-font-naglowek);
	font-style: normal;
	font-size: 15px;
	font-weight: 700;
	/* Produkcja: sam odnośnik ma 72x20 px, a jego wiersz 24 px (kafel łącznie 289 px). */
	display: inline-block;
	width: 72px;
	text-align: center;
	line-height: 20px;
	margin: 2px 0;
	padding: 0;
	text-decoration: none;
	color: var(--kariera-zloty);
	background: transparent;
	border-radius: 0;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Produkcja: na hover "Zobacz" zmienia się w pełny złoty przycisk z białym tekstem. */
.kariera-strefa .oferta-pracy-zobacz__cta:hover {
	background: var(--kariera-zloty);
	color: var(--kariera-bialy);
}


/* =====================================================
   INNE OFERTY
   ===================================================== */

.kariera-strefa .oferta-pracy-inne .oferta-pracy-naglowek {
	font-size: 32px !important;
	line-height: 32px;
}

/* =====================================================
   RESPONSYWNOŚĆ
   ===================================================== */

@media (max-width: 1024px) {
	.kariera-strefa .oferta-pracy-opis__uklad {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	/* Produkcja: na telefonie hero ma 30 px paddingu, a nagłówek zostaje 31 px. */
	.kariera-strefa .oferta-pracy-hero {
		padding-block: 30px;
	}

	/* Produkcja: treść panelu ma na telefonie 335 px szerokości. */
	.kariera-strefa .oferta-pracy-zakladki__tresc {
		padding: 10px;
	}

	.kariera-strefa .oferta-pracy-zobacz__lista {
		grid-template-columns: 1fr;
	}

}


/* =====================================================
   PANEL ZAKŁADEK - marginesy jak na produkcji
   ===================================================== */

.kariera-strefa .oferta-pracy-zakladki__tresc p {
	margin: 0 0 14.4px;
}

.kariera-strefa .oferta-pracy-zakladki__tresc ul,
.kariera-strefa .oferta-pracy-zakladki__tresc ol {
	margin: 0;
	padding-left: 40px;
}

.kariera-strefa .oferta-pracy-zakladki__tresc li {
	margin-bottom: 0;
	/* Produkcja renderuje pozycje list w Roboto 16/24 - stąd inne łamanie wierszy. */
	font-family: var(--kariera-font-lista);
}

/* Ścieżka kariery: stopnie co 67 px, jak na produkcji. */
.kariera-strefa .oferta-pracy-sciezka__stopien:not(:last-child) {
	/* Produkcja: kwadraty co 67 px (35 wysokości + 32 odstępu). */
	margin-bottom: 32px;
}


/* =====================================================
   ODSTĘPY SEKCJI
   Produkcja: hero 70/70, pozostałe bez paddingu, rozdzielone marginesami
   30 / 48 / 0 / 25 px. Wartości zmierzone na wellclinic.pl.
   ===================================================== */

.kariera-strefa .oferta-pracy-opis {
	/* Produkcja: pierwszy nagłówek zaczyna się 10 px od górnej krawędzi sekcji. */
	padding-block: 10px 0;
	margin-top: 30px;
}

.kariera-strefa .oferta-pracy-zakladki-sekcja {
	/* Produkcja: pasek zakładek startuje na 1172 px, sekcja kończy się na 1922 px. */
	padding-block: 0 10px;
	margin-top: 45px;
}

/* Produkcja: między paskiem a treścią panelu jest 20 px (10 marginesu + 10 paddingu). */
.kariera-strefa .oferta-pracy-zakladki__paski {
	margin-bottom: 10px;
}

/* Produkcja: szara sekcja na pełną szerokość, nagłówek 40 px od góry,
   biały blok 52 px pod nim, 50 px na dole. */
.kariera-strefa .oferta-pracy-formularz {
	padding-block: 40px 50px;
	margin-top: 0;
	background: var(--kariera-tlo-jasne);
}

.kariera-strefa .oferta-pracy-formularz .oferta-pracy-naglowek {
	/* 50 px + 2 px, które doszły z interlinii 32 px = biały blok zostaje na y2044. */
	margin-bottom: 50px;
}

.kariera-strefa .oferta-pracy-zobacz {
	/* Produkcja: 25 px od szarej sekcji, 10 px nad nagłówkiem, 50 px do stopki. */
	padding-block: 10px 50px;
	margin-top: 25px;
}

/* Produkcja: pola select i przycisk formularza mają 16 px (Elementor ustawia 14 px). */
.kariera-strefa .oferta-pracy-formularz__pole select,
.kariera-strefa .oferta-pracy-formularz__pole option {
	font-size: 16px;
	line-height: 24px;
}

.kariera-strefa .oferta-pracy-formularz__pole .elementor-button-text {
	font-weight: 400;
}

/* =====================================================
   TELEFON - na końcu pliku, żeby nadpisać tabelę odstępów powyżej
   ===================================================== */

@media (max-width: 767px) {
	/* Produkcja: hero oferty ma na telefonie 195 px wysokości. */
	.kariera-strefa .oferta-pracy-hero {
		min-height: 195px;
		padding-block: 30px;
	}

	/* Produkcja: sekcja styka się z hero (margin_mobile.top = 0), a obie kolumny mają po 20 px
	   paddingu - stąd 20 px nad zdjęciem, 40 px między zdjęciem a nagłówkiem i 20 px pod treścią.
	   Kontener dokłada 10 px, druga dziesiątka jest na .oferta-pracy-opis__media / __tekst. */
	.kariera-strefa .oferta-pracy-opis__uklad {
		padding-inline: 10px;
		row-gap: 40px;
	}

	.kariera-strefa .oferta-pracy-opis {
		margin-top: 0;
		padding-block: 20px;
	}

	.kariera-strefa .oferta-pracy-zakladki-sekcja {
		margin-top: 48px;
		padding-block: 0;
	}

	/* Produkcja: nagłówek "Aplikuj do nas" jest 8 px pod ostatnią pozycją akordeonu. */
	.kariera-strefa .oferta-pracy-formularz {
		padding-block: 8px 50px;
	}

	/* Akordeon: panel siedzi pod swoim nagłówkiem, oba na pełną szerokość. */
	.kariera-strefa .oferta-pracy-zakladki--akordeon .oferta-pracy-zakladki__paski {
		flex-direction: column;
		/* Produkcja: zwinięte pozycje akordeonu co 67 px (54 + 13). */
		gap: 13px;
		margin-bottom: 0;
	}

	.kariera-strefa .oferta-pracy-zakladki--akordeon .oferta-pracy-zakladki__panel {
		width: 100%;
	}
}