/* =========================================================================
   VETKA — biblioteka UI v2 · Blog (lista 25a) + widoki pokrewne
   =========================================================================
   Odwzorowanie handoffu „Blog (lista artykułów)”, wariant 25a. 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 kadrów,
   gutter siatki).

   Plik obsługuje dwie warstwy i granica między nimi jest ostra:

   1. `.vk-bl__*` — lista wpisów i archiwum kategorii na własnych szablonach
      motywu potomnego (home.php, category.php). Pełny układ, bez ani jednej
      reguły celującej w markup motywu nadrzędnego.
   2. Łatki na markup motywu nadrzędnego — archiwa tagów, autora i dat,
      wyniki wyszukiwania, pojedynczy wpis i 404. Tych widoków handoff nie
      obejmuje, więc renderuje je dalej rodzic i wystarcza mu warstwa
      korekt: pasek boczny, pola wyszukiwania, kolumna tekstu wpisu.

   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-bl__x` daje (0,2,1) i wygrywa czysto.
   ========================================================================= */

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

	/* Separator w wierszu meta. Wartość z prototypu, między `--v2-line-2`
	   a `--v2-ink-3`: kropka ma być widoczna obok tekstu w kolorze podpisu,
	   ale nie czytać się jak znak interpunkcyjny.                           */
	--vk-bl-kropka: #C3C7BF;

	/* Jasna zieleń zdania w pasku CTA. Akcent marki (#1B5E43) na ciemnym tle
	   spada poniżej progu czytelności, więc pasek dostaje jaśniejszy stopień
	   tej samej barwy — 7,4:1 na `--v2-dark`.                               */
	--vk-bl-cta-akcent: #8FB99F;

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

/* Motyw dokłada do `.page-content` własny padding pionowy; widok niesie swój
   rytm sam — nagłówek ma dostać dokładnie 64 px od paska nawigacji, a pasek
   CTA ma dotykać stopki bez szczeliny.                                     */
body.vetka-ui.vk-blog-page .page-content {
	padding-block: 0;
}

body.vetka-ui .vk-bl__wrap {
	max-width: var(--v2-wrap);
	margin-inline: auto;
	padding-inline: var(--vk-bl-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-bl :where(h1, h2, h3, p, ol, ul, li) {
	margin: 0;
	padding: 0;
}

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

/* =========================================================================
   1. NAGŁÓWEK STRONY
   =========================================================================
   Padding 64/40 i hairline pod spodem — nagłówek jest osobną płaszczyzną,
   od której odbija się karta wyróżnionego wpisu. Hairline idzie przez całą
   szerokość okna, nie przez kontener.
   ========================================================================= */
body.vetka-ui .vk-bl__head {
	border-bottom: 1px solid var(--v2-line);
}

body.vetka-ui .vk-bl__head .vk-bl__wrap {
	padding-block: 64px 40px;
}

/* 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-bl__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;
}

/* Wyrównanie do dolnej krawędzi: pigułki czytają się wtedy jak przypis do
   nagłówka, a nie jak osobny pasek narzędzi nad listą.                     */
body.vetka-ui .vk-bl__head-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

/* Bez wymuszania jednej linii: w prototypie nagłówek i rząd pigułek dzielą
   szerokość kontenera domyślnym kurczeniem flexa, więc oba zawijają się do
   dwóch wierszy i wyrównują dolną krawędzią. Przy `flex-shrink: 0` H1 zostałby
   w jednej linii, ale pigułki zeszłyby węziej niż w makiecie.              */
body.vetka-ui .vk-bl__h1 {
	max-width: 760px;
	color: var(--v2-ink);
	font-size: clamp(34px, 3.4vw, 48px);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.08;
}

/* --- Pigułki kategorii ---------------------------------------------------
   Ten sam komponent, co filtry listy lekarzy (`.vk-zsp__pill`) — nie alias,
   bo tam pigułka przełącza widok w miejscu, a tutaj jest zwykłym linkiem do
   archiwum. Wspólna jest miara, nie zachowanie.                            */
body.vetka-ui .vk-bl__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 6px;
}

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

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

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

/* =========================================================================
   2. WIERSZ META (wspólny dla obu rodzajów kart)
   =========================================================================
   Kategoria wersalikami w akcencie, kropka 3 px, data. Wersaliki robi CSS,
   nie treść — czytnik ekranu wymawia wtedy słowo, a nie ciąg liter.
   ========================================================================= */
body.vetka-ui .vk-bl__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--v2-ink-3);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .05em;
	line-height: 1.3;
}

body.vetka-ui .vk-bl__kat {
	color: var(--v2-accent);
	text-transform: uppercase;
}

body.vetka-ui .vk-bl__kropka {
	flex: 0 0 auto;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: var(--vk-bl-kropka);
}

/* =========================================================================
   3. KARTA WYRÓŻNIONEGO WPISU (podział 50/50)
   =========================================================================
   Cała karta jest jednym odnośnikiem, więc jej wnętrze to elementy liniowe
   — stąd `display` ustawiany wprost przy każdym z nich.
   ========================================================================= */
body.vetka-ui .vk-bl__featured .vk-bl__wrap {
	padding-block: 48px 0;
}

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

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

/* Obraz leży w tej kolumnie warstwą bezwzględną, a nie w przepływie: inaczej
   o wysokości karty decydowałyby proporcje zdjęcia, a nie kolumna z tekstem.
   Tak jest odwrotnie — wysokość ustala treść (albo `min-height`), a zdjęcie
   dostaje kadrowanie `object-fit: cover` do gotowej ramki.                 */
body.vetka-ui .vk-bl__fmedia {
	position: relative;
	display: block;
	min-height: 380px;
	border-right: 1px solid var(--v2-line);
	background-color: var(--v2-thumb-bg);
}

body.vetka-ui .vk-bl__fmedia .vk-bl__thumb {
	position: absolute;
	inset: 0;
}

body.vetka-ui .vk-bl__fbody {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 52px;
}

body.vetka-ui .vk-bl__ftytul {
	margin: 14px 0 12px;
	color: var(--v2-ink);
	font-size: clamp(26px, 2.4vw, 32px);
	font-weight: 500;
	letter-spacing: -.015em;
	line-height: 1.15;
}

body.vetka-ui .vk-bl__fzajawka {
	margin-bottom: 26px;
	color: var(--v2-ink-2);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}

/* Przycisk bierze geometrię z komponentu `.vk-c-btn--primary`; tutaj tylko te
   trzy miary, którymi handoff różni się od skali komponentu. Jest <span>,
   nie <a> — cała karta jest już odnośnikiem, więc hover musi przychodzić
   z karty, a nie z niego samego.                                           */
body.vetka-ui .vk-bl .vk-bl__btn {
	align-self: flex-start;
	min-height: 48px;
	padding-block: 0;
	padding-inline: 24px;
	font-size: 15px;
}

body.vetka-ui .vk-bl__fcard:hover .vk-bl__btn {
	background-color: var(--v2-accent-2);
	border-color: var(--v2-accent-2);
}

/* =========================================================================
   4. SIATKA WPISÓW
   =========================================================================
   Trzy kolumny, gutter 16 px, 40 px od karty wyróżnionej i 88 px do paska
   CTA. Na stronach dalszych niż pierwsza karty wyróżnionej nie ma, więc
   siatka przejmuje jej odstęp od nagłówka (`--sama`).
   ========================================================================= */
body.vetka-ui .vk-bl__list .vk-bl__wrap {
	padding-block: 40px var(--v2-section);
}

body.vetka-ui .vk-bl__list--sama .vk-bl__wrap {
	padding-block: 48px var(--v2-section);
}

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

body.vetka-ui .vk-bl__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r);
	background-color: var(--v2-bg);
	color: var(--v2-ink);
	text-decoration: none;
	transition: background-color var(--v2-ease);
}

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

body.vetka-ui .vk-bl__media {
	display: block;
	flex: 0 0 auto;
	height: 200px;
	background-color: var(--v2-thumb-bg);
}

body.vetka-ui .vk-bl__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 20px 24px;
	border-top: 1px solid var(--v2-line);
}

body.vetka-ui .vk-bl__tytul {
	margin-top: 10px;
	color: var(--v2-ink);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
}

/* Odnośnik idzie zaraz pod tytułem (14 px z handoffu), a nie jest dosuwany
   do dołu karty: przy różnej długości tytułów stoi w rzędzie na różnych
   wysokościach — dokładnie tak, jak w prototypie.                         */
body.vetka-ui .vk-bl__link {
	margin-top: 14px;
	color: var(--v2-accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

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

/* --- Kadr obrazu ---------------------------------------------------------
   Wspólny dla obu rodzajów kart: wysokość ustala rodzic (`__fmedia`
   min-height 380 px, `__media` 200 px), obraz wypełnia go kadrowaniem.     */
body.vetka-ui .vk-bl__thumb {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
}

/* Wpis bez obrazu wyróżniającego: zostaje sama powierzchnia w kolorze kadru,
   o tej samej wysokości. Pusty <span> nie ma czego rozpychać, stąd jawne
   `min-height` — bez niego karta zapadłaby się o 200 px.                   */
body.vetka-ui .vk-bl__thumb--pusty {
	min-height: 200px;
}

body.vetka-ui .vk-bl__fmedia .vk-bl__thumb--pusty {
	min-height: 380px;
}

/* --- Paginacja -----------------------------------------------------------
   Kwadraty 40×40 px z hairline'em, bieżąca strona wypełniona czernią — tak
   jak wybrana pigułka wyżej. Selektor `.vk-bl__pager .page-numbers` celuje
   w klasy, które nadaje `paginate_links()`, a nie motyw nadrzędny.         */
body.vetka-ui .vk-bl__pager {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 40px;
}

body.vetka-ui .vk-bl__pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 10px;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-lg);
	background-color: var(--v2-bg);
	color: var(--v2-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--v2-ease), border-color var(--v2-ease), color var(--v2-ease);
}

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

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

body.vetka-ui .vk-bl__pager .page-numbers.current {
	border-color: var(--v2-ink);
	background-color: var(--v2-ink);
	color: var(--v2-on-accent);
}

/* Wielokropek między numerami nie jest przyciskiem — traci ramkę i tło.    */
body.vetka-ui .vk-bl__pager .page-numbers.dots {
	border-color: transparent;
	background: none;
	color: var(--v2-ink-3);
}

/* --- Widok bez wpisów ---------------------------------------------------- */
body.vetka-ui .vk-bl__pusto-tytul {
	max-width: var(--v2-measure);
	color: var(--v2-ink);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
}

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

/* =========================================================================
   5. PASEK CTA PRZED STOPKĄ
   =========================================================================
   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 w pasku pilnej pomocy na hubie „Zakres usług”.
   ========================================================================= */
body.vetka-ui .vk-bl__cta {
	background-color: var(--v2-dark);
	border-bottom: 1px solid var(--v2-line-dark);
}

body.vetka-ui .vk-bl__cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 26px;
}

body.vetka-ui .vk-bl__cta-text {
	color: var(--v2-on-accent);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
}

body.vetka-ui .vk-bl__cta-sub {
	color: var(--vk-bl-cta-akcent);
}

/* Przycisk bierze geometrię z komponentu `.vk-c-btn--on-dark`; tu tylko te
   trzy miary, którymi handoff różni się od skali komponentu.               */
body.vetka-ui .vk-bl .vk-bl__cta-btn {
	min-height: 48px;
	padding-block: 0;
	padding-inline: 24px;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
   MOBILE I TABLET
   =========================================================================
   Handoff `design_handoff_mobile`, sekcja 29l. Pigułki schodzą pod H1
   i zawijają (nigdy nie są ucinane), karta wyróżniona przechodzi w jedną
   kolumnę z obrazem nad treścią, siatka wpisów 3 → 2 → 1, ciemny pasek CTA
   składa się na mobile'u w słupek.
   ========================================================================= */
@media (max-width: 1024px) {

	body.vetka-ui .vk-bl {
		--vk-bl-pad: 40px;
	}

	body.vetka-ui .vk-bl__head .vk-bl__wrap {
		padding-block: 40px 32px;
	}

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

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

	body.vetka-ui .vk-bl__filters {
		justify-content: flex-start;
		margin-bottom: 0;
	}

	/* Obraz nad treścią: kolejność w DOM-ie jest już taka, więc wystarczy
	   zdjąć podział na kolumny. Hairline między nimi obraca się razem
	   z układem.                                                            */
	body.vetka-ui .vk-bl__fcard {
		grid-template-columns: 1fr;
	}

	body.vetka-ui .vk-bl__fmedia,
	body.vetka-ui .vk-bl__fmedia .vk-bl__thumb--pusty {
		min-height: 300px;
	}

	body.vetka-ui .vk-bl__fmedia {
		border-right: 0;
		border-bottom: 1px solid var(--v2-line);
	}

	body.vetka-ui .vk-bl__fbody {
		padding: 28px 24px;
	}

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

	/* Cel dotykowy ≥44 px — wzorzec globalny handoffu. Na desktopie
	   kwadraty paginacji mają 40 px i to wystarcza kursorowi.            */
	body.vetka-ui .vk-bl__pager .page-numbers {
		min-width: 44px;
		min-height: 44px;
	}

	body.vetka-ui .vk-bl__media,
	body.vetka-ui .vk-bl__thumb--pusty {
		height: 160px;
		min-height: 160px;
	}

	body.vetka-ui .vk-bl__list .vk-bl__wrap,
	body.vetka-ui .vk-bl__list--sama .vk-bl__wrap {
		padding-block: 32px var(--v2-section-sm);
	}
}

@media (max-width: 640px) {

	body.vetka-ui .vk-bl {
		--vk-bl-pad: 20px;
	}

	body.vetka-ui .vk-bl__head .vk-bl__wrap {
		padding-block: 28px 24px;
	}

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

	body.vetka-ui .vk-bl__featured .vk-bl__wrap {
		padding-block: 20px 0;
	}

	body.vetka-ui .vk-bl__fmedia,
	body.vetka-ui .vk-bl__fmedia .vk-bl__thumb--pusty {
		min-height: 190px;
	}

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

	body.vetka-ui .vk-bl__ftytul {
		font-size: 19px;
		line-height: 1.3;
	}

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

	body.vetka-ui .vk-bl__media,
	body.vetka-ui .vk-bl__thumb--pusty {
		height: 140px;
		min-height: 140px;
	}

	body.vetka-ui .vk-bl__body {
		padding: 14px 16px;
	}

	body.vetka-ui .vk-bl__cta-row {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	body.vetka-ui .vk-bl .vk-bl__cta-btn {
		justify-content: center;
		width: 100%;
	}
}

/* Budżet ruchu biblioteki v2: wyłącznie zmiana koloru w 150 ms, a i ta znika
   przy włączonym ograniczeniu animacji w systemie. Handoff nie przewiduje tu
   ani jednej animacji wejścia, więc zostaje tylko ten bezpiecznik.         */
@media (prefers-reduced-motion: reduce) {
	body.vetka-ui .vk-bl *,
	body.vetka-ui .vk-bl *::before,
	body.vetka-ui .vk-bl *::after {
		transition-duration: 0s;
		animation-duration: 0s;
	}
}

/* =========================================================================
   WIDOKI MOTYWU NADRZĘDNEGO
   =========================================================================
   Poniżej zaczyna się warstwa 2: łatki na markup, którego motyw potomny nie
   przejął — archiwa tagów, autora i dat, wyniki wyszukiwania, pojedynczy
   wpis i 404. Reguły celują w klasy motywu nadrzędnego, więc świadomie NIE
   mają prefiksu `.vk-bl`.
   ========================================================================= */

/* --- Lista wpisów --------------------------------------------------------
   Wpisy rozdziela hairline zamiast odstępu — ten sam zabieg, co w siatkach
   na stronie głównej.                                                      */
body.vetka-ui .blog-post-item,
body.vetka-ui .post-item,
body.vetka-ui article.post {
	padding-bottom: 36px;
	margin-bottom: 36px;
	border-bottom: 1px solid var(--v2-line);
	box-shadow: none;
}

body.vetka-ui article.post:last-of-type {
	border-bottom: 0;
}

body.vetka-ui .post-thumbnail img,
body.vetka-ui article.post img {
	border-radius: var(--v2-r);
}

/* Meta pod tytułem to etykieta, nie zdanie — schodzi do skali podpisów.    */
body.vetka-ui .post-meta,
body.vetka-ui .entry-meta,
body.vetka-ui .post-meta a,
body.vetka-ui .entry-meta a {
	font-size: 14px;
	line-height: 1.5;
	color: var(--v2-ink-3);
}

body.vetka-ui .post-meta a:hover,
body.vetka-ui .entry-meta a:hover {
	color: var(--v2-accent);
}

/* --- Pasek boczny --------------------------------------------------------
   Widgety miały cienie i własne tła. Zostaje jedna powierzchnia z hairline'em. */
body.vetka-ui .sidebar .widget,
body.vetka-ui aside .widget,
body.vetka-ui .widget-area .widget {
	padding: 22px;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r);
	background-color: var(--v2-bg);
	box-shadow: none;
}

body.vetka-ui .widget + .widget {
	margin-top: 20px;
}

body.vetka-ui .widget .widget-title,
body.vetka-ui .widget h2,
body.vetka-ui .widget h3 {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--v2-ink);
}

body.vetka-ui .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.vetka-ui .widget li {
	padding: 9px 0;
	border-top: 1px solid var(--v2-line);
	font-size: 15px;
	line-height: 1.5;
}

body.vetka-ui .widget li:first-child {
	border-top: 0;
	padding-top: 0;
}

/* Podkreślenie każdego odnośnika w pasku bocznym robiło z listy gąszcz —
   wystarczy kolor i zmiana na hover.                                       */
body.vetka-ui .widget a {
	color: var(--v2-ink-2);
	text-decoration: none;
	transition: color var(--v2-ease);
}

body.vetka-ui .widget a:hover {
	color: var(--v2-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Wyszukiwarka --------------------------------------------------------- */
body.vetka-ui .search-form,
body.vetka-ui .wp-block-search__inside-wrapper {
	display: flex;
	gap: 8px;
}

body.vetka-ui .search-field,
body.vetka-ui input[type="search"] {
	min-height: 44px;
	height: auto;
	padding: 11px 14px;
	border: 1px solid var(--v2-line-2);
	border-radius: var(--v2-r);
	background-color: var(--v2-bg);
	font-family: var(--v2-font);
	font-size: 15px;
	color: var(--v2-ink);
	box-shadow: none;
	transition: border-color var(--v2-ease);
}

body.vetka-ui .search-field:focus,
body.vetka-ui input[type="search"]:focus {
	border-color: var(--v2-accent);
	outline: 2px solid var(--v2-accent);
	outline-offset: 2px;
}

body.vetka-ui .search-submit,
body.vetka-ui .wp-block-search__button {
	min-height: 44px;
	padding: 11px 18px;
	border: 1px solid var(--v2-accent);
	border-radius: var(--v2-r);
	background-color: var(--v2-accent);
	color: var(--v2-on-accent);
	font-family: var(--v2-font);
	font-size: 15px;
	font-weight: 600;
	box-shadow: none;
	transition: background-color var(--v2-ease), border-color var(--v2-ease);
}

body.vetka-ui .search-submit:hover,
body.vetka-ui .wp-block-search__button:hover {
	background-color: var(--v2-accent-2);
	border-color: var(--v2-accent-2);
}

/* --- Paginacja ------------------------------------------------------------
   Kwadratowe pola z hairline'em; bieżąca strona wypełniona akcentem.       */
body.vetka-ui .pagination .page-numbers,
body.vetka-ui .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 0 12px;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r);
	background-color: var(--v2-bg);
	color: var(--v2-ink);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	box-shadow: none;
	transition: background-color var(--v2-ease), border-color var(--v2-ease);
}

body.vetka-ui .pagination .page-numbers:hover,
body.vetka-ui .nav-links .page-numbers:hover {
	background-color: var(--v2-bg-soft);
}

body.vetka-ui .pagination .page-numbers.current,
body.vetka-ui .nav-links .page-numbers.current {
	background-color: var(--v2-accent);
	border-color: var(--v2-accent);
	color: var(--v2-on-accent);
}

/* --- Pojedynczy wpis ------------------------------------------------------
   Kolumna tekstu ograniczona do wygodnej długości wiersza.                 */
body.vetka-ui .single-post .entry-content > p,
body.vetka-ui .single-post .entry-content > ul,
body.vetka-ui .single-post .entry-content > ol {
	max-width: var(--v2-measure);
	font-size: 17px;
	line-height: 1.65;
	color: var(--v2-ink-2);
}

body.vetka-ui .single-post .entry-content :is(h2, h3, h4) {
	max-width: var(--v2-measure);
	margin-top: 36px;
	color: var(--v2-ink);
}

body.vetka-ui .single-post .entry-content blockquote {
	max-width: var(--v2-measure);
	margin: 28px 0;
	padding: 4px 0 4px 22px;
	border-left: 2px solid var(--v2-accent);
	border-radius: 0;
	background: none;
	font-size: 19px;
	line-height: 1.5;
	color: var(--v2-ink);
}

body.vetka-ui .single-post .entry-content img {
	border-radius: var(--v2-r);
}

/* Nawigacja między wpisami i sekcja komentarzy.                            */
body.vetka-ui .post-navigation,
body.vetka-ui .comments-area {
	margin-top: 44px;
	padding-top: 32px;
	border-top: 1px solid var(--v2-line);
}

/* --- Brak wyników i 404 ---------------------------------------------------- */
body.vetka-ui .no-results,
body.vetka-ui .error-404 {
	max-width: var(--v2-measure);
	padding: 56px 0;
}

body.vetka-ui .error-404 .page-title,
body.vetka-ui .no-results .page-title {
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--v2-ink);
}