/* =========================================================================
   VETKA — biblioteka UI v2 · Galeria
   =========================================================================
   Odwzorowanie handoffu „Galeria", wariant 26a. Wartości pochodzą z tokenów
   (assets/css/v2/tokens.css); liczby wpisane wprost to te, które w handoffie
   są miarą jednorazową (przerwa mozaiki, padding podpisu, rytm sekcji).

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

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

body.vetka-ui .vk-gal {
	--vk-gal-pad:    24px;     /* margines boczny kontenera 1200 px          */
	--vk-gal-gap:    16px;     /* przerwa mozaiki — pozioma i pionowa        */
	--vk-gal-kol:    3;        /* liczba kolumn mozaiki                      */

	/* 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.     */
	--vk-gal-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-galeria-page .page-content {
	padding-block: 0;
}

/* --- Kontener ----------------------------------------------------------- */
body.vetka-ui .vk-gal__wrap {
	max-width: var(--v2-wrap);
	margin-inline: auto;
	padding-inline: var(--vk-gal-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-gal :where(h1, h2, p, figure, figcaption) {
	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-gal__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-gal__wrap`.
   ========================================================================= */
body.vetka-ui .vk-gal__head {
	border-bottom: 1px solid var(--v2-line);
}

body.vetka-ui .vk-gal__head .vk-gal__wrap {
	padding-block: 64px 40px;
}

body.vetka-ui .vk-gal__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-gal__lead {
	max-width: 600px;
	margin-bottom: 28px;
	color: var(--v2-ink-2);
	font-size: 17px;
	line-height: 1.55;
}

/* --- Pigułki-filtry ------------------------------------------------------ */
body.vetka-ui .vk-gal__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

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

body.vetka-ui .vk-gal__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-gal__pill.is-active,
body.vetka-ui .vk-gal__pill.is-active:hover {
	border-color: var(--v2-ink);
	background-color: var(--v2-ink);
	color: var(--v2-on-accent);
}

/* =========================================================================
   2. MOZAIKA
   =========================================================================
   `columns` zamiast siatki: kafle mają naturalne proporcje kadru i różne
   wysokości, a wiersz siatki wyrównałby je do najwyższego. Kolumny wypełniają
   się po kolei (najpierw pierwsza, potem druga), więc kolejność zdjęć
   w `inc/galeria/data.php` jest przetasowana tak, żeby pionowe i poziome
   kadry rozłożyły się równo.

   Kafel schowany filtrem znika z układu razem ze swoją przerwą, a kolumny
   przelewają się same — to jedyny powód, dla którego filtrowanie w miejscu
   nie wymaga tu ani jednej linii przeliczającej wysokości.
   ========================================================================= */
body.vetka-ui .vk-gal__mosaic .vk-gal__wrap {
	padding-block: 40px 88px;
}

body.vetka-ui .vk-gal__grid {
	columns: var(--vk-gal-kol);
	column-gap: var(--vk-gal-gap);
}

body.vetka-ui .vk-gal__tile {
	display: block;
	/* `break-inside` sam nie wystarcza w WebKicie — bez `overflow: hidden`
	   na kaflu obraz potrafi zostać rozcięty między kolumnami.             */
	break-inside: avoid;
	overflow: hidden;
	margin-bottom: var(--vk-gal-gap);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r);
	background-color: var(--v2-bg);
	color: var(--v2-ink);
	text-decoration: none;
	transition: border-color var(--v2-ease), background-color var(--v2-ease);
}

/* Kafel ma `display:block`, więc samo `[hidden]` (display:none od
   przeglądarki, specyficzność 0,0,0) by przegrało.                         */
body.vetka-ui .vk-gal__tile[hidden] {
	display: none;
}

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

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

/* Ramka kadru istnieje po to, żeby `line-height` linii tekstu nie dokładał
   pod obrazem paska tła — `<img>` jest elementem liniowym.                 */
/* Kafel to samo zdjęcie — podpis pod nim zdjęła decyzja redakcyjna
   (patrz `vetka_gal_kafel()`), więc rama nie ma już sąsiada z hairline'em. */
body.vetka-ui .vk-gal__frame {
	display: block;
	background-color: var(--v2-bg-soft);
}

body.vetka-ui .vk-gal__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

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

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

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

body.vetka-ui .vk-gal__cta-sub {
	color: var(--vk-gal-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-gal .vk-gal__cta-btn {
	min-height: 48px;
	padding-block: 0;
	padding-inline: 24px;
	font-size: 15px;
}

/* =========================================================================
   4. LIGHTBOX
   =========================================================================
   Okno podglądu jest jedynym miejscem w serwisie, w którym treść leży na
   ciemnej płaszczyźnie na całą wysokość okna. Zostaje przy tym samym
   słowniku: hairline, promień 4 px, zero cieni, ruch wyłącznie na kolorze.

   Bez skryptu blok zostaje `hidden` i nie ma go w układzie — kafle są wtedy
   zwykłymi linkami do plików zdjęć.

   UWAGA: skrypt przenosi to okno na koniec <body>, poza `.vk-gal` (patrz
   assets/js/v2/galeria.js — `position: fixed` liczy się od przodka
   z `transform`, a takie opakowania stawia motyw i Elementor). Dlatego
   ŻADNA reguła okna nie może wymagać przodka `.vk-gal`: prefiks kończy się
   na `body.vetka-ui`, co i tak daje (0,2,1) i wygrywa z regułami Kitu
   celującymi w `button` po typie.
   ========================================================================= */
body.vetka-ui .vk-gal__lb {
	position: fixed;
	inset: 0;
	font-family: var(--v2-font);
	z-index: 100000;   /* nad przyklejonym nagłówkiem motywu (z-index 9999)  */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

body.vetka-ui .vk-gal__lb[hidden] {
	display: none;
}

/* Tło nie przewija się pod otwartym oknem. Klasa siedzi na <html>, a nie na
   <body>: iOS przewija ten pierwszy i `overflow` na <body> tam nie działa.  */
html.vk-gal-lb-open,
html.vk-gal-lb-open body {
	overflow: hidden;
}

body.vetka-ui .vk-gal__lb-backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(15, 26, 20, .92);
}

body.vetka-ui .vk-gal__lb-panel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: min(1200px, 100%);
	max-height: 100%;
}

body.vetka-ui .vk-gal__lb-figure {
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* Obraz i podpis razem mieszczą się w oknie: kadr dostaje tyle wysokości,
	   ile zostaje po podpisie, stąd odjęcie w `max-height` niżej.           */
	max-height: 100%;
	overflow: hidden;
	border: 1px solid var(--v2-line-dark);
	border-radius: var(--v2-r);
	background-color: var(--v2-dark);
}

body.vetka-ui .vk-gal__lb-img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: calc(100vh - 48px - 56px);
	margin-inline: auto;
	object-fit: contain;
}

body.vetka-ui .vk-gal__lb-caption {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-top: 1px solid var(--v2-line-dark);
	color: var(--v2-on-accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

body.vetka-ui .vk-gal__lb-licznik {
	flex: 0 0 auto;
	color: var(--v2-on-dark);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

/* --- Przyciski okna ------------------------------------------------------ */
body.vetka-ui .vk-gal__lb-btn,
body.vetka-ui .vk-gal__lb-close {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--v2-line-dark);
	border-radius: var(--v2-r);
	background-color: transparent;
	color: var(--v2-on-accent);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--v2-ease), border-color var(--v2-ease);
}

body.vetka-ui .vk-gal__lb-btn:hover,
body.vetka-ui .vk-gal__lb-close:hover {
	background-color: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .28);
	color: var(--v2-on-accent);
}

body.vetka-ui .vk-gal__lb-btn:focus-visible,
body.vetka-ui .vk-gal__lb-close:focus-visible {
	outline: 2px solid var(--v2-focus);
	outline-offset: 2px;
}

/* Przycisk zamykania stoi w prawym górnym rogu OKNA, nie panelu: wysokie
   zdjęcie sięga górnej krawędzi ekranu, więc przycisk zaczepiony o kadr
   wyszedłby poza widok. Własne tło, bo na szerokim ekranie leży na tle,
   a na wąskim wchodzi na jasny róg zdjęcia.                                */
body.vetka-ui .vk-gal__lb-close {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 1;
	background-color: rgba(15, 26, 20, .72);
	font-size: 24px;
}

/* Jedno zdjęcie w widoku (kategoria z jednym kaflem) — nie ma dokąd
   przewijać, więc strzałki znikają zamiast udawać, że działają.            */
body.vetka-ui .vk-gal__lb-btn[hidden] {
	display: none;
}

/* =========================================================================
   MOBILE I TABLET
   =========================================================================
   Handoff `design_handoff_mobile`, sekcja 29m: „galeria masonry:
   `columns:2` / `columns:3`" — czyli na tablecie zostają trzy kolumny
   (tak jak na desktopie), a dopiero na mobile'u schodzą do dwóch. Jedna
   kolumna nie wchodzi w grę: przy dwóch kadr ma jeszcze proporcje zdjęcia,
   przy jednej robi się z niego pas przez cały ekran.
   ========================================================================= */
@media (max-width: 1024px) {
	body.vetka-ui .vk-gal {
		--vk-gal-pad: 40px;
		--vk-gal-gap: 12px;
	}

	body.vetka-ui .vk-gal__head .vk-gal__wrap {
		padding-block: 40px 28px;
	}

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

	body.vetka-ui .vk-gal__mosaic .vk-gal__wrap {
		padding-block: 28px 56px;
	}

	/* Strzałki schodzą pod kadr: kolumna 44 px z każdej strony zabierałaby
	   zdjęciu sporą część szerokości.                                     */
	body.vetka-ui .vk-gal__lb-panel {
		flex-wrap: wrap;
		justify-content: center;
	}

	body.vetka-ui .vk-gal__lb-figure {
		order: -1;
		flex: 1 0 100%;
	}

	body.vetka-ui .vk-gal__lb-img {
		max-height: calc(100vh - 48px - 56px - 60px);
	}
}

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

	body.vetka-ui .vk-gal__head .vk-gal__wrap {
		padding-block: 28px 24px;
	}

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

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

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

	body.vetka-ui .vk-gal .vk-gal__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 :is(.vk-gal, .vk-gal__lb),
	body.vetka-ui :is(.vk-gal, .vk-gal__lb) *,
	body.vetka-ui :is(.vk-gal, .vk-gal__lb) *::before,
	body.vetka-ui :is(.vk-gal, .vk-gal__lb) *::after {
		transition-duration: 0s;
		animation-duration: 0s;
	}
}