/* CINEVA - Kafelki: pelnoekranowe kafelki ze zdjeciami i paralaksa.
   Zasada strony: kazda wlasciwosc ma !important (wyjatki: zmienne --x oraz wysokosc i przesuniecie
   warstwy .cnv-kf__ruch, ktore ustawia skrypt paralaksy). */

/* Pelna szerokosc ekranu, niezaleznie od tego, w jakiej kolumnie motyw wstawil shortcode
   (motyw ogranicza zwykle tresc do ok. 645 px i dokłada boczne marginesy). Wyższa specyficznosc
   niz regula motywu, wiec wygrywa takze z jego "margin: auto !important". */
section.cnv-kf[data-kf], .cnv-kf {
	display: block !important;
	box-sizing: border-box !important;
	width: 100vw !important;
	max-width: none !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding: 0 !important;
}

.cnv-kf__kafelek {
	--fx: var(--d-fx); --fy: var(--d-fy); --zoom: var(--d-zoom);
	--px: var(--d-px); --py: var(--d-py); --pszer: var(--d-pszer); --pskala: var(--d-pskala);
	--wys: var(--d-wys);
	--b-tytul: 3.6cqw;      /* bazowa wielkosc tytulu = ulamek szerokosci kafelka, dzieki temu podglad w panelu wyglada tak samo jak na stronie */
	--b-opis: 1.45cqw;
	position: relative !important;
	display: block !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	height: calc(var(--wys) * 1vh) !important;
	height: calc(var(--wys) * 1svh) !important;
	min-height: 220px !important;
	overflow: hidden !important;
	isolation: isolate !important;
	background: #0a0a0a !important;
	container-type: inline-size;
}

/* kafelek "dopasowany do zdjecia": wysokosc wynika z proporcji zdjecia przy pelnej szerokosci
   (zdjecia pionowe sa wtedy w calosci widoczne podczas przewijania), z gorna granica --wmax % ekranu */
.cnv-kf__kafelek.cnv-kf--wys-zdj {
	height: auto !important;
	aspect-ratio: var(--ratio) !important;
	max-height: calc(var(--wmax, 260) * 1vh) !important;
	max-height: calc(var(--wmax, 260) * 1svh) !important;
	min-height: 60vh !important;
}

/* kafelek "przesuw": wysokosc taka jak dla zdjec poziomych, a zdjecie (pelna szerokosc, wysokosc wynika z jego proporcji)
   przesuwa sie w nim podczas przewijania strony tak, ze w koncu widac je cale. Klase --przesuw-on dodaje skrypt, tylko gdy
   zdjecie faktycznie jest wyzsze od kafelka (bez skryptu lub przy ograniczonym ruchu kafelek dziala jak zwykly). */
.cnv-kf__kafelek.cnv-kf--przesuw-on .cnv-kf__tlo { display: none !important; }
.cnv-kf__kafelek.cnv-kf--przesuw-on .cnv-kf__foto { object-fit: cover !important; object-position: 50% 50% !important; transform: none !important; }

/* telefon: osobne ustawienia kadru, podpisu i wysokosci */
@media (max-width: 781px) {
	.cnv-kf__kafelek {
		--fx: var(--m-fx); --fy: var(--m-fy); --zoom: var(--m-zoom);
		--px: var(--m-px); --py: var(--m-py); --pszer: var(--m-pszer); --pskala: var(--m-pskala);
		--wys: var(--m-wys);
		--b-tytul: 7.4cqw;
		--b-opis: 3.7cqw;
	}
}
/* ten sam wyglad w podgladzie panelu (klasa nadawana recznie) */
.cnv-kf__kafelek.cnv-kf--tel { --b-tytul: 7.4cqw; --b-opis: 3.7cqw; }

/* warstwa przesuwana przez paralaksę (wysokosc i transform ustawia skrypt, dlatego bez !important) */
.cnv-kf__ruch { position: absolute; left: 0; top: 0; width: 100%; height: 100%; will-change: transform; }

.cnv-kf__foto, .cnv-kf__tlo {
	position: absolute !important;
	left: 0 !important; top: 0 !important;
	width: 100% !important; height: 100% !important;
	min-width: 0 !important; min-height: 0 !important;
	max-width: none !important; max-height: none !important;
	margin: 0 !important; padding: 0 !important; border: 0 !important;
	display: block !important;
	object-fit: cover !important;
	object-position: var(--fx) var(--fy) !important;
	transform: scale(var(--zoom)) !important;
	transform-origin: var(--fx) var(--fy) !important;
	user-select: none !important;
	-webkit-user-drag: none !important;
}

/* "cala fotografia": zdjecie w calosci na rozmytej kopii tego samego zdjecia.
   .cnv-kf__kafelek--cala = zawsze (podglad w panelu), .cnv-kf--cala-d = komputer, .cnv-kf--cala-m = telefon */
.cnv-kf__tlo { display: none !important; }
.cnv-kf__kafelek--cala .cnv-kf__tlo,
.cnv-kf--cala-d .cnv-kf__tlo { display: block !important; transform: scale(1.25) !important; filter: blur(34px) brightness(0.72) !important; transform-origin: center !important; object-position: center !important; }
.cnv-kf__kafelek--cala .cnv-kf__foto,
.cnv-kf--cala-d .cnv-kf__foto { object-fit: contain !important; }
@media (max-width: 781px) {
	.cnv-kf--cala-d:not(.cnv-kf--cala-m) .cnv-kf__tlo { display: none !important; }
	.cnv-kf--cala-d:not(.cnv-kf--cala-m) .cnv-kf__foto { object-fit: cover !important; }
	.cnv-kf--cala-m .cnv-kf__tlo { display: block !important; transform: scale(1.25) !important; filter: blur(34px) brightness(0.72) !important; transform-origin: center !important; object-position: center !important; }
	.cnv-kf--cala-m .cnv-kf__foto { object-fit: contain !important; }
}

.cnv-kf__przyciemnienie { position: absolute !important; inset: 0 !important; background: rgba(0, 0, 0, var(--ciemnosc, 0.25)) !important; pointer-events: none !important; }

.cnv-kf__podpis {
	position: absolute !important;
	left: var(--px) !important; top: var(--py) !important;
	transform: translate(-50%, -50%) !important;
	width: var(--pszer) !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	text-align: var(--pwyr, center) !important;
	color: var(--pkolor, #fff) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: calc(var(--b-tytul) * var(--pskala, 1) * 0.28) !important;
	font-size: 1px !important;
}
.cnv-kf__tytul {
	display: block !important;
	font-size: calc(var(--b-tytul) * var(--pskala, 1)) !important;
	line-height: 1.12 !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em !important;
	overflow-wrap: anywhere !important;
	color: inherit !important;
}
.cnv-kf__opis {
	display: block !important;
	font-size: calc(var(--b-opis) * var(--pskala, 1)) !important;
	line-height: 1.5 !important;
	font-weight: 500 !important;
	opacity: 0.94 !important;
	color: inherit !important;
}
.cnv-kf-wersaliki .cnv-kf__tytul { text-transform: uppercase !important; }
/* punkt zaczepienia napisu: przy wyrównaniu do lewej to jego lewy brzeg, do prawej prawy, na środku środek */
.cnv-kf-wyr-left .cnv-kf__podpis { transform: translate(0, -50%) !important; }
.cnv-kf-wyr-right .cnv-kf__podpis { transform: translate(-100%, -50%) !important; }
.cnv-kf-font-poppins .cnv-kf__tytul, .cnv-kf-font-poppins .cnv-kf__opis { font-family: 'Poppins', var(--kt-font-sf, -apple-system), 'Segoe UI', Arial, sans-serif !important; }
.cnv-kf-font-serif .cnv-kf__tytul, .cnv-kf-font-serif .cnv-kf__opis { font-family: 'Libre Baskerville', Georgia, serif !important; }
.cnv-kf-font-sans .cnv-kf__tytul, .cnv-kf-font-sans .cnv-kf__opis { font-family: 'Manrope', var(--kt-font-sf, -apple-system), 'Segoe UI', Arial, sans-serif !important; }
.cnv-kf-cien .cnv-kf__podpis { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45) !important; }

@media (prefers-reduced-motion: reduce) { .cnv-kf__ruch { transform: none !important; } }