/**
 * Strona Kariera - style sekcji.
 *
 * Wartości typografii i kolorów przeniesione z ustawień widgetów Elementora
 * (szablon strony ID 11788).
 */

/* =====================================================
   SEKCJA 1: HERO
   ===================================================== */

.kariera-strefa .kariera-hero {
	position: relative;
	/* Produkcja: sekcja ma 356 px, a pierwszy element startuje 80 px od góry. */
	padding-block: 80px;
	background-color: var(--kariera-ciemny);
	background-size: cover;
	background-position: center;
	color: var(--kariera-bialy);
	text-align: center;
}

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

.kariera-strefa .kariera-hero__tresc {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

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

.kariera-strefa .kariera-hero__lead {
	/* Produkcja: akapit jest ograniczony do 820 px, nie do pełnego kontenera. */
	max-width: 820px;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--kariera-bialy);
	margin: 0;
}

/* =====================================================
   SEKCJA 2: MENTAL WINNING
   ===================================================== */

.kariera-strefa .kariera-mental__video {
	/* Produkcja: widget ma marginesy 400 px z obu stron i nie ma max-width -
	   szerokość to zawsze szerokość kontenera minus 800 px (przy 1920 px: 1085x610). */
	max-width: none;
	margin-inline: 400px;
	margin-bottom: 20px;
}

/* =====================================================
   SEKCJA 4: LICZBY
   ===================================================== */

.kariera-strefa .kariera-liczby .kariera-naglowek {
	font-weight: 600;
}

.kariera-strefa .kariera-liczby__cytat {
	font-size: 20px;
	/* Produkcja: cytat jest pogrubiony (<strong> 20/30 w700). */
	font-weight: 700;
	font-style: normal;
	line-height: 30px;
	color: var(--kariera-ciemny);
	text-align: center;
	margin: 0 0 40px;
}

.kariera-strefa .kariera-liczby__lista {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Produkcja: kolumny po 380 px w rzędzie 1140 px, bez odstępu między nimi. */
	gap: 0;
	list-style: none;
	margin: 0 -10px;
	padding: 0;
}

.kariera-strefa .kariera-liczby__pozycja {
	padding-inline: 10px;
}

.kariera-strefa .kariera-liczby__pozycja {
	text-align: center;
}

.kariera-strefa .kariera-liczby__wartosc {
	display: block;
	font-family: var(--kariera-font-liczba);
	font-size: 69px;
	font-weight: 700;
	line-height: 1;
	color: var(--kariera-zloty);
}

.kariera-strefa .kariera-liczby__opis {
	display: block;
	font-size: 19px;
	font-weight: 500;
	line-height: 47.5px;
	color: var(--kariera-ciemny);
	margin-top: 0;
}

/* =====================================================
   SEKCJA: HISTORIE SUKCESU
   ===================================================== */

.kariera-strefa .kariera-historie__uklad {
	display: grid;
	/* Produkcja: kolumna listy to 33% szerokości widgetu, nie stała wartość -
	   przy 1920 px daje 523 px, przy 1745 px już 466 px. */
	grid-template-columns: 33% minmax(0, 1fr);
	gap: 0;
	align-items: start;
}

/* Produkcja nie ma krawędzi nad listą - jest dopiero pod nagłówkiem listy. */
.kariera-strefa .kariera-historie__panel {
	border-top: 0;
}

/* Produkcja: wiersz nagłówka listy ma 56 px i dolną krawędź 1 px #D5D8DC,
   a tekst jest w nim wyśrodkowany pionowo. */
.kariera-strefa .kariera-historie__naglowek-listy {
	display: flex;
	align-items: center;
	height: 56px;
	font-family: var(--kariera-font-naglowek);
	font-size: 16px;
	font-weight: 700;
	font-style: normal;
	line-height: 19.2px;
	color: var(--kariera-tekst);
	margin: 0;
	padding: 0 16px;
	border-bottom: 1px solid #d5d8dc;
}

/* Produkcja: obszar odtwarzacza (.e-tabs-main-area) ma stałą wysokość 462 px.
   Szerokość skaluje się z sekcją, proporcja nie jest utrzymywana. */
.kariera-strefa .kariera-historie__odtwarzacz {
	background: #000;
}

.kariera-strefa .kariera-historie__odtwarzacz .kariera-video,
.kariera-strefa .kariera-historie__odtwarzacz .kariera-video__ramka {
	aspect-ratio: auto;
	height: 462px;
}

.kariera-strefa .kariera-historie__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kariera-strefa .kariera-historie__pozycja {
	display: flex;
	align-items: center;
	/* Produkcja: ikona 16 px + 8 px marginesu, tekst startuje 40 px od krawędzi kolumny. */
	gap: 8px;
	width: 100%;
	height: 56px;
	padding: 0 16px;
	text-align: left;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--kariera-tekst);
	/* Motyw daje każdemu <button> 3 px zaokrąglenia - produkcja ma wiersz listy na <div>, bez niego. */
	border-radius: 0;
	cursor: pointer;
	transition: color 0.2s ease;
}

/* Produkcja: ikona odtwarzania jest złota (#CBA052), a ciemnieje dopiero
   na pozycji aktywnej i pod kursorem. */
.kariera-strefa .kariera-historie__ikona {
	flex: 0 0 16px;
	display: grid;
	place-items: center;
	color: var(--kariera-zloty);
	transition: color 0.2s ease;
}

.kariera-strefa .kariera-historie__podpis {
	/* Produkcja: Roboto 16/24 w400. */
	font-family: var(--kariera-font-lista);
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	line-height: 24px;
	color: var(--kariera-ciemny);
}

/* Produkcja: hover pozycji playlisty daje tło #F1F2F3 i złoty tekst. */
.kariera-strefa .kariera-historie__pozycja:hover {
	background: #f1f2f3;
}

.kariera-strefa .kariera-historie__pozycja:hover .kariera-historie__podpis,
.kariera-strefa .kariera-historie__pozycja.is-aktywny .kariera-historie__podpis {
	color: var(--kariera-zloty);
}

.kariera-strefa .kariera-historie__pozycja:hover .kariera-historie__ikona,
.kariera-strefa .kariera-historie__pozycja.is-aktywny .kariera-historie__ikona {
	color: var(--kariera-ciemny);
}

/* Produkcja wyróżnia aktywną pozycję tłem #F1F2F3. */
.kariera-strefa .kariera-historie__pozycja.is-aktywny {
	background: #f1f2f3;
}

.kariera-strefa .kariera-historie__cta {
	text-align: center;
	margin-top: 40px;
}

/* =====================================================
   SEKCJA: GALERIA
   ===================================================== */

.kariera-strefa .kariera-galeria__obraz {
	width: 100%;
	/* Produkcja: slajd 303x276 px - proporcja stała, wysokość skaluje się z szerokością. */
	aspect-ratio: 303 / 276;
	height: auto;
	/* Produkcja rozciąga kadr (object-fit: fill) - odwzorowane 1:1. */
	object-fit: fill;
	display: block;
	/* Produkcja: 3 px białej ramki. */
	border: 3px solid var(--kariera-bialy);
}

/* =====================================================
   SEKCJA 5: CECHY
   ===================================================== */

.kariera-strefa .kariera-cechy__lista {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Produkcja: kolumny po 380 px w rzędzie 1140 px, bez odstępu. */
	gap: 0;
	list-style: none;
	margin: 0 -10px;
	padding: 0;
}

.kariera-strefa .kariera-cechy__pozycja {
	padding-inline: 10px;
	text-align: center;
}

.kariera-strefa .kariera-cechy__ikona img {
	/* Produkcja: ikona 108x108 px. */
	width: 108px;
	height: auto;
	margin-inline: auto;
	display: block;
}

.kariera-strefa .kariera-cechy__tytul {
	font-family: var(--kariera-font-naglowek);
	font-size: 16px !important;
	font-weight: 700;
	font-style: normal;
	line-height: 19.2px;
	color: var(--kariera-tekst);
	/* Produkcja: 8 px nad tytułem, 16 px pod nim. */
	margin: 8px 0 16px;
}

.kariera-strefa .kariera-cechy__opis {
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--kariera-tekst);
	margin: 0;
}

/* =====================================================
   SEKCJA 6: OFERTY PRACY
   ===================================================== */

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

/* Produkcja: 60 px od nagłówka do górnej krawędzi kafli w obu sekcjach ofert
   */
.kariera-strefa .kariera-druzyna .kariera-naglowek,
.kariera-strefa .kariera-oferty .kariera-naglowek {
	margin-bottom: 60px;
}

/* Produkcja: na stronie Kariera odnośnik „Zobacz →” ma interlinię 24 px
   (na stronie oferty ten sam kafelek ma 22,5 px - stąd zawężenie do .kariera). */
.kariera .kariera-oferta-kafelek__cta {
	line-height: 24px;
}

.kariera-strefa .kariera-oferty__brak {
	text-align: center;
	font-size: 18px;
	color: var(--kariera-ciemny);
}

/* =====================================================
   SEKCJA 7 + 8: 10 ZASAD
   ===================================================== */

.kariera-strefa .kariera-zasady__media {
	/* Produkcja: 50 px od zdjęcia do nagłówka "Poznaj 10 zasad". */
	margin-bottom: 50px;
}

.kariera-strefa .kariera-zasady__obraz {
	width: 100%;
	max-width: 876px;
	height: auto;
	margin-inline: auto;
	display: block;
}

.kariera-strefa .kariera-zasady__tresc {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.kariera-strefa .kariera-zasady__opis {
	/* Produkcja: opis zajmuje pełne 1120 px i mieści się w jednej linii. */
	max-width: none;
	/* Produkcja: 16/24 px, margines 14,4 px pod KAŻDYM akapitem (także ostatnim). */
	font-size: 16px;
	line-height: 24px;
}

.kariera-strefa .kariera-zasady__opis p {
	margin: 0 0 14.4px;
}

/* Produkcja przyciemnia na hover tylko ten jeden przycisk (#CBA052 -> #AC8133);
   "Zobacz aktualne oferty" w hero i pod playlistą zostają bez zmian. */
.kariera-strefa .kariera-zasady .kariera-przycisk--zloty:hover {
	background-color: var(--kariera-zloty-hover);
}

.kariera-strefa .kariera-zasady .kariera-przycisk {
	font-size: 22px;
	/* Produkcja: ten przycisk jest prosty (bez kursywy) i ma promień 5 px. */
	font-style: normal;
	border-radius: 5px;
}

/* =====================================================
   SEKCJA 9: TO MUSISZ WIEDZIEĆ
   ===================================================== */

/* Szare tło mają sekcje z ofertami, a nie "To musisz wiedzieć". */
.kariera-strefa .kariera-druzyna,
.kariera-strefa .kariera-oferty {
	background: var(--kariera-tlo-jasne);
	padding-bottom: 30px;
}

/* Proces rekrutacji - oś czasu odwzorowana z układu produkcyjnego.
   Pozycje etapów i numerów podane w procentach szerokości osi, dzięki czemu
   układ skaluje się razem z kontenerem. Sama oś ze złotymi kołami to ta sama
   grafika `line-arrow.png`, której używa produkcja. */

.kariera-strefa .kariera-proces {
	position: relative;
}

.kariera-strefa .kariera-proces__rzad {
	position: relative;
}

.kariera-strefa .kariera-proces__rzad--nad {
	min-height: 133px;
}

.kariera-strefa .kariera-proces__rzad--pod {
	/* Etapy są pozycjonowane absolutnie, więc wysokość rzędu daje wyłącznie min-height.
	   Produkcja: dolny rząd kończy się 139 px pod ikonami. */
	min-height: 139px;
	margin-top: 33px;
}

.kariera-strefa .kariera-proces__etap {
	position: absolute;
	top: 0;
	display: flex;
	align-items: flex-start;
	/* Produkcja: 26 px między ikoną a tekstem, tekst zaczyna się 8 px poniżej ikony. */
	gap: 26px;
	text-align: left;
}

.kariera-strefa .kariera-proces__tresc {
	padding-top: 8px;
}

.kariera-strefa .kariera-proces__ikona {
	flex: 0 0 auto;
}

.kariera-strefa .kariera-proces__ikona img {
	display: block;
	width: 60px;
	height: auto;
	/* Ikony to SVG bez atrybutów width/height - bez proporcji miałyby 0 px wysokości
	   do czasu wczytania (produkcja renderuje je jako kwadraty). */
	aspect-ratio: 1 / 1;
}

.kariera-strefa .kariera-proces__tresc {
	flex: 1 1 auto;
}

.kariera-strefa .kariera-proces__tytul {
	font-family: var(--kariera-font-naglowek);
	font-size: 20px !important;
	font-weight: 400;
	font-style: normal;
	line-height: 24px;
	color: var(--kariera-tekst);
	margin: 0 0 16px;
}

.kariera-strefa .kariera-proces__opis {
	font-size: 15px;
	line-height: 22.5px;
	color: var(--kariera-tekst);
	margin: 0;
}

/* Oś ze złotymi kołami i strzałką. */
.kariera-strefa .kariera-proces__os {
	position: relative;
	height: 76px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100%;
}

/* Złote koło z numerem - na produkcji jest to tło widgetu 52x56 z promieniem 28px,
   a nie element grafiki osi. */
.kariera-strefa .kariera-proces__numer {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 56px;
	background: var(--kariera-zloty);
	border-radius: 28px;
	font-family: var(--kariera-font-naglowek);
	font-size: 40px;
	font-weight: 400;
	font-style: normal;
	line-height: 40px;
	/* Playfair domyślnie daje cyfry nautyczne, a te mają różne wysokości i zejścia:
	   "6" stoi 4,67 px za wysoko, "3" i "4" 1,83 px za nisko. Cyfry linearne są równe. */
	font-variant-numeric: lining-nums;
	/* Wyśrodkowany zostaje wiersz tekstu, nie glif - linia pisma wypada o (asc-desc)/2
	   poniżej środka. Dolny padding podnosi cyfrę o połowę swojej wartości; 0,1333em
	   to dokładnie ta różnica dla Playfaira z cyframi linearnymi. */
	padding-bottom: 0.1333em;
	color: var(--kariera-bialy);
}

/* Na desktopie numery są w osi, więc kopia w etapie (potrzebna na telefonie) jest zbędna. */
.kariera-strefa .kariera-proces__numer--etap {
	display: none;
}

/* Pionowe łączniki między osią a etapami. */
.kariera-strefa .kariera-proces__lodyga {
	position: absolute;
	width: 5px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.kariera-strefa .kariera-proces__lodyga--nad {
	top: -60px;
	height: 70px;
	background-image: url('../../../uploads/2022/07/line-up.png');
}

.kariera-strefa .kariera-proces__lodyga--pod {
	top: 48px;
	height: 36px;
	background-image: url('../../../uploads/2022/07/line-down.png');
}

/* Porady */

.kariera-strefa .kariera-porady {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.kariera-strefa .kariera-porady__pozycja {
	background: var(--kariera-bialy);
	border: 1px solid var(--kariera-linia);
	padding: 24px;
}

.kariera-strefa .kariera-porady__tytul {
	font-family: var(--kariera-font-naglowek);
	font-style: normal;
	font-size: 18px !important;
	font-weight: 700;
	line-height: 23.4px;
	color: var(--kariera-tekst);
	margin: 0 0 12px;
}

/* Produkcja: odnośnik w poradzie jest złoty, pogrubiony i bez podkreślenia. */
.kariera-strefa .kariera-porady__opis a {
	color: var(--kariera-zloty);
	text-decoration: none;
}

.kariera-strefa .kariera-porady__opis {
	/* Produkcja: 16/24 px. */
	font-size: 16px;
	line-height: 24px;
	margin: 0;
}

/* FAQ */

.kariera-strefa .kariera-faq {
	max-width: 900px;
	margin-inline: auto;
}

.kariera-strefa .kariera-faq__pozycja {
	background: var(--kariera-bialy);
	border: 1px solid var(--kariera-linia);
	margin-bottom: 12px;
}

.kariera-strefa .kariera-faq__pytanie {
	font-family: var(--kariera-font-naglowek);
	font-style: normal;
	font-size: 18px;
	font-weight: 700;
	line-height: 18px;
	color: var(--kariera-tekst);
	padding: 18px 24px;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 56px;
}

.kariera-strefa .kariera-faq__pytanie::-webkit-details-marker {
	display: none;
}

.kariera-strefa .kariera-faq__pytanie::after {
	content: '+';
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	color: var(--kariera-zloty);
	line-height: 1;
}

.kariera-strefa .kariera-faq__pozycja[open] .kariera-faq__pytanie::after {
	content: '\2013';
}

.kariera-strefa .kariera-faq__odpowiedz {
	padding: 0 24px 20px;
	font-size: 16px;
	line-height: 24px;
	color: var(--kariera-tekst);
}

.kariera-strefa .kariera-faq__odpowiedz p {
	margin: 0 0 1em;
}

.kariera-strefa .kariera-faq__odpowiedz p:last-child {
	margin-bottom: 0;
}

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

@media (max-width: 1024px) {
	.kariera-strefa .kariera-porady {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Poniżej desktopu oś czasu nie mieści się - etapy układają się w kolumnie. */
	.kariera-strefa .kariera-proces__os {
		display: none;
	}

	.kariera-strefa .kariera-proces__rzad,
	.kariera-strefa .kariera-proces__rzad--nad,
	.kariera-strefa .kariera-proces__rzad--pod {
		min-height: 0;
		margin-top: 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}

	.kariera-strefa .kariera-proces__rzad--pod {
		margin-top: 32px;
	}

	.kariera-strefa .kariera-proces__etap {
		position: static;
		left: auto !important;
		width: auto !important;
	}
}

@media (max-width: 767px) {
	/* Produkcja: hero ma 30 px paddingu, a elementy dzieli 120 px. Rozmiary pisma
	   zostają desktopowe (nagłówek 40 px, lead 16/24). */
	.kariera-strefa .kariera-hero {
		padding-block: 40px;
	}

	.kariera-strefa .kariera-hero__tresc {
		gap: 120px;
	}

	.kariera-strefa .kariera-hero__lead {
		max-width: 315px;
	}

	.kariera-strefa .kariera-liczby__lista,
	.kariera-strefa .kariera-cechy__lista,
	.kariera-strefa .kariera-porady {
		grid-template-columns: 1fr;
	}

	/* Produkcja: na telefonie sekcja ma padding 30 px, a kolumna 10 px - razem 40 px z boku. */
	.kariera-strefa .kariera-mental .kariera-kontener--pelny {
		padding-inline: 40px;
	}

	.kariera-strefa .kariera-mental__video {
		margin-inline: 0;
		margin-bottom: 0;
	}

	/* Produkcja (390 px): playlista dalej ma 462 px wysokości, ale .e-tabs-main-area
	   przechodzi w flex-direction: column-reverse - odtwarzacz (38 % = 175,56 px)
	   jest nad listą (62 % = 286,44 px), a nagłówek listy schodzi z 56 na 48 px. */
	.kariera-strefa .kariera-historie__uklad {
		grid-template-columns: 1fr;
		grid-template-rows: 38% 62%;
		align-items: stretch;
		height: 462px;
	}

	.kariera-strefa .kariera-historie__odtwarzacz {
		order: -1;
	}

	.kariera-strefa .kariera-historie__odtwarzacz .kariera-video,
	.kariera-strefa .kariera-historie__odtwarzacz .kariera-video__ramka {
		height: 100%;
	}

	.kariera-strefa .kariera-historie__panel {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.kariera-strefa .kariera-historie__naglowek-listy {
		height: 48px;
	}

	.kariera-strefa .kariera-historie__lista {
		flex: 1;
		overflow: auto;
	}
}


/* =====================================================
   ODSTĘPY PIONOWE
   Produkcja ustawia je ręcznie per sekcja (od 35 do 277 px), bez wspólnej skali.
   Wartości poniżej odtwarzają zmierzony rytm strony wellclinic.pl/kariera.
   ===================================================== */

.kariera-strefa .kariera-mental {
	/* Produkcja: szary blok sekcji "Znajdź drużynę" startuje na 1171 px.
	   Dolne 30 px to margines filmu (20 px) plus padding kolumny (10 px). */
	padding-block: 25px 10px;
}

.kariera-strefa .kariera-mental .kariera-naglowek {
	/* Produkcja: film startuje 20 px pod nagłówkiem sekcji, nie 24 px. */
	margin-bottom: 20px;
}

.kariera-strefa .kariera-druzyna {
	/* Produkcja: szary blok 1171..1808 - 50 px nad nagłówkiem, 40 px pod kaflami. */
	padding-block: 50px 40px;
}

.kariera-strefa .kariera-liczby {
	padding-block: 50px 20px;
}

.kariera-strefa .kariera-historie {
	padding-block: 60px 30px;
}

.kariera-strefa .kariera-historie .kariera-naglowek {
	/* Produkcja: playlista startuje 60 px pod nagłówkiem sekcji. */
	margin-bottom: 60px;
}

.kariera-strefa .kariera-galeria {
	/* Produkcja: pasek kropek kończy sekcję, dalej 60 px do sekcji "Jakie cechy". */
	padding-block: 60px 0;
}

/* Produkcja: zdjęcia startują 63 px pod nagłówkiem galerii. */
.kariera-strefa .kariera-galeria .kariera-naglowek {
	margin-bottom: 63px;
}

.kariera-strefa .kariera-cechy {
	/* Produkcja: szary blok sekcji "Aktualne oferty pracy" startuje na 3697 px. */
	padding-block: 60px 37px;
}

.kariera-strefa .kariera-cechy .kariera-naglowek {
	/* Produkcja: ikona startuje 50 px pod nagłówkiem. */
	margin-bottom: 50px;
}

.kariera-strefa .kariera-oferty {
	/* Produkcja: szary blok 3697..4336 - 50 px nad nagłówkiem, 40 px pod kaflami. */
	padding-block: 50px 40px;
}

.kariera-strefa .kariera-zasady {
	/* Produkcja: zdjęcie startuje 20 px pod szarym blokiem, przycisk kończy się
	   60 px nad sekcją „To musisz wiedzieć”. */
	padding-block: 20px 60px;
}

/* Produkcja: sekcja „To musisz wiedzieć” ma 50 px u góry (nie 60 jak reszta). */
.kariera-strefa .kariera-wiedza {
	/* Produkcja: 50 px u góry i 50 px pod ostatnim etapem rekrutacji. */
	padding-block: 50px;
}

.kariera-strefa .kariera-zasady .kariera-naglowek {
	margin-bottom: 0;
}

.kariera-strefa .kariera-zasady__tresc {
	gap: 20px;
}

.kariera-strefa .kariera-wiedza .kariera-naglowek {
	margin-bottom: 60px;
}

.kariera-strefa .kariera-zakladki__paski {
	/* Produkcja: ikony osi rekrutacji startują 40 px pod paskiem zakładek. */
	margin-bottom: 40px;
}

/* =====================================================
   ODSTĘPY PIONOWE - TELEFON
   Musi być na końcu pliku, bo nadpisuje tabelę odstępów powyżej.
   Wartości zmierzone na wellclinic.pl przy 390 px.
   ===================================================== */

@media (max-width: 767px) {
	.kariera-strefa .kariera-mental {
		padding-block: 20px 10px;
	}

	.kariera-strefa .kariera-mental .kariera-naglowek {
		margin-bottom: 30px;
	}

	/* Produkcja (390 px): szary blok 958..1543 - 20 px nad nagłówkiem, 40 px pod kaflami. */
	.kariera-strefa .kariera-druzyna {
		padding-block: 20px 40px;
	}

	.kariera-strefa .kariera-druzyna .kariera-naglowek {
		margin-bottom: 30px;
	}

	.kariera-strefa .kariera-liczby {
		padding-block: 17px 20px;
	}

	.kariera-strefa .kariera-historie {
		padding-block: 60px 0;
	}

	.kariera-strefa .kariera-galeria {
		padding-block: 53px 0;
	}

	.kariera-strefa .kariera-galeria .kariera-naglowek {
		margin-bottom: 23px;
	}

	.kariera-strefa .kariera-cechy {
		padding-block: 31px 31px;
	}

	/* Produkcja: na telefonie tekst cechy ma 275 px szerokości, odstęp między
	   pozycjami 20 px, a tytuł marginesy 14/16 px. */
	.kariera-strefa .kariera-cechy__lista {
		gap: 20px;
	}

	.kariera-strefa .kariera-cechy__tytul,
	.kariera-strefa .kariera-cechy__opis {
		max-width: 275px;
		margin-inline: auto;
	}

	.kariera-strefa .kariera-cechy__tytul {
		margin-block: 14px 16px;
	}

	.kariera-strefa .kariera-cechy .kariera-naglowek {
		margin-bottom: 40px;
	}

	.kariera-strefa .kariera-cechy__ikona img {
		width: 83px;
	}

	/* Produkcja (390 px): szary blok 4113..4730 - 50 px nad nagłówkiem, 40 px pod kaflami. */
	.kariera-strefa .kariera-oferty {
		padding-block: 50px 40px;
	}

	.kariera-strefa .kariera-zasady {
		padding-block: 20px 50px;
	}

	/* Produkcja (390 px): zdjęcie "10 zasad" ma 335x224 px, nie pełną szerokość. */
	.kariera-strefa .kariera-zasady__obraz {
		max-width: 335px;
	}

	.kariera-strefa .kariera-oferty .kariera-naglowek {
		margin-bottom: 60px;
	}

	.kariera-strefa .kariera-wiedza {
		padding-block: 50px;
	}

	.kariera-strefa .kariera-wiedza .kariera-naglowek {
		margin-bottom: 30px;
	}

	/* Produkcja renderuje na telefonie osobny zestaw sekcji 1..6, po jednej na etap:
	   złote kółko 52x56 przy lewej krawędzi, pionowa linia 5 px zaczynająca się 20 px pod
	   kółkiem i dochodząca do dołu etapu, treść odsunięta o 85 px. Etapy stykają się bez
	   odstępu, a kolejność jest ciągła - stąd display:contents na rzędach i order z --kolejnosc. */
	.kariera-strefa .kariera-proces {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
	}

	.kariera-strefa .kariera-proces__rzad,
	.kariera-strefa .kariera-proces__rzad--nad,
	.kariera-strefa .kariera-proces__rzad--pod {
		display: contents;
	}

	.kariera-strefa .kariera-proces__etap {
		order: var(--kolejnosc);
		position: relative;
		flex-direction: column;
		align-items: flex-start;
		/* Produkcja: 15 px od ikony do tytułu (7 px odstępu + 8 px marginesu tytułu),
		   a pod opisem 20 px paddingu widgetu i ~19 px paddingu kolumny. */
		gap: 15px !important;
		padding: 0 17px 39px 85px;
	}

	.kariera-strefa .kariera-proces__numer--etap {
		position: absolute;
		left: 10px;
		top: 0;
		/* Numery w osi są centrowane względem punktu, numer w etapie stoi przy krawędzi. */
		transform: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 56px;
		background: var(--kariera-zloty);
		border-radius: 28px;
		font-family: var(--kariera-font-naglowek);
		font-size: 40px;
		font-weight: 400;
		font-style: normal;
		line-height: 40px;
		/* Playfair domyślnie daje cyfry nautyczne, a te mają różne wysokości i zejścia:
		   "6" stoi 4,67 px za wysoko, "3" i "4" 1,83 px za nisko. Cyfry linearne są równe. */
		font-variant-numeric: lining-nums;
		/* Wyśrodkowany zostaje wiersz tekstu, nie glif - linia pisma wypada o (asc-desc)/2
		   poniżej środka. Dolny padding podnosi cyfrę o połowę swojej wartości; 0,1333em
		   to dokładnie ta różnica dla Playfaira z cyframi linearnymi. */
		padding-bottom: 0.1333em;
		color: var(--kariera-bialy);
	}

	.kariera-strefa .kariera-proces__etap::after {
		content: '';
		position: absolute;
		left: 34px;
		top: 76px;
		bottom: 0;
		width: 5px;
		background: url('../../../uploads/2022/07/line-up.png') 0 0 / 100% 100% no-repeat;
	}

	.kariera-strefa .kariera-proces__etap--ostatni::after {
		content: none;
	}

	.kariera-strefa .kariera-proces__tresc {
		padding-top: 0;
		max-width: none;
	}

	.kariera-strefa .kariera-proces__ikona img {
		width: 71.4px !important;
	}

	/* Produkcja: ikona pierwszego etapu jest mniejsza od pozostałych. */
	.kariera-strefa .kariera-proces__etap[style*="--kolejnosc:1"] .kariera-proces__ikona img {
		width: 59px !important;
	}
}