/* =========================================================================
   VETKA — biblioteka UI v2 · Grafik pracy
   =========================================================================
   Odwzorowanie handoffu „Grafik pracy”, wariant 27a. Wartości pochodzą
   z tokenów (assets/css/v2/tokens.css); liczby wpisane wprost to te, które
   w handoffie są miarą jednorazową (rytm sekcji, padding kafla, plakietka
   ikony, promień 12 px).

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

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

body.vetka-ui .vk-gf {
	--vk-gf-pad:  24px;    /* margines boczny kontenera 1200 px              */
	--vk-gf-gap:  16px;    /* przerwa między kaflami — pozioma i pionowa     */

	/* Kolory marek serwisów. To JEDYNE dwa kolory na stronie spoza palety
	   VETKA i jedyne miejsce, w którym są dopuszczone: plakietka ma być
	   rozpoznawalna jako znak Facebooka i Instagrama, a nie jako kafel
	   kliniki. Poza plakietką nie pojawiają się nigdzie.                    */
	--vk-gf-fb:   #1877F2;
	--vk-gf-ig:   linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF);

	/* 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`. Ten sam token co w blogu
	   i galerii.                                                            */
	--vk-gf-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; sekcje niosą tu
   swój rytm same — nagłówek ma dostać dokładnie 64 px od paska nawigacji,
   a ciemny pasek CTA ma dotykać stopki bez szczeliny.                      */
body.vetka-ui.vk-grafik-page .page-content {
	padding-block: 0;
}

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

/* --- Reset odziedziczonych marginesów -----------------------------------
   Zerowanie 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-gf :where(h1, p) {
	margin: 0;
}

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

/* =========================================================================
   1. NAGŁÓWEK STRONY
   =========================================================================
   Hairline pod sekcją idzie przez całą szerokość okna, a nie przez kontener
   1200 px — tak jak w handoffie. Stąd `border-bottom` na sekcji, a nie na
   `.vk-gf__wrap`.
   ========================================================================= */
body.vetka-ui .vk-gf__head {
	border-bottom: 1px solid var(--v2-line);
}

body.vetka-ui .vk-gf__head .vk-gf__wrap {
	padding-block: 64px 56px;
}

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

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

/* Nazwa relacji w leadzie. Wyróżnienie idzie wagą i kolorem tekstu głównego,
   nie akcentem: zielone „Grafik” udawałoby link do czegoś, czego na stronie
   nie ma — relacja żyje wyłącznie w serwisach społecznościowych.           */
body.vetka-ui .vk-gf__lead-strong {
	color: var(--v2-ink);
	font-weight: 600;
}

/* =========================================================================
   2. KAFLE SERWISÓW
   =========================================================================
   Dwie równe kolumny. Kafel jest w całości jednym linkiem, więc `display`
   i wewnętrzny rytm ustawiamy na `<a>`, a nie na opakowaniu.
   ========================================================================= */
body.vetka-ui .vk-gf__socials .vk-gf__wrap {
	padding-block: 48px 32px;
}

body.vetka-ui .vk-gf__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--vk-gf-gap);
}

body.vetka-ui .vk-gf__tile {
	display: block;
	padding: 36px 40px;
	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), border-color var(--v2-ease);
}

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

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

/* --- Plakietka ze znakiem marki ------------------------------------------
   Promień 12 px na 52 px boku — jedyny w systemie stopień poza 4/8/16 px,
   wprost z handoffu. Ma odczytać się jako ikona aplikacji, którą naśladuje.  */
body.vetka-ui .vk-gf__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 18px;
	border-radius: 12px;
	color: var(--v2-on-accent);
}

body.vetka-ui .vk-gf__badge--facebook {
	background-color: var(--vk-gf-fb);
}

body.vetka-ui .vk-gf__badge--instagram {
	background-image: var(--vk-gf-ig);
}

body.vetka-ui .vk-gf__mark {
	display: block;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* Litera „f” jest węższa niż aparat, więc bez tej korekty czytałaby się
   w plakietce jako mniejsza od znaku Instagrama.                           */
body.vetka-ui .vk-gf__badge--facebook .vk-gf__mark {
	width: 26px;
	height: 26px;
}

/* --- Treść kafla --------------------------------------------------------- */
body.vetka-ui .vk-gf__tile-title {
	display: block;
	margin-bottom: 6px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

body.vetka-ui .vk-gf__tile-desc {
	display: block;
	margin-bottom: 20px;
	color: var(--v2-ink-3);
	font-size: 15px;
	line-height: 1.55;
}

/* Etykieta wygląda jak link, ale linkiem jest cały kafel — dlatego `span`,
   nie zagnieżdżony `<a>`.                                                  */
body.vetka-ui .vk-gf__tile-link {
	display: inline-block;
	color: var(--v2-accent);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

/* Strzałka jest ozdobą (`aria-hidden`), więc nie może rozciągać wiersza —
   `nbsp` w markupie trzyma ją przy ostatnim słowie.                        */
body.vetka-ui .vk-gf__arrow {
	white-space: nowrap;
}

/* =========================================================================
   3. NOTA O ZMIANACH
   =========================================================================
   Siatka `16px 1fr`: marker stoi w osobnej kolumnie, żeby przy dwóch liniach
   tekstu został przy pierwszej, a nie wyśrodkował się w bloku.
   ========================================================================= */
body.vetka-ui .vk-gf__note .vk-gf__wrap {
	padding-block: 0 88px;
}

body.vetka-ui .vk-gf__note-card {
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: 16px;
	padding: 24px 30px;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r);
	background-color: var(--v2-bg-soft);
}

body.vetka-ui .vk-gf__note-mark {
	width: 8px;
	height: 8px;
	/* 7 px z handoffu: marker ma wypaść w połowie wysokości pierwszej linii
	   tytułu (16 px × 1,3 ≈ 21 px), a nie przy jej górnej krawędzi.        */
	margin-top: 7px;
	border-radius: 1px;
	background-color: var(--v2-accent);
}

body.vetka-ui .vk-gf__note-title {
	margin-bottom: 5px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

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

/* Numer jest odnośnikiem `tel:`, ale zostaje w kolorze tekstu — ta sama
   zasada, co na stronie kontaktu: gdyby wszystko klikalne było zielone,
   akcent przestałby cokolwiek wyróżniać. Podkreślenie dopiero przy
   najechaniu, żeby dało się poznać, że to cel kliknięcia.                  */
body.vetka-ui .vk-gf__note-tel {
	color: inherit;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--v2-ease);
}

body.vetka-ui .vk-gf__note-tel:hover {
	color: var(--v2-accent-2);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

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

/* =========================================================================
   4. 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 CTA bloga i galerii.
   ========================================================================= */
body.vetka-ui .vk-gf__cta {
	background-color: var(--v2-dark);
	border-bottom: 1px solid var(--v2-line-dark);
}

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

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

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

/* Przycisk bierze geometrię z komponentu `.vk-c-btn--on-dark`; tu tylko te
   cztery miary, którymi handoff różni się od skali komponentu.             */
body.vetka-ui .vk-gf .vk-gf__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 29n. Na tablecie oba kafle stoją
   obok siebie (siatka zostaje dwukolumnowa), na mobile'u schodzą w słupek.
   Ciemny pasek CTA składa się na mobile'u: tekst nad przyciskiem na całą
   szerokość.
   ========================================================================= */
@media (max-width: 1024px) {
	body.vetka-ui .vk-gf {
		--vk-gf-pad: 40px;
		--vk-gf-gap: 12px;
	}

	body.vetka-ui .vk-gf__head .vk-gf__wrap {
		padding-block: 40px 32px;
	}

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

	body.vetka-ui .vk-gf__socials .vk-gf__wrap {
		padding-block: 32px 24px;
	}

	body.vetka-ui .vk-gf__note .vk-gf__wrap {
		padding-block: 0 56px;
	}

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

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

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

	body.vetka-ui .vk-gf__head .vk-gf__wrap {
		padding-block: 28px 24px;
	}

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

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

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

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

	body.vetka-ui .vk-gf .vk-gf__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 poza tym, więc zostaje sam bezpiecznik.              */
@media (prefers-reduced-motion: reduce) {
	body.vetka-ui .vk-gf *,
	body.vetka-ui .vk-gf *::before,
	body.vetka-ui .vk-gf *::after {
		transition-duration: 0s;
		animation-duration: 0s;
	}
}