/* =========================================================================
   VETKA — biblioteka UI v2 · podstrona specjalizacji (szablon ×16)
   =========================================================================
   Odwzorowanie handoffu „SZABLON podstrony specjalizacji", wariant 11a.
   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,
   proporcja kolumn, geometria kart panelu.

   Prefiks `body.vetka-ui` przy każdej regule nie jest ozdobą: Elementor Kit
   stylizuje `a`, `button`, `p` i `span` 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-sp__x` daje (0,2,1) i wygrywa czysto.

   Struktura pliku odpowiada kolejności sekcji na stronie.
   ========================================================================= */

body.vetka-ui .vk-sp {
	--vk-sp-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; rytm sekcji niesie
   ten arkusz, a pasek pilnej pomocy ma dotykać stopki bez szczeliny.       */
body.vetka-ui.vk-specjalizacja-page .page-content {
	padding-block: 0;
}

/* --- Kontener ----------------------------------------------------------- */
body.vetka-ui .vk-sp__wrap {
	max-width: var(--v2-wrap);
	margin-inline: auto;
	padding-inline: var(--vk-sp-pad);
}

/* Reset marginesów 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-sp :where(h1, h2, p, ul, ol, li, dl, dt, dd, figure) {
	margin: 0;
}

body.vetka-ui .vk-sp :where(ul, ol) {
	padding: 0;
	list-style: none;
}

/* =========================================================================
   1. NAGŁÓWEK STRONY
   =========================================================================
   Padding górny 40 px z handoffu liczony jest od dolnej krawędzi paska
   nawigacji, który po redesignie ma własne tło i wchodzi w normalny przepływ.
   ========================================================================= */
body.vetka-ui .vk-sp__head {
	padding-top: 40px;
}

/* Link powrotny do huba. Wielkość celu dotykowego bierze się z paddingu,
   nie z wysokości linii — sam tekst 14 px dałby cel wysoki na 18 px.       */
body.vetka-ui .vk-sp__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin-left: -2px;
	color: var(--v2-ink-3);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: color var(--v2-ease);
}

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

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

/* 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).
   Wersaliki robi CSS, nie treść: czytnik ekranu wymawia wtedy słowo,
   a nie ciąg liter.                                                        */
body.vetka-ui .vk-sp__eyebrow {
	margin-top: 14px;
	margin-bottom: 14px;
	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-sp__head-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

body.vetka-ui .vk-sp__h1 {
	font-size: clamp(32px, 3.4vw, 48px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--v2-ink);
}

body.vetka-ui .vk-sp__lead {
	max-width: var(--v2-measure);
	margin-top: 16px;
	color: var(--v2-ink-2);
	font-size: 18px;
	line-height: 1.55;
}

body.vetka-ui .vk-sp__lead + .vk-sp__lead {
	margin-top: 12px;
}

/* Jedyne zielone CTA widoku. Geometria z handoffu (52 px, padding 26 px)
   różni się od skali komponentu, więc te dwie miary idą tutaj.             */
body.vetka-ui .vk-sp .vk-sp__cta {
	flex: 0 0 auto;
	min-height: 52px;
	padding-inline: 26px;
	font-size: 16px;
	white-space: nowrap;
}

body.vetka-ui .vk-sp__hero {
	margin-top: 32px;
}

body.vetka-ui .vk-sp__hero-img {
	display: block;
	width: 100%;
	height: 380px;
	object-fit: cover;
	border-radius: var(--v2-r-lg);
}

/* --- Zdjęcie bez kadrowania --------------------------------------------
   Pas hero jest wysoki na 380 px i kadruje `cover`, więc ze zdjęcia
   pionowego zostaje w nim poziomy pasek. Gdy liczy się cała scena, a nie
   sam motyw, `lead_foto_cale` w danych przełącza zdjęcie na naturalne
   proporcje: pełna szerokość kontenera jak przy każdym innym zdjęciu
   serwisu, a wysokość z proporcji pliku — nic nie jest przycinane. Pas
   robi się przez to wysoki (przy kadrze 1,16:1 to około 990 px), więc
   klucz zakładamy świadomie, zdjęcie po zdjęciu, a nie globalnie.
   Podwójna klasa, nie pojedyncza: reguła z zapytania medialnego niżej ma
   tę samą specyficzność co `.vk-sp__hero-img` i wygrywałaby kolejnością,
   przywracając stałą wysokość na wąskim ekranie.                        */
body.vetka-ui .vk-sp__hero-img.vk-sp__hero-img--cale {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* --- Para kadrów w pasie ------------------------------------------------
   Dwa zdjęcia obok siebie zamiast jednego szerokiego — dla stron, które
   mówią o dwóch grupach pacjentów naraz (zajęczaki i gryzonie). Wysokość
   zostaje ta sama co przy pojedynczym kadrze, więc rząd nie rośnie:
   zmienia się tylko liczba zdjęć.                                        */
body.vetka-ui .vk-sp__hero--para {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
}

/* --- Wybór grupy nad zdjęciem ------------------------------------------
   Pigułki stały kiedyś w panelu OBOK zdjęcia, na pół pasa — zdjęcie traciło
   przez to połowę szerokości, a rząd czytał się jak „kadr i pudełko".
   Teraz wybór idzie nad pasem, w jednej linii: etykieta i pigułki w rzędzie,
   bez ramki i tła. Pas hero zostaje w całości dla zdjęć.                  */
body.vetka-ui .vk-sp__wybor {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 32px;
}

/* Wybór i zdjęcia to jeden blok, więc odstęp między nimi jest mniejszy niż
   odstęp całego bloku od leadu (32 px z `.vk-sp__hero`).                  */
body.vetka-ui .vk-sp__wybor + .vk-sp__hero {
	margin-top: 16px;
}

body.vetka-ui .vk-sp__wybor .vk-sp__pills {
	margin-top: 0;
}

body.vetka-ui .vk-sp__wybor-label {
	color: var(--v2-ink-3);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* =========================================================================
   2. TREŚĆ + PANEL BOCZNY
   =========================================================================
   Proporcja 7fr/5fr i gap 48 px z handoffu. `align-items:start` jest tu
   warunkiem działania `position:sticky` w panelu: domyślne `stretch`
   rozciągnęłoby kolumnę na całą wysokość siatki i nie byłoby czego przyklejać.
   ========================================================================= */
body.vetka-ui .vk-sp__body {
	padding-block: var(--v2-section-sm) var(--v2-section);
}

body.vetka-ui .vk-sp__grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 48px;
	align-items: start;
}

body.vetka-ui .vk-sp__main {
	max-width: var(--v2-measure);
	min-width: 0;   /* bez tego długie słowa rozpychają kolumnę siatki      */
}

/* Strona bez panelu bocznego: prawe 5fr zostawało puste na całej wysokości
   dokumentu. Kolumna treści bierze wtedy pełną szerokość — wszystkie boksy
   widoku (karty modułów, alert, akordeon pytań) mają wtedy jedną, tę samą
   krawędź, bo różne szerokości ramek czytają się jak przypadek.

   Miarę czytania trzyma sam tekst w środku, nie ramka: akapit rozciągnięty
   na 1150 px byłby nie do przeczytania.                                    */
body.vetka-ui .vk-sp__grid--solo {
	grid-template-columns: 1fr;
}

body.vetka-ui .vk-sp__grid--solo .vk-sp__main {
	max-width: none;
}

body.vetka-ui .vk-sp__grid--solo .vk-sp__main :where(.vk-sp__p, .vk-sp__list, .vk-sp__note) {
	max-width: var(--v2-measure);
}

/* Odstęp na dzieciach kolumny, nie na `.vk-sp__section + .vk-sp__section`:
   alert pilnej pomocy jest `<aside>`, nie sekcją, a stoi w tym samym rytmie
   co reszta bloków. Selektor po sekcjach przeskakiwałby go z obu stron.    */
body.vetka-ui .vk-sp__main > * + * {
	margin-top: 48px;
}

body.vetka-ui .vk-sp__h2 {
	margin-bottom: 14px;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--v2-ink);
}

body.vetka-ui .vk-sp__p {
	color: var(--v2-ink-2);
	font-size: 16px;
	line-height: 1.6;
}

body.vetka-ui .vk-sp__p + .vk-sp__p {
	margin-top: 12px;
}

/* Akapit domykający sekcję po liście albo siatce. Odstęp musi być większy
   niż między akapitami (12 px), bo zdanie wraca do lewej krawędzi kolumny
   i bez tego kleiłoby się do ostatniej pozycji listy.                      */
body.vetka-ui :where(.vk-sp__list, .vk-sp__terms, .vk-sp__cards) + .vk-sp__p {
	margin-top: 16px;
}

/* Dopisek pod listą albo siatką — ciszej niż akapit treści.               */
body.vetka-ui .vk-sp__note {
	margin-top: 16px;
	color: var(--v2-ink-3);
	font-size: 15px;
	line-height: 1.6;
}

/* Odnośnik w zdaniu (zapis `[etykieta](adres)` w pliku danych). Podkreślenie
   od razu, nie dopiero pod kursorem: w akapicie nic innego nie odróżnia go
   od tekstu, bo akcent niesie tu wyłącznie marker listy i przyciski.       */
body.vetka-ui .vk-sp__link {
	color: var(--v2-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.vetka-ui .vk-sp__link:hover {
	color: var(--v2-accent-2);
}

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

/* --- Listy z kwadratowym markerem --------------------------------------- */
body.vetka-ui .vk-sp__list {
	display: grid;
	gap: 10px;
	margin-top: 16px;
}

body.vetka-ui .vk-sp__list--2col {
	grid-template-columns: 1fr 1fr;
	gap: 10px 28px;
}

body.vetka-ui .vk-sp__list-item {
	display: flex;
	gap: 12px;
	align-items: baseline;
	color: var(--v2-ink-2);
	font-size: 15px;
	line-height: 1.5;
}

body.vetka-ui .vk-sp__list-item::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 1px;
	background-color: var(--v2-accent);
	/* Marker wyrównany do linii bazowej pierwszego wiersza, nie do jego
	   środka: przy pozycji zawijającej się na dwa wiersze wyglądałby wtedy
	   na przesunięty w dół.                                                */
	transform: translateY(-1px);
}

/* Pierwsza lista tuż pod nagłówkiem nie potrzebuje własnego odstępu —
   nagłówek ma już swój margines dolny.                                     */
body.vetka-ui .vk-sp__h2 + .vk-sp__list {
	margin-top: 0;
}

/* --- Alert pilnej pomocy ------------------------------------------------ */
body.vetka-ui .vk-sp__alert {
	padding: 24px 28px;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r);
}

body.vetka-ui .vk-sp__alert-text {
	color: var(--v2-ink-2);
	font-size: 15px;
	line-height: 1.55;
}

body.vetka-ui .vk-sp__alert-text + .vk-sp__alert-text {
	margin-top: 8px;
}

body.vetka-ui .vk-sp__list--alert {
	margin-top: 12px;
}

/* Zdanie z instrukcją: jedyny bold w treści alertu, bo to ono niesie
   decyzję („prosimy przyjechać od razu"), a nie opis objawów.              */
body.vetka-ui .vk-sp__alert-akcja {
	margin-top: 12px;
	color: var(--v2-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
}

body.vetka-ui .vk-sp .vk-sp__alert-btn {
	margin-top: 16px;
	font-variant-numeric: tabular-nums;
}

/* --- Przełącznik grup gatunków ------------------------------------------
   Pigułki takie same jak filtr zespołu na /team-members/ — ten sam kształt
   i ta sama rola, więc nie ma powodu, żeby wyglądały inaczej. Markup jest
   jednak własny (`vk-sp__pill`), bo arkusz zespołu nie ładuje się na tych
   stronach i żadna z nich nie może zależeć od sąsiada.                     */
body.vetka-ui .vk-sp__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

/* Rząd pigułek otwiera sekcję, więc nad nim nie ma nagłówka, od którego
   trzeba by się odsunąć — odstęp bierze się z rytmu kolumny.               */
body.vetka-ui .vk-sp__pills:first-child {
	margin-top: 0;
}

/* 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-sp__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-sp__pill:hover {
	background-color: var(--v2-bg-soft);
	border-color: var(--v2-ink-3);
}

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

body.vetka-ui .vk-sp__pill.is-active {
	background-color: var(--v2-ink);
	border-color: var(--v2-ink);
	color: var(--v2-bg);
}

/* --- Moduły treści: numerowane karty (wariant 28a) ----------------------
   Odwzorowanie handoffu „Moduły treści na podstronie specjalizacji". Każda
   grupa jest kartą: pasek nagłówka na kremie (numer, tytuł, tag kategorii)
   i treść pod nim. Wcześniej panele grup były zwykłym ciągiem sekcji
   i moduły czytały się jak kolejne akapity jednej strony.

   Siatka z `gap`, nie margines na sąsiedztwie: filtr pigułek chowa karty
   atrybutem `hidden`, a `display: none` znika z układu siatki razem
   z odstępem. Selektor `+` liczyłby go dalej i zawężony widok zaczynałby
   się od pustego pasa.                                                     */
body.vetka-ui .vk-sp__grupy {
	display: grid;
	gap: 16px;
	margin-top: 32px;
}

/* Cel przewijania po kliknięciu pigułki i po kotwicy `#<slug>`. Zapas u góry,
   żeby pasek karty nie wjechał pod przyklejony pasek serwisu.              */
body.vetka-ui .vk-sp__grupy,
body.vetka-ui .vk-sp__modul {
	scroll-margin-top: 104px;
}

/* Bez `display` na karcie: atrybut `hidden` z arkusza przeglądarki (0,1,0)
   musi wygrać, inaczej filtr pigułek przestaje cokolwiek chować.           */
body.vetka-ui .vk-sp__modul {
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r);
	overflow: hidden;
}

body.vetka-ui .vk-sp__modul-head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 28px;
	border-bottom: 1px solid var(--v2-line);
	background-color: var(--v2-bg-soft);
}

/* Numer porządkowy jest stały: liczy się od miejsca grupy w danych, nie od
   tego, ile kart akurat widać (patrz `vetka_sp_modul()`). Cyfry o równej
   szerokości, żeby paski kolejnych kart miały tytuły w jednej linii.       */
body.vetka-ui .vk-sp__modul-nr {
	flex: 0 0 auto;
	color: var(--v2-accent);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

body.vetka-ui .vk-sp__modul-title {
	margin: 0;
	color: var(--v2-ink);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
}

/* Tag kategorii — opcjonalny, powstaje tylko przy kluczu `kategoria`
   w danych. `margin-left: auto` dosuwa go do prawej krawędzi paska.        */
body.vetka-ui .vk-sp__modul-tag {
	margin-left: auto;
	color: var(--v2-ink-3);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .07em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

/* 760 px z handoffu, nie `--v2-measure` (680 px): wiersz mierzy się tu od
   wnętrza karty, która ma już po obu stronach własny padding.              */
body.vetka-ui .vk-sp__modul-body {
	padding: 26px 28px;
	max-width: 760px;
}

/* Karta z ilustracją: tekst trzyma miarę czytania, a wolna prawa część
   boksu bierze kadr. Bez `align-items` — domyślne rozciągnięcie jest tu
   warunkiem działania `sticky` na zdjęciu: przyklejać się można tylko
   w polu wyższym niż sam obrazek.                                         */
body.vetka-ui .vk-sp__modul-body--foto {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	gap: 36px;
	max-width: none;
}

body.vetka-ui .vk-sp__modul-tekst {
	max-width: var(--v2-measure);
	min-width: 0;
}

body.vetka-ui .vk-sp__modul-foto {
	margin: 0;
}

/* Zdjęcie jedzie z czytelnikiem: karta „Szpital 24h" ma kilka ekranów
   treści, a nieruchomy kadr zostawiłby pod sobą pustą kolumnę.

   `height: auto` stoi tu jawnie, mimo że jest wartością domyślną: figura
   jest rozciągniętym elementem siatki, a bez tego obrazek dostawał jej
   wysokość i ciągnął się przez całą kartę.

   Proporcje zostają naturalne, dopóki mieszczą się w 340 px — powyżej
   `max-height` przycina kadr (`object-fit`). Bez tego zdjęcia pionowe
   (pracownia RTG, endoskopia) były wyższe niż tekst obok, przez co karta
   czytała się jak podpis do fotografii.                                   */
body.vetka-ui .vk-sp__modul-img {
	position: sticky;
	top: 104px;
	display: block;
	width: 100%;
	height: auto;
	max-height: 340px;
	object-fit: cover;
	border-radius: var(--v2-r);
}

body.vetka-ui .vk-sp__modul-blok + .vk-sp__modul-blok {
	margin-top: 24px;
}

/* Typografia wnętrza karty jest o pół stopnia niższa niż w kolumnie treści
   (15,5 px zamiast 16 px) — tak stoi w handoffie.                          */
body.vetka-ui .vk-sp__modul-body .vk-sp__p {
	font-size: 15.5px;
	line-height: 1.65;
}

body.vetka-ui .vk-sp__modul-body .vk-sp__list {
	gap: 8px;
}

/* Pozycje listy w karcie idą w kolorze tekstu głównego, nie drugorzędnego:
   w module lista bywa całą treścią („Czym dysponuje nasz szpital"), więc
   nie może czytać się jak przypis do akapitu obok.                         */
body.vetka-ui .vk-sp__modul-body .vk-sp__list-item {
	color: var(--v2-ink);
	font-size: 15.5px;
	line-height: 1.5;
}

/* Pod-nagłówek w karcie. Powstaje tylko w grupie z kilkoma sekcjami — przy
   jednej tytuł stoi na pasku i H3 by go dublował. Stopień między tytułem
   karty (20 px) a treścią (15,5 px); handoff podaje wyłącznie poziom
   znacznika, geometria jest stąd.                                          */
body.vetka-ui .vk-sp__h3 {
	margin: 0 0 10px;
	color: var(--v2-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

/* Lista tuż pod pod-nagłówkiem albo na początku bloku nie potrzebuje
   własnego odstępu — daje go nagłówek albo padding karty.                  */
body.vetka-ui .vk-sp__h3 + .vk-sp__list,
body.vetka-ui .vk-sp__modul-blok > .vk-sp__list:first-child {
	margin-top: 0;
}

/* --- Terminy wyników ----------------------------------------------------
   Ramka na hairline'ach, wiersze pełnej szerokości:
   termin jest odpowiedzią na nazwę badania, więc para musi zostać razem
   także wtedy, gdy nazwa zawinie się na dwa wiersze.                       */
body.vetka-ui .vk-sp__terms {
	margin-top: 16px;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r);
	overflow: hidden;
}

body.vetka-ui .vk-sp__term {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
	padding: 14px 20px;
	border-top: 1px solid var(--v2-line);
}

body.vetka-ui .vk-sp__term:first-child {
	border-top: 0;
}

body.vetka-ui .vk-sp__term-name {
	color: var(--v2-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
}

body.vetka-ui .vk-sp__term-time {
	color: var(--v2-ink-3);
	font-size: 15px;
	line-height: 1.45;
	text-align: right;
}

/* --- Karty „Warto wiedzieć" / metody leczenia --------------------------- */
body.vetka-ui .vk-sp__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 16px;
}

body.vetka-ui .vk-sp__card {
	padding: 20px 24px;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r);
	background-color: var(--v2-bg-soft);
}

body.vetka-ui .vk-sp__card-title {
	margin-bottom: 6px;
	color: var(--v2-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

body.vetka-ui .vk-sp__card-text {
	color: var(--v2-ink-2);
	font-size: 14px;
	line-height: 1.55;
}

body.vetka-ui .vk-sp__h2 + .vk-sp__cards {
	margin-top: 0;
}

/* --- Zdjęcia w treści --------------------------------------------------- */
body.vetka-ui .vk-sp__figure {
	margin-top: 24px;
}

/* Stała wysokość z przycięciem, tak samo jak zdjęcie w nagłówku strony,
   tylko niższa: zdjęcie w treści jest ilustracją sekcji, a nie drugim hero.
   Wysokość, nie `aspect-ratio` — znacznik <img> z WordPressa niesie atrybuty
   width/height, które są podpowiedzią prezentacyjną i przy `height:auto`
   wygrywały z proporcją, dając w kolumnie kadr wysoki na 683 px.           */
body.vetka-ui .vk-sp__figure-img {
	display: block;
	width: 100%;
	height: 280px;
	object-fit: cover;
	border-radius: var(--v2-r-lg);
}

/* Zdjęcie bez kadrowania — jak `lead_foto_cale` w pasie nagłówka, tylko
   w kolumnie treści. Dla materiału, który sam jest dokumentem (RTG), pasek
   wysoki na 280 px obcinałby to, co na nim widać. Podwójna klasa z tego
   samego powodu co przy hero: reguły wysokości z zapytań medialnych niżej
   mają tę samą specyficzność co `.vk-sp__figure-img`.                     */
body.vetka-ui .vk-sp__figure-img.vk-sp__figure-img--cale {
	height: auto;
	object-fit: contain;
}

/* Para kadrów w jednym rzędzie: sekcja o obrazowaniu u ryb pokazuje zdjęcie
   RTG i tomografię tego samego badania. `auto-fit` z miarą 220 px sam schodzi
   do jednej kolumny, gdy kolumna treści zwęża się na tablecie i telefonie —
   dlatego nie ma tu własnego progu w media query.                          */
body.vetka-ui .vk-sp__figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 24px;
}

body.vetka-ui .vk-sp__figures .vk-sp__figure {
	margin-top: 0;
}

/* Niżej niż pojedynczy kadr: dwa zdjęcia obok siebie są o połowę węższe,
   a przy 280 px robiłyby z rzędu blok wyższy niż akapit, który opisują.    */
body.vetka-ui .vk-sp__figures .vk-sp__figure-img {
	height: 220px;
}

/* --- Przyciski akcji w treści ------------------------------------------- */
body.vetka-ui .vk-sp__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* --- Akordeony (zabiegi, FAQ) ------------------------------------------
   Geometria z handoffu: panel radius 16 px, pozycje na border-top, padding
   20/26, pytanie 16/600, odpowiedź 15/1.6. Reszta mechaniki — rozwijanie,
   aria, wariant bez JS — siedzi w komponencie `.vk-c-accordion`.           */
body.vetka-ui .vk-sp__section .vk-c-accordion__heading {
	padding: 20px 26px;
	font-size: 16px;
}

body.vetka-ui .vk-sp__section .vk-c-accordion__content {
	padding: 12px 26px 20px;
	font-size: 15px;
	line-height: 1.6;
}

/* Listy wewnątrz paneli akordeonu mają ten sam marker co listy w treści.
   Odstęp w obie strony, bo panel bywa złożony z akapitów, listy i zdania
   domykającego — komponent `.vk-c-prose` zna tylko sąsiedztwo `.vk-c-list`. */
body.vetka-ui .vk-sp__section .vk-c-accordion__content .vk-sp__list,
body.vetka-ui .vk-sp__section .vk-c-accordion__content .vk-sp__list + .vk-c-prose {
	margin-top: 12px;
}

body.vetka-ui .vk-sp__section .vk-c-prose > p {
	font-size: 15px;
	line-height: 1.6;
}

/* =========================================================================
   3. PANEL BOCZNY
   =========================================================================
   Przyklejony do góry okna z odstępem 24 px z handoffu. `align-self:start`
   dopełnia `align-items:start` siatki — panel krótszy od treści nie ma się
   rozciągać, bo rozciągnięty przestaje być czym przykleić.
   ========================================================================= */
body.vetka-ui .vk-sp__side {
	display: grid;
	gap: 16px;
	align-self: start;
	position: sticky;
	top: 24px;
	min-width: 0;
}

body.vetka-ui .vk-sp__panel {
	padding: 24px 28px;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r);
	background-color: var(--v2-bg);
}

/* Karta lekarza jest jedyną na kremie — to ona ma być pierwszym, na co pada
   wzrok po przejściu z kolumny treści.                                     */
body.vetka-ui .vk-sp__panel--doc {
	padding: 28px 32px;
	background-color: var(--v2-bg-soft);
}

body.vetka-ui .vk-sp__panel-label {
	margin-bottom: 16px;
	color: var(--v2-ink-3);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* --- Lekarze ------------------------------------------------------------ */
body.vetka-ui .vk-sp__docs {
	display: grid;
}

/* Każdy lekarz to wiersz z danymi i własny przycisk „Zobacz profil" pod nim.
   `justify-items: start` trzyma przycisk przy jego naturalnej szerokości —
   bez tego siatka rozciągnęłaby go na całą kartę.                          */
body.vetka-ui .vk-sp__doc {
	display: grid;
	gap: 16px;
	justify-items: start;
}

/* Hairline zamiast samego odstępu: przy kilku lekarzach musi być widać, do
   którego nazwiska należy który przycisk. Sam odstęp tego nie rozstrzyga,
   bo między wierszem a jego przyciskiem też jest odstęp.                   */
body.vetka-ui .vk-sp__doc + .vk-sp__doc {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--v2-line);
}

body.vetka-ui .vk-sp__doc-row {
	display: flex;
	align-items: center;
	gap: 16px;
}

body.vetka-ui .vk-sp__doc-foto {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--v2-r-lg);
	display: block;
}

/* Monogram zamiast fotografii. Większość profili w CPT nie ma jeszcze
   zdjęcia, a pusty kwadrat rozbijałby rytm karty — patrz vetka_sp_inicjaly().
   Po podmianie na prawdziwe zdjęcia ta reguła po prostu przestanie działać. */
body.vetka-ui .vk-sp__doc-foto--pusta {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--v2-line);
	background-color: var(--v2-bg);
	color: var(--v2-ink-3);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: .02em;
}

body.vetka-ui .vk-sp__doc-body {
	min-width: 0;
}

body.vetka-ui .vk-sp__doc-name {
	display: block;
	color: var(--v2-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

body.vetka-ui .vk-sp__doc-role {
	display: block;
	margin-top: 2px;
	color: var(--v2-ink-3);
	font-size: 13px;
	line-height: 1.5;
}

body.vetka-ui .vk-sp__doc-desc {
	display: block;
	margin-top: 8px;
	color: var(--v2-ink-2);
	font-size: 13px;
	line-height: 1.55;
}

body.vetka-ui .vk-sp__panel-note {
	margin-top: 16px;
	color: var(--v2-ink-3);
	font-size: 13px;
	line-height: 1.55;
}

/* =========================================================================
   4. PASEK „NAGŁY PRZYPADEK"
   =========================================================================
   Przechodzi wprost w stopkę: obie płaszczyzny są w tym samym ciemnym
   kolorze, a rozdziela je hairline w bieli o niskiej nieprzezroczystości —
   ten sam zabieg, co na hubie „Zakres usług".
   ========================================================================= */
body.vetka-ui .vk-sp__bar {
	background-color: var(--v2-dark);
	border-bottom: 1px solid var(--v2-line-dark);
}

body.vetka-ui .vk-sp__bar-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding-block: 28px;
}

body.vetka-ui .vk-sp__bar-text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 16px;
}

body.vetka-ui .vk-sp__bar-title {
	color: var(--v2-on-accent);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

body.vetka-ui .vk-sp__bar-sub {
	color: var(--v2-on-dark);
	font-size: 15px;
	line-height: 1.4;
}

body.vetka-ui .vk-sp__bar-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}

body.vetka-ui .vk-sp__bar-tel {
	color: var(--v2-on-accent);
	font-size: 18px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	white-space: nowrap;
}

body.vetka-ui .vk-sp .vk-sp__bar-btn {
	padding-inline: 20px;
	font-size: 15px;
}

/* =========================================================================
   MOBILE I TABLET
   =========================================================================
   Handoff `design_handoff_mobile`, sekcja 29i (podstrona specjalizacji
   razem z modułami 28a). Progi: ≤1024 px tablet, ≤640 px mobile.

   Kolejność składania: nagłówek łamie się i CTA schodzi pod lead, siatka
   treść + panel 2 → 1 (panel pod treścią, bez przyklejania), listy
   dwukolumnowe → 1, karty 2 → 1, a pasek nagłówka karty modułu zawija tak,
   że tag ląduje pod tytułem (to ostatnie dopiero na mobile'u — na tablecie
   mieści się w jednym wierszu przy prawej krawędzi).
   ========================================================================= */
@media (max-width: 1024px) {
	body.vetka-ui .vk-sp {
		--vk-sp-pad: 40px;
	}

	body.vetka-ui .vk-sp__head-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	body.vetka-ui .vk-sp__h1 {
		font-size: 32px;
		line-height: 1.12;
	}

	body.vetka-ui .vk-sp__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* Panel pod treścią przestaje być panelem bocznym: przyklejanie nie ma
	   już do czego się odnosić, a karty mogą stanąć obok siebie. Obie
	   kolumny tracą ograniczenie szerokości, żeby ich prawe krawędzie
	   zostały w jednej linii z siatkami w treści.                          */
	body.vetka-ui .vk-sp__side {
		position: static;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}

	body.vetka-ui .vk-sp__main {
		max-width: none;
	}

	body.vetka-ui .vk-sp__panel--doc {
		padding: 24px 26px;
	}

	body.vetka-ui .vk-sp__hero-img {
		height: 300px;
	}

	/* Para kadrów schodzi na wąskim ekranie jedno pod drugie — dwa zdjęcia
	   po połowie szerokości telefonu nie pokazałyby już niczego.          */
	body.vetka-ui .vk-sp__hero--para {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	body.vetka-ui .vk-sp__modul-body--foto {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	body.vetka-ui .vk-sp__modul-img {
		position: static;
	}

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

	body.vetka-ui .vk-sp__body {
		padding-block: 40px 56px;
	}
}

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

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

	body.vetka-ui .vk-sp__list--2col,
	body.vetka-ui .vk-sp__cards {
		grid-template-columns: 1fr;
	}

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

	body.vetka-ui .vk-sp__hero-img {
		height: 220px;
	}

	body.vetka-ui .vk-sp__figure-img,
	body.vetka-ui .vk-sp__figures .vk-sp__figure-img {
		height: 200px;
	}

	body.vetka-ui .vk-sp__alert,
	body.vetka-ui .vk-sp__panel {
		padding: 20px 22px;
	}

	body.vetka-ui .vk-sp__panel--doc {
		padding: 22px 22px;
	}

	/* Pasek nagłówka karty modułu zawija: tag schodzi pod tytuł, a numer
	   zostaje przy nim w pierwszym wierszu. `flex-basis: 100%` na tagu
	   wymusza złamanie, bo sam `flex-wrap` łamałby dopiero przy braku
	   miejsca.                                                            */
	body.vetka-ui .vk-sp__modul-head {
		flex-wrap: wrap;
		gap: 6px 12px;
		padding: 14px 18px;
	}

	body.vetka-ui .vk-sp__modul-title {
		font-size: 16px;
	}

	body.vetka-ui .vk-sp__modul-tag {
		flex-basis: 100%;
		margin-left: 0;
		white-space: normal;
	}

	body.vetka-ui .vk-sp__modul-body {
		padding: 16px 18px;
		max-width: 100%;
	}

	body.vetka-ui .vk-sp__section .vk-c-accordion__heading {
		padding: 18px 20px;
	}

	body.vetka-ui .vk-sp__section .vk-c-accordion__content {
		padding: 10px 20px 18px;
	}

	/* Ciemny pasek CTA: tekst nad przyciskiem na całą szerokość.          */
	body.vetka-ui .vk-sp__bar-row {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	body.vetka-ui .vk-sp__bar-text {
		flex-direction: column;
		gap: 4px;
	}

	body.vetka-ui .vk-sp__bar-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		margin-left: 0;
		gap: 10px;
	}

	body.vetka-ui .vk-sp .vk-sp__bar-btn {
		justify-content: center;
		width: 100%;
		min-height: 48px;
	}

	body.vetka-ui .vk-sp__term {
		flex-direction: column;
		gap: 2px;
	}

	body.vetka-ui .vk-sp__term-time {
		text-align: left;
	}
}

/* Budżet ruchu biblioteki v2: wyłącznie zmiana koloru w 150 ms, a i ta
   znika przy włączonym ograniczeniu animacji w systemie.                   */
@media (prefers-reduced-motion: reduce) {
	body.vetka-ui .vk-sp * {
		transition-duration: 0s;
	}
}