/* =========================================================================
   VETKA — biblioteka UI v2 · Lekarze (lista 23a + profil 23e)
   =========================================================================
   Odwzorowanie handoffu „Lista lekarzy + profil lekarza". Wartości pochodzą
   z tokenów (assets/css/v2/tokens.css); liczby wpisane wprost to te, które
   w handoffie są miarą jednorazową (paddingi sekcji, wysokości portretów,
   gutter siatki, szerokość karty bocznej i kolumny etykiet w tabeli).

   Jeden arkusz na dwa widoki, bo dzielą tokeny, hairline'y i portret
   z monogramem — tak samo jak kariera.css obsługuje stronę kariery razem
   z podstroną oferty. Prefiksy są rozłączne: `.vk-zsp__*` to lista,
   `.vk-os__*` profil.

   Prefiks `body.vetka-ui` przy każdej regule nie jest ozdobą: Elementor Kit
   stylizuje `a`, `img` i `button` PO TYPIE regułą `.elementor-kit-<id> a`
   o specyficzności (0,1,1). Pojedyncza klasa (0,1,0) przegrywa z nią bez
   `!important`; `body.vetka-ui .vk-zsp__x` daje (0,2,1) i wygrywa czysto.
   ========================================================================= */

body.vetka-ui .vk-zsp,
body.vetka-ui .vk-os {
	--vk-zsp-pad: 24px;   /* margines boczny kontenera 1200 px               */

	background-color: var(--v2-bg);
	color: var(--v2-ink);
	font-family: var(--v2-font);
}

/* Motyw dokłada do `.page-content` własny padding pionowy; oba widoki niosą
   swój rytm same — nagłówek listy ma dostać dokładnie 64 px od paska
   nawigacji, okruszki profilu 56 px.                                       */
body.vetka-ui.vk-zespol-page .page-content,
body.vetka-ui.vk-osoba-page .page-content {
	padding-block: 0;
}

body.vetka-ui .vk-zsp__wrap,
body.vetka-ui .vk-os__wrap {
	max-width: var(--v2-wrap);
	margin-inline: auto;
	padding-inline: var(--vk-zsp-pad);
}

/* Zerowanie marginesów idzie przez `:where()`, nie `:is()`: `:where()` waży
   zero, więc o wyniku decyduje kolejność, a reset stoi pierwszy i nie
   przykrywa marginesów ustawianych niżej przy pojedynczych elementach.     */
body.vetka-ui .vk-zsp :where(h1, h2, h3, p, ol, ul, dl, dt, dd),
body.vetka-ui .vk-os :where(h1, h2, h3, p, ol, ul, dl, dt, dd) {
	margin: 0;
	padding: 0;
}

body.vetka-ui .vk-zsp :where(ol, ul),
body.vetka-ui .vk-os :where(ol, ul) {
	list-style: none;
}

/* Portret bez zdjęcia w CPT. Monogram, nie sylwetka: pusty awatar czytałby
   się jak brak osoby, a nie jak brak fotografii.                           */
body.vetka-ui .vk-zsp__photo--initials,
body.vetka-ui .vk-os__photo--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--v2-avatar-bg);
	color: var(--v2-avatar-ink);
	font-size: 32px;
	font-weight: 500;
	line-height: 1;
}

/* =========================================================================
   LISTA (23a) · 1. NAGŁÓWEK STRONY
   =========================================================================
   Padding 64/56 i hairline pod spodem — nagłówek jest osobną płaszczyzną,
   od której odbija się rząd filtrów.
   ========================================================================= */
body.vetka-ui .vk-zsp__head {
	border-bottom: 1px solid var(--v2-line);
}

body.vetka-ui .vk-zsp__head .vk-zsp__wrap {
	padding-block: 64px 56px;
}

/* Etykieta sekcji. Sam tekst, bez markera: kwadrat akcentu zdjęty ze
   wszystkich etykiet — akcent zostaje tam, gdzie niesie liczbę
   (kafle powodów na stronie głównej). */
body.vetka-ui .vk-zsp__eyebrow {
	margin-bottom: 16px;
	color: var(--v2-ink-3);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
}

body.vetka-ui .vk-zsp__h1 {
	max-width: 760px;
	margin-bottom: 14px;
	color: var(--v2-ink);
	font-size: clamp(34px, 3.4vw, 48px);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.08;
}

body.vetka-ui .vk-zsp__lead {
	max-width: 600px;
	color: var(--v2-ink-2);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.55;
}

/* =========================================================================
   LISTA (23a) · 2. FILTRY I SIATKA
   ========================================================================= */
body.vetka-ui .vk-zsp__list .vk-zsp__wrap {
	padding-block: 48px var(--v2-section);
}

/* --- Pigułki ------------------------------------------------------------ */
body.vetka-ui .vk-zsp__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
}

/* Pigułka jest linkiem, więc `min-height` musi stać tutaj, a nie wynikać
   z wysokości tekstu: 44 px to najmniejszy cel, który da się trafić kciukiem
   bez celowania.                                                           */
body.vetka-ui .vk-zsp__pill {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 9px 18px;
	border: 1px solid var(--v2-line-2);
	border-radius: 999px;
	background-color: var(--v2-bg);
	color: var(--v2-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--v2-ease), border-color var(--v2-ease), color var(--v2-ease);
}

body.vetka-ui .vk-zsp__pill:hover {
	background-color: var(--v2-bg-soft);
	color: var(--v2-ink);
}

body.vetka-ui .vk-zsp__pill:focus-visible {
	outline: 2px solid var(--v2-accent);
	outline-offset: 2px;
}

/* Wybrana pigułka jest wypełniona czernią — jedyne miejsce w widoku,
   w którym płaszczyzna jest ciemna, więc czyta się bez podpowiedzi.        */
body.vetka-ui .vk-zsp__pill.is-active {
	border-color: var(--v2-ink);
	background-color: var(--v2-ink);
	color: var(--v2-on-accent);
}

body.vetka-ui .vk-zsp__pill.is-active:hover {
	border-color: var(--v2-ink);
	background-color: var(--v2-ink);
	color: var(--v2-on-accent);
}

/* --- Siatka kart -------------------------------------------------------- */
body.vetka-ui .vk-zsp__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

body.vetka-ui .vk-zsp__card {
	display: block;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r);
	overflow: hidden;
	background-color: var(--v2-bg);
	color: var(--v2-ink);
	text-decoration: none;
	transition: background-color var(--v2-ease);
}

/* Karta ma `display:block`, więc samo `[hidden]` (display:none od
   przeglądarki) by przegrało — filtr musi wygasić ją tą samą wagą.         */
body.vetka-ui .vk-zsp__card[hidden] {
	display: none;
}

body.vetka-ui .vk-zsp__card:hover,
body.vetka-ui .vk-zsp__card:focus-visible {
	background-color: var(--v2-bg-soft);
	color: var(--v2-ink);
}

body.vetka-ui .vk-zsp__card:focus-visible {
	outline: 2px solid var(--v2-accent);
	outline-offset: -2px;
}

body.vetka-ui .vk-zsp__photo {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
}

body.vetka-ui .vk-zsp__card-body {
	display: block;
	padding: 18px 20px;
	border-top: 1px solid var(--v2-line);
}

/* Tytuł zawodowy („lek. wet.") jest etykietą nazwiska, nie jego częścią —
   stąd osobny wiersz wersalikami, a nie przedrostek w tej samej linii.     */
body.vetka-ui .vk-zsp__card-title {
	display: block;
	margin-bottom: 4px;
	color: var(--v2-ink-3);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .06em;
	line-height: 1.2;
	text-transform: uppercase;
}

body.vetka-ui .vk-zsp__card-name {
	display: block;
	margin-bottom: 4px;
	color: var(--v2-ink);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

body.vetka-ui .vk-zsp__card-spec {
	display: block;
	color: var(--v2-accent);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

/* =========================================================================
   PROFIL (23e) · OKRUSZKI
   ========================================================================= */
body.vetka-ui .vk-os__wrap {
	padding-block: 56px var(--v2-section);
}

body.vetka-ui .vk-os__crumbs {
	margin-bottom: 32px;
	font-size: 14px;
	line-height: 1.4;
}

body.vetka-ui .vk-os__crumbs-list {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

body.vetka-ui .vk-os__crumb {
	color: var(--v2-ink-3);
}

/* Separator dokłada CSS, żeby ukośnik nie wchodził do treści odczytywanej
   przez czytnik ekranu — kolejność członów niesie sama lista.              */
body.vetka-ui .vk-os__crumb + .vk-os__crumb::before {
	content: "/";
	margin: 0 8px;
	color: var(--v2-ink-3);
}

body.vetka-ui .vk-os__crumb a {
	color: var(--v2-ink-3);
	text-decoration: none;
	transition: color var(--v2-ease);
}

body.vetka-ui .vk-os__crumb a:hover {
	color: var(--v2-ink);
}

body.vetka-ui .vk-os__crumb--current {
	color: var(--v2-ink);
}

/* =========================================================================
   PROFIL (23e) · UKŁAD DWUKOLUMNOWY
   =========================================================================
   `align-items:start` jest warunkiem działania `position:sticky` w karcie:
   domyślne `stretch` rozciągnęłoby kolumnę na całą wysokość siatki i nie
   byłoby czego przyklejać.
   ========================================================================= */
body.vetka-ui .vk-os__grid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 56px;
	align-items: start;
}

/* --- Karta osoby -------------------------------------------------------- */
body.vetka-ui .vk-os__card {
	position: sticky;
	top: 24px;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r);
	overflow: hidden;
	background-color: var(--v2-bg);
}

body.vetka-ui .vk-os__photo {
	display: block;
	width: 100%;
	height: 320px;
	object-fit: cover;
}

body.vetka-ui .vk-os__card-body {
	padding: 24px 28px;
	border-top: 1px solid var(--v2-line);
}

body.vetka-ui .vk-os__card-name {
	margin-bottom: 2px;
	color: var(--v2-ink);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

body.vetka-ui .vk-os__card-spec {
	margin-bottom: 18px;
	color: var(--v2-accent);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
}

/* --- Wiersze faktów ----------------------------------------------------- */
body.vetka-ui .vk-os__facts {
	color: var(--v2-ink-2);
	font-size: 14px;
	line-height: 1.9;
}

/* Etykieta i wartość stoją w jednej linii, więc `<dt>` i `<dd>` wracają do
   `display:inline` — para zostaje parą w kodzie, a wygląda jak zdanie.     */
body.vetka-ui .vk-os__fact-label,
body.vetka-ui .vk-os__fact-value {
	display: inline;
}

body.vetka-ui .vk-os__fact-label::after {
	content: ":";
	margin-right: .35em;
}

/* Przycisk bierze geometrię z komponentu `.vk-c-btn--primary --block`;
   tutaj tylko wysokość 48 px z handoffu i odstęp od faktów.                */
body.vetka-ui .vk-os .vk-os__cta {
	min-height: 48px;
	margin-top: 20px;
	font-size: 15px;
}

/* Karta bez ani jednego faktu: przycisk sam odmierza odstęp od specjalności,
   więc podwójny margines nie ma czego rozpychać.                           */
body.vetka-ui .vk-os__card-spec + .vk-os__cta,
body.vetka-ui .vk-os__card-name + .vk-os__cta {
	margin-top: 4px;
}

/* =========================================================================
   PROFIL (23e) · KOLUMNA REDAKCYJNA
   ========================================================================= */
body.vetka-ui .vk-os__h1 {
	margin-bottom: 24px;
	color: var(--v2-ink);
	font-size: clamp(30px, 3vw, 40px);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.1;
}

body.vetka-ui .vk-os__bio {
	margin-bottom: 36px;
}

body.vetka-ui .vk-os__bio .vk-c-prose p {
	max-width: 640px;
	margin: 0 0 18px;
	color: var(--v2-ink-2);
	font-size: 17px;
	line-height: 1.65;
}

body.vetka-ui .vk-os__bio .vk-c-prose p:last-child {
	margin-bottom: 0;
}

/* --- Tabela definicyjna ------------------------------------------------- */
body.vetka-ui .vk-os__table {
	border-top: 1px solid var(--v2-line);
}

body.vetka-ui .vk-os__row {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 24px;
	padding-block: 20px;
	border-bottom: 1px solid var(--v2-line);
}

body.vetka-ui .vk-os__row-label {
	color: var(--v2-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
}

body.vetka-ui .vk-os__row-value {
	color: var(--v2-ink-2);
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.55;
}

/* =========================================================================
   MOBILE I TABLET
   =========================================================================
   Handoff `design_handoff_mobile`, sekcje 29g (lista) i 29h (profil).
   Progi: ≤1024 px tablet, ≤640 px mobile.

   Siatka osób: 3 kolumny na tablecie, 2 na mobile'u — wzorzec globalny
   („osoby: 2 / 3–4"). Jedna kolumna nie wchodzi: karta osoby to portret
   z podpisem, a na całą szerokość telefonu portret robi się plakatem.

   Profil: karta osoby NAD treścią na mobile'u, a na tablecie kolumna
   300 px + treść. Tabela definicyjna wszędzie poniżej progu stoi w słupku
   (etykieta nad wartością).
   ========================================================================= */
@media (max-width: 1024px) {
	body.vetka-ui .vk-zsp,
	body.vetka-ui .vk-os {
		--vk-zsp-pad: 40px;
	}

	body.vetka-ui .vk-zsp__head .vk-zsp__wrap {
		padding-block: 40px 32px;
	}

	body.vetka-ui .vk-zsp__h1 {
		font-size: 36px;
		line-height: 1.1;
	}

	body.vetka-ui .vk-zsp__list .vk-zsp__wrap {
		padding-block: 32px var(--v2-section-sm);
	}

	body.vetka-ui .vk-zsp__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}

	body.vetka-ui .vk-zsp__photo {
		height: 200px;
	}

	body.vetka-ui .vk-os__wrap {
		padding-block: 40px var(--v2-section-sm);
	}

	body.vetka-ui .vk-os__grid {
		grid-template-columns: 300px 1fr;
		gap: 32px;
	}

	body.vetka-ui .vk-os__photo {
		height: 280px;
	}

	body.vetka-ui .vk-os__h1 {
		font-size: 30px;
	}

	/* Etykieta nad wartością — wzorzec globalny „Tabele definicyjne".     */
	body.vetka-ui .vk-os__row {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

@media (max-width: 640px) {
	body.vetka-ui .vk-zsp,
	body.vetka-ui .vk-os {
		--vk-zsp-pad: 20px;
	}

	body.vetka-ui .vk-zsp__head .vk-zsp__wrap {
		padding-block: 28px 24px;
	}

	body.vetka-ui .vk-zsp__h1 {
		font-size: 28px;
		line-height: 1.15;
	}

	body.vetka-ui .vk-zsp__lead {
		font-size: 15px;
	}

	body.vetka-ui .vk-zsp__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	body.vetka-ui .vk-zsp__photo {
		height: 150px;
	}

	body.vetka-ui .vk-zsp__card-body {
		padding: 13px 15px;
	}

	/* Rząd pigułek zawija się do kolejnych wierszy i nigdy nie jest ucinany
	   — wzorzec globalny „Pigułki filtrów: flex-wrap: wrap". Wcześniej
	   przewijał się w poziomie, co ukrywało część filtrów przed kimś, kto
	   nie zgadnie, że pasek da się przesunąć.                             */
	body.vetka-ui .vk-zsp__filters {
		flex-wrap: wrap;
		margin-inline: 0;
		padding-inline: 0;
		overflow-x: visible;
	}

	/* Karta osoby nad treścią — wzorzec 29h.                              */
	body.vetka-ui .vk-os__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	body.vetka-ui .vk-os__card {
		position: static;
		max-width: none;
	}

	body.vetka-ui .vk-os__photo {
		height: 240px;
	}

	body.vetka-ui .vk-os__h1 {
		font-size: 25px;
	}

	body.vetka-ui .vk-os__card-body {
		padding: 18px 20px;
	}
}