/**
 * Animacja Lottie — kontener i układ nagłówka „O nas".
 *
 * Selektory idą z przedrostkiem `body.vetka-ui`, tak jak reszta warstwy v2 —
 * bez niego przegrywają specyficznością z arkuszem strony.
 *
 * `aspect-ratio` na kontenerze jest obowiązkowe, nie kosmetyczne: animacja
 * wczytuje się leniwie, więc bez zarezerwowanej wysokości treść pod nią
 * przeskoczyłaby w momencie startu — dokładnie ten mechanizm psuje CLS.
 * Proporcja 1385:1088 odpowiada przyciętemu kadrowi ilustracji.
 */

body.vetka-ui .vk-lottie {
	width: 100%;
	aspect-ratio: 1385 / 1088;
	margin-inline: auto;
}

body.vetka-ui .vk-lottie svg {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

/* --- Nagłówek „O nas”: tekst po lewej, ilustracja po prawej ------------- */

body.vetka-ui .vk-on__head--media .vk-on__wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
}

/* Akapit wiodący ma własną szerokość maksymalną w arkuszu strony; w siatce
   kolumna i tak go ogranicza, więc zdejmujemy limit, żeby nie robiła się
   druga, niepotrzebna wąska kolumna wewnątrz pierwszej. */
body.vetka-ui .vk-on__head--media .vk-on__lead--head {
	max-width: none;
}

/* Poniżej 1024 px układ schodzi do jednej kolumny — tak jak reszta strony.
   Ilustracja ląduje pod tekstem i zwęża się, żeby nie spychać treści
   za daleko w dół. */
@media (max-width: 1024px) {
	body.vetka-ui .vk-on__head--media .vk-on__wrap {
		grid-template-columns: minmax(0, 1fr);
	}

	body.vetka-ui .vk-on__head--media .vk-lottie {
		max-width: 360px;
	}
}

@media (max-width: 640px) {
	body.vetka-ui .vk-on__head--media .vk-lottie {
		max-width: 300px;
	}
}

/* --- Strona 404 -------------------------------------------------------- */

body.vetka-ui .vk-tx--404 .vk-lottie {
	max-width: 380px;
	margin-block: clamp(16px, 4vw, 32px);
}

@media (max-width: 640px) {
	body.vetka-ui .vk-tx--404 .vk-lottie {
		max-width: 280px;
	}
}