/* =========================================================================
   VETKA — biblioteka UI v2 · O nas (Klinika 24h)
   =========================================================================
   Odwzorowanie handoffu „O nas (Klinika 24h)", wariant 8a. 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 zdjęć,
   szerokość kolumny portretu).

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

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

body.vetka-ui .vk-on {
	--vk-on-pad:   24px;   /* margines boczny kontenera 1200 px             */
	--vk-on-luka:  12px;   /* odstęp w galerii i w karuzeli lekarzy         */
	--vk-on-widok: 4;      /* ile kart lekarzy mieści się w torze naraz     */
	--vk-on-foto:  4;      /* ile zdjęć wnętrz mieści się w torze naraz     */

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

/* Motyw dokłada do `.page-content` własny padding pionowy; sekcje niosą tu
   swój rytm same — nagłówek ma dostać dokładnie 64 px od paska nawigacji,
   a pasek pilnej pomocy dotykać stopki bez szczeliny.                      */
body.vetka-ui.vk-o-nas-page .page-content {
	padding-block: 0;
}

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

/* --- Wspólne elementy tekstowe ------------------------------------------
   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-on :where(h1, h2, p, ul, ol, li, figure, figcaption, blockquote) {
	margin: 0;
}

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

/* Motyw rysuje przy każdym cytacie ozdobny znak cudzysłowu w tle i obrys
   z lewej. W tym układzie cytat niesie sam krój i wielkość, więc ozdoby
   trzeba zdjąć — inaczej pod tekstem stoi szare „66".                      */
body.vetka-ui .vk-on blockquote {
	padding: 0;
	border: 0;
	background: none;
	quotes: none;
}

body.vetka-ui .vk-on blockquote::before,
body.vetka-ui .vk-on blockquote::after {
	content: none;
	display: none;
}

/* 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-on__eyebrow {
	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-on__h1 {
	max-width: 880px;
	margin-bottom: 16px;
	font-size: clamp(34px, 3.6vw, 52px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--v2-ink);
}

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

body.vetka-ui .vk-on__h2 {
	margin-bottom: 12px;
	font-size: clamp(28px, 2.8vw, 38px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.015em;
	color: var(--v2-ink);
}

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

/* Lead nagłówka strony jest o stopień większy od leadów sekcji — to jedyne
   zdanie, które czyta się przed zejściem w treść.                          */
body.vetka-ui .vk-on__lead--head {
	font-size: 18px;
	line-height: 1.55;
}

/* Siatka na hairline'ach: jedna ramka na całość, a linie wewnątrz rysuje
   1-pikselowa szczelina między komórkami — kontener ma tło w kolorze linii,
   komórki białe. Dzięki temu podział zmienia się razem z liczbą kolumn
   (3 → 1, 4 → 2) i nie wymaga przeliczania `border-left` regułami
   :nth-child() na każdym progu, gdzie łatwo zostawić linię wiszącą przy
   krawędzi. Ten sam zabieg, co w siatce diagnostyki na hubie „Zakres usług".
                                                                            */
body.vetka-ui .vk-on__osie,
body.vetka-ui .vk-on__cechy {
	display: grid;
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r);
	background-color: var(--v2-line);
}

/* =========================================================================
   1. NAGŁÓWEK STRONY
   ========================================================================= */
body.vetka-ui .vk-on__head {
	padding-top: 64px;
}

/* =========================================================================
   2. HISTORIA — trzy komórki na hairline'ach
   ========================================================================= */
body.vetka-ui .vk-on__historia {
	padding-top: 48px;
}

body.vetka-ui .vk-on__osie {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.vetka-ui .vk-on__krok {
	display: flex;
	flex-direction: column;
	padding: 28px 32px;
	background-color: var(--v2-bg);
}

/* Rok jest jedynym akcentem w tej sekcji i jedyną liczbą, która musi stać
   w trzech komórkach na tej samej szerokości — stąd cyfry tabelaryczne.
   „Dziś" idzie wersalikami z CSS-u, żeby czytnik ekranu wymówił słowo,
   a nie ciąg liter.                                                        */
body.vetka-ui .vk-on__krok-rok {
	color: var(--v2-accent);
	font-size: 13px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	line-height: 1.2;
	text-transform: uppercase;
}

body.vetka-ui .vk-on__krok-tytul {
	margin: 10px 0 6px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

body.vetka-ui .vk-on__krok-opis {
	color: var(--v2-ink-3);
	font-size: 14px;
	line-height: 1.55;
}

/* =========================================================================
   3. RODZINNA TRADYCJA — karta z cytatem założycielki
   =========================================================================
   Ten sam wzorzec, co sekcja „O nas" na stronie głównej: portret 440 px
   w stałej kolumnie, treść w kolumnie elastycznej, przegroda hairline'owa
   między nimi.
   ========================================================================= */
body.vetka-ui .vk-on__tradycja {
	padding-top: var(--v2-section);
}

body.vetka-ui .vk-on__tradycja-karta {
	display: grid;
	grid-template-columns: 440px 1fr;
	overflow: hidden;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r);
	background-color: var(--v2-bg-soft);
}

body.vetka-ui .vk-on__tradycja-media {
	display: flex;
}

body.vetka-ui .vk-on__tradycja-img {
	width: 100%;
	height: 100%;
	min-height: 420px;
	border-radius: 0;
	object-fit: cover;
}

body.vetka-ui .vk-on__tradycja-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 56px 64px;
	border-left: 1px solid var(--v2-line);
}

body.vetka-ui .vk-on__tradycja-body .vk-on__eyebrow {
	margin-bottom: 18px;
}

body.vetka-ui .vk-on__cytat {
	max-width: 640px;
	margin-bottom: 20px;
	font-size: clamp(22px, 2vw, 27px);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--v2-ink);
}

body.vetka-ui .vk-on__tradycja-opis {
	max-width: 600px;
	margin-bottom: 14px;
	color: var(--v2-ink-2);
	font-size: 15px;
	line-height: 1.6;
}

/* Akapitów bywa kilka: między nimi wystarczy odstęp międzywierszowy, ale przed
   podpisem musi zostać pełna przerwa sekcyjna.                              */
body.vetka-ui p.vk-on__tradycja-opis:last-of-type {
	margin-bottom: 24px;
}

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

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

body.vetka-ui .vk-on__podpis-rola {
	display: block;
	margin-top: 4px;
	color: var(--v2-ink-3);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* =========================================================================
   4. POZNAJ NASZĄ KLINIKĘ — galeria i cechy lokalu
   ========================================================================= */
body.vetka-ui .vk-on__klinika {
	padding-top: var(--v2-section);
}

body.vetka-ui .vk-on__klinika .vk-on__lead {
	margin-bottom: 28px;
}

/* --- Karuzela wnętrz ----------------------------------------------------
   Nagłówek sekcji i strzałki w jednym rzędzie, jak w sekcji „Zespół" niżej.  */
body.vetka-ui .vk-on__klinika-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: var(--vk-on-luka);
}

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

/* Tor karuzeli: cztery zdjęcia na widok (szerokość liczona jak w torze
   lekarzy — `100%` minus odstępy, podzielone przez liczbę zdjęć). Jedno
   zdjęcie na widok robiło z sekcji pas na pół ekranu. Przewijaniem zajmuje
   się przeglądarka (scroll-snap), skrypt dokłada strzałki, wskaźnik stron
   i przesuwanie samo z siebie.                                             */
body.vetka-ui .vk-on__galeria {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--vk-on-foto) - 1) * var(--vk-on-luka)) / var(--vk-on-foto));
	gap: var(--vk-on-luka);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;

	/* Jak w torze lekarzy: bez zakotwiczenia, bo leniwie doczytywane zdjęcia
	   przesuwałyby tor o kilka pikseli w trakcie oglądania.                 */
	overflow-anchor: none;
}

body.vetka-ui .vk-on__galeria::-webkit-scrollbar {
	display: none;
}

body.vetka-ui .vk-on__foto {
	min-width: 0;
	scroll-snap-align: start;
}

/* Wysokość kadru bierze się z szerokości kolumny: przy czterech zdjęciach
   na widok kolumna ma jakieś 270 px, więc 200 px wysokości trzyma proporcję
   blisko 3:2 oryginałów. Stała, nie `aspect-ratio`: wszystkie kadry w torze
   mają być równej wysokości, niezależnie od proporcji pliku.               */
body.vetka-ui .vk-on__foto-img {
	display: block;
	width: 100%;
	height: 200px;
	border-radius: var(--v2-r-lg);
	object-fit: cover;
}

body.vetka-ui .vk-on__cechy {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 24px;
}

body.vetka-ui .vk-on__cecha {
	display: flex;
	flex-direction: column;
	padding: 20px 24px;
	background-color: var(--v2-bg);
}

body.vetka-ui .vk-on__cecha-tytul {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

/* Długie słowa („niepełnosprawnościami") wyznaczają minimalną szerokość
   komórki, a ta rozpycha jedną kolumnę kosztem drugiej — stąd `minmax(0, 1fr)`
   w siatce i łamanie wyrazu tutaj. Bez tej pary czterokolumnowa siatka cech
   składa się na wąskim ekranie do dwóch kolumn o różnej szerokości.        */
body.vetka-ui .vk-on__cecha-opis {
	margin-top: 4px;
	overflow-wrap: break-word;
	color: var(--v2-ink-3);
	font-size: 13px;
	line-height: 1.5;
}

/* =========================================================================
   5. ZESPÓŁ — karuzela lekarzy
   =========================================================================
   Przewijaniem zajmuje się przeglądarka (`overflow-x` + `scroll-snap`),
   a skrypt dokłada tylko strzałki, wskaźnik stron i klawiaturę. Bez JS-u tor
   nadal przewija się palcem i kółkiem myszy, więc żadna karta nie jest
   nieosiągalna — sterowanie ma w markupie `hidden` i pojawia się dopiero po
   starcie skryptu.
   ========================================================================= */
body.vetka-ui .vk-on__zespol {
	padding-block: var(--v2-section);
}

body.vetka-ui .vk-on__zespol-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 28px;
}

body.vetka-ui .vk-on__zespol-akcje {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
}

body.vetka-ui .vk-on__zespol-cta {
	white-space: nowrap;
}

body.vetka-ui .vk-on__strzalki {
	display: flex;
	gap: 12px;
}

/* Strzałka jest kwadratem 44 × 44 px — tyle, ile wynosi minimalny cel
   dotykowy, więc rozmiar nie jest tu dekoracją.                            */
body.vetka-ui .vk-on__strzalka {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--v2-ink);
	border-radius: var(--v2-r);
	background-color: var(--v2-bg);
	color: var(--v2-ink);
	font-family: var(--v2-font);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--v2-ease), border-color var(--v2-ease), color var(--v2-ease);
}

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

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

/* Strzałka na skraju listy zostaje w układzie, ale traci obrys w czerni —
   znika z niej sygnał „tędy dalej", a wiersz nie skacze.                   */
body.vetka-ui .vk-on__strzalka:disabled {
	border-color: var(--v2-line);
	color: var(--v2-ink-3);
	cursor: default;
}

body.vetka-ui .vk-on__strzalka:disabled:hover {
	background-color: var(--v2-bg);
}

/* Szerokość karty liczona z liczby kart na widok: `100%` toru minus odstępy
   między nimi, podzielone przez liczbę kart. Skrypt mierzy potem faktyczną
   szerokość, więc próg responsywny mieszka wyłącznie tutaj.                */
body.vetka-ui .vk-on__tor {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--vk-on-widok) - 1) * var(--vk-on-luka)) / var(--vk-on-widok));
	gap: var(--vk-on-luka);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;

	/* Bez zakotwiczenia przewijania: karty doczytują zdjęcia leniwie, a każde
	   takie doczytanie potrafi przesunąć tor o kilka pikseli „żeby nic nie
	   uciekło" — na poziomej liście wygląda to jak drgnięcie kart.          */
	overflow-anchor: none;
}

/* Bez `scroll-behavior: smooth`. Budżet ruchu biblioteki v2 dopuszcza tylko
   zmianę koloru w 150 ms, a płynne przewijanie dotyczyłoby też skoku do karty
   wybranej klawiszem Tab. Strzałki przesuwają tor skokiem (patrz
   assets/js/v2/lekarze-karuzela.js).                                        */

body.vetka-ui .vk-on__tor::-webkit-scrollbar {
	display: none;
}

body.vetka-ui .vk-on__lekarz-item {
	min-width: 0;
	scroll-snap-align: start;
}

/* Cała karta jest odnośnikiem — kto klika w zdjęcie, spodziewa się profilu,
   więc celem musi być prostokąt, a nie sam napis.                          */
body.vetka-ui .vk-on__lekarz {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-lg);
	background-color: var(--v2-bg);
	color: var(--v2-ink);
	text-decoration: none;
	transition: background-color var(--v2-ease);
}

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

/* Pierścień focusu jest wewnętrzny: tor przycina to, co wychodzi poza jego
   krawędź, więc zewnętrzny obrys pierwszej i ostatniej karty zniknąłby.    */
body.vetka-ui a.vk-on__lekarz:focus-visible {
	outline: 2px solid var(--v2-accent);
	outline-offset: -2px;
}

body.vetka-ui .vk-on__lekarz-media {
	display: block;
	flex: 0 0 auto;
}

body.vetka-ui .vk-on__lekarz-img {
	display: block;
	width: 100%;
	height: 300px;
	border-radius: 0;
	object-fit: cover;
}

/* Osoba bez wgranego portretu dostaje monogram, nie zdjęcie zastępcze:
   cudza twarz albo grafika rodzajowa w tym miejscu myliłaby czytelnika,
   a pusta ramka rozbijałaby rytm siatki.                                   */
body.vetka-ui .vk-on__lekarz-monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 300px;
	background-color: var(--v2-bg-soft);
	color: var(--v2-ink-3);
	font-size: 40px;
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1;
}

/* Stopka rośnie na resztę wysokości karty, zamiast być dosuwana do jej dołu
   marginesem `auto`. Karty w torze mają jedną wysokość (najwyższa wyrównuje
   resztę), a nazwiska bywają jedno- i dwuwierszowe — przy dosuwaniu do dołu
   hairline nad stopką stawał w każdej karcie na innej wysokości i rząd kart
   robił się poszarpany. Teraz linia stoi zawsze tuż pod zdjęciem, a wolne
   miejsce zostaje pod tekstem.                                             */
body.vetka-ui .vk-on__lekarz-stopka {
	display: block;
	flex: 1 1 auto;
	padding: 18px 20px;
	border-top: 1px solid var(--v2-line);
}

body.vetka-ui .vk-on__lekarz-imie {
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

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

/* Wskaźnik stron. Widoczny pasek ma 24 × 4 px z handoffu, ale przycisk jest
   wysoki na 44 px — pasek siedzi w środku, wyznaczony pionowym paddingiem.
   Bez tego cel dotykowy miałby cztery piksele wysokości.                   */
body.vetka-ui .vk-on__kropki {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 4px;
}

/* `flex: 0 0 auto` nie jest tu domyślne bez powodu: przy jednej karcie na widok
   stron jest tyle, ilu lekarzy, i dwadzieścia parę pasków nie mieści się
   w szerokości telefonu. Bez blokady kurczenia zamieniłyby się w nieczytelne
   drzazgi po kilka pikseli; z nią — zawijają się do drugiego wiersza.      */
body.vetka-ui .vk-on__kropka {
	flex: 0 0 auto;
	width: 24px;
	height: 44px;
	padding: 20px 0;
	border: 0;
	background: none;
	cursor: pointer;
}

body.vetka-ui .vk-on__kropka::before {
	content: "";
	display: block;
	height: 4px;
	border-radius: 2px;
	background-color: var(--v2-line);
	transition: background-color var(--v2-ease);
}

body.vetka-ui .vk-on__kropka.is-active::before {
	background-color: var(--v2-ink);
}

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

/* =========================================================================
   6. 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-on__alert {
	background-color: var(--v2-dark);
	border-bottom: 1px solid var(--v2-line-dark);
}

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

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

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

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

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

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

/* Przycisk bierze geometrię z komponentu `.vk-c-btn--on-dark`; tu tylko te
   dwie miary, którymi handoff różni się od skali komponentu.               */
body.vetka-ui .vk-on .vk-on__alert-btn {
	padding-inline: 20px;
	font-size: 15px;
}

/* =========================================================================
   MOBILE I TABLET
   =========================================================================
   Handoff `design_handoff_mobile` nie ma osobnej klatki dla tego widoku
   (14 sekcji 29a–29n jej nie obejmuje), więc idą tu same wzorce globalne
   z jego README: kontener 40 / 20 px, siatki kart 2–3 kolumny na tablecie
   i jedna na mobile'u, CTA na całą szerokość, ciemny pasek CTA w słupku.
   Progi te same, co wszędzie: ≤1024 px tablet, ≤640 px mobile.
   ========================================================================= */
@media (max-width: 1024px) {
	body.vetka-ui .vk-on {
		--vk-on-pad:   40px;
		--vk-on-widok: 2;      /* karty lekarzy widoczne w torze naraz      */
		--vk-on-foto:  3;      /* zdjęcia wnętrz widoczne w torze naraz     */
	}

	body.vetka-ui .vk-on__head {
		padding-top: 40px;
	}

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

	body.vetka-ui .vk-on__tradycja,
	body.vetka-ui .vk-on__klinika {
		padding-top: var(--v2-section-sm);
	}

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

	body.vetka-ui .vk-on__tradycja-karta {
		grid-template-columns: 1fr;
	}

	/* Przegroda pionowa musiałaby wisieć w powietrzu obok treści, gdy
	   kolumny ustawią się jedna pod drugą — zamienia się w poziomą.       */
	body.vetka-ui .vk-on__tradycja-body {
		padding: 32px var(--vk-on-pad);
		border-left: 0;
		border-top: 1px solid var(--v2-line);
	}

	body.vetka-ui .vk-on__tradycja-img {
		min-height: 320px;
	}

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

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

	body.vetka-ui .vk-on__alert-actions {
		margin-left: 0;
	}
}

@media (max-width: 640px) {
	body.vetka-ui .vk-on {
		--vk-on-pad:   20px;
		--vk-on-widok: 1;
		--vk-on-foto:  2;
	}

	body.vetka-ui .vk-on__head {
		padding-top: 28px;
	}

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

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

	body.vetka-ui .vk-on__osie,
	body.vetka-ui .vk-on__cechy {
		grid-template-columns: 1fr;
	}

	body.vetka-ui .vk-on__krok,
	body.vetka-ui .vk-on__cecha {
		padding: 20px 22px;
	}

	/* Na telefonie strzałki schodzą pod nagłówek, a nie stoją obok niego —
	   obok zostawałyby tytułowi jakieś sto pikseli.                       */
	body.vetka-ui .vk-on__klinika-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	body.vetka-ui .vk-on__foto-img {
		height: 140px;
	}

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

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

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

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

/* Budżet ruchu biblioteki v2: wyłącznie zmiana koloru w 150 ms, a i ta znika
   przy włączonym ograniczeniu animacji w systemie. Przewijania nie ma tu co
   wyłączać — ani tor lekarzy, ani galeria nie animują skoku.               */
@media (prefers-reduced-motion: reduce) {
	body.vetka-ui .vk-on *,
	body.vetka-ui .vk-on *::before,
	body.vetka-ui .vk-on *::after {
		transition-duration: 0s;
		animation-duration: 0s;
	}
}