/**
 * Leaware — Footer
 *
 * Odwzorowuje ramki z Figmy: `Footer` (1:1621, desktop 1440 × 326, padding
 * 80/180, rząd z gapem 133) i `FooterBar` (1:1660, 1440 × 48) oraz ich mobilne
 * odpowiedniki (1:1939 — pion, gap 40, padding 60/16; 1:1937).
 *
 * Mobile nie rozciąga kolumn na pełną szerokość: w projekcie zachowują swoje
 * 185 px i stoją do lewej, jedna pod drugą.
 */

.leaware-ft {
	--lw-ft-bg: #ffffff;

	--lw-ft-padding-y: 80px;
	--lw-ft-padding-x: 180px;
	/*
	 * Ramka w Figmie ma itemSpacing 133, ale primaryAxisAlignItems: SPACE_BETWEEN
	 * — Figma ten odstęp wtedy ignoruje i rozkłada kolumny równomiernie (realnie
	 * wychodzi 76 / 75 / 76 px). Tu jest to minimum dla wąskich ekranów.
	 */
	--lw-ft-columns-gap: 24px;

	--lw-ft-brand-width: 299px;
	--lw-ft-brand-gap: 16px;
	--lw-ft-column-width: 185px;
	--lw-ft-column-gap: 32px;
	--lw-ft-links-gap: 12px;

	--lw-ft-tagline-color: #78909c;
	--lw-ft-title-color: #000000;
	--lw-ft-link-color: #000000;
	--lw-ft-link-color-hover: #fec200;

	--lw-ft-social-size: 28px;
	--lw-ft-socials-gap: 11px;

	--lw-ft-bar-height: 48px;

	/*
	 * Poświata jest w projekcie rozmyta na 150 px i wychodzi poza ramkę
	 * (x=950 przy szerokości 633 na kadrze 1440). Przycinamy ją krawędzią
	 * stopki — `clip` zamiast `hidden`, żeby nie tworzyć kontenera przewijania.
	 */
	position: relative;
	overflow-x: clip;
	background-color: var(--lw-ft-bg);
}

/*
 * Stopka ma w projekcie pełną szerokość kadru (1440), a w Elementorze ląduje
 * zwykle w zawężonym kontenerze — biały pas i poświata urywały się wtedy przed
 * krawędzią okna, a treść dostawała 920 px zamiast 1080.
 *
 * Uwaga: `100vw` liczy się razem z paskiem przewijania. Na macOS nakładkowe paski
 * tego nie ruszają, ale w systemach z paskiem zajmującym miejsce stopka wyjdzie
 * o jego szerokość poza okno. Jeśli to zobaczysz, wyłącz ten przełącznik
 * i ustaw kontener Elementora na pełną szerokość — efekt jest ten sam, bez `vw`.
 */
.leaware-ft--full {
	width: 100vw;
	max-width: 100vw;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}

/* --- Część główna -------------------------------------------------------- */

.leaware-ft__main {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--lw-ft-columns-gap);
	padding: var(--lw-ft-padding-y) var(--lw-ft-padding-x);
}

/* Poświata */

/*
 * Geometria i gradient przeniesione z Figmy. Procenty liczone względem ramki
 * stopki (1440 × 326). Krycie warstwy z projektu (0.55 / 0.45) siedzi w kolorach
 * gradientu, bo `opacity` na elemencie przygasiłoby też rozmycie.
 */
.leaware-ft__glow {
	position: absolute;
	z-index: 0;
	border-radius: 500px;
	background: linear-gradient(225deg, rgba(0, 230, 118, 0.2) 5%, rgba(29, 233, 182, 0.4) 100%);
	/* Figma podaje layer blur 150; CSS blur() operuje na sigmie — stąd połowa. */
	filter: blur(75px);
	pointer-events: none;
}

/*
 * Wymiary w pikselach, nie w procentach: w projekcie obie plamy mają te same
 * 633 × 115 i 213 × 237 na desktopie i na mobile — zmienia się tylko położenie.
 * Procenty szerokości sekcji dawały na 390 px plamy trzykrotnie za małe, przez
 * co tło stopki wyglądało na puste.
 */
.leaware-ft__glow--a {
	top: 236px;
	left: var(--lw-ft-glow-a-x, 950px);
	width: 633px;
	height: 115px;
	opacity: 0.55;
}

.leaware-ft__glow--b {
	top: 114px;
	left: var(--lw-ft-glow-b-x, 1370px);
	width: 213px;
	height: 237px;
	opacity: 0.45;
}

/* --- Kolumna z logo ------------------------------------------------------ */

.leaware-ft__brand {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 0 0 var(--lw-ft-brand-width);
	flex-direction: column;
	gap: var(--lw-ft-brand-gap);
	min-width: 0;
}

.leaware-ft__logo {
	display: inline-flex;
	align-self: flex-start;
}

.leaware-ft__logo-img {
	display: block;
	width: auto;
	height: 34px;
}

/* Zakres (0,2,0) — bije globalną typografię z Global Settings Elementora. */
.leaware-ft .leaware-ft__tagline {
	margin: 0;
	color: var(--lw-ft-tagline-color);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

/* --- Kolumny linków ------------------------------------------------------ */

.leaware-ft__column {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 0 0 var(--lw-ft-column-width);
	flex-direction: column;
	gap: var(--lw-ft-column-gap);
	min-width: 0;
}

/*
 * W projekcie tytuły kolumn i linki mają `textCase: UPPER` — w danych są zapisane
 * małymi literami, a Figma renderuje je wersalikami. Opis pod logo i pasek na dole
 * tego nie mają (textCase: None), więc zostają bez zmian.
 */
.leaware-ft .leaware-ft__title {
	margin: 0;
	text-transform: uppercase;
	color: var(--lw-ft-title-color);
	font-size: 16px;
	font-weight: 600;
	line-height: 18px;
}

.leaware-ft__links {
	display: flex;
	flex-direction: column;
	gap: var(--lw-ft-links-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.leaware-ft__links li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.leaware-ft .leaware-ft__link {
	color: var(--lw-ft-link-color);
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	transition: color 200ms ease;
}

.leaware-ft .leaware-ft__link:hover,
.leaware-ft .leaware-ft__link:focus {
	color: var(--lw-ft-link-color-hover);
}

.leaware-ft .leaware-ft__link:focus-visible {
	outline: 2px solid var(--lw-ft-link-color-hover);
	outline-offset: 3px;
}

/* --- Ikony społecznościowe ----------------------------------------------- */

.leaware-ft__socials {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lw-ft-socials-gap);
}

.leaware-ft__social {
	display: inline-flex;
	flex: 0 0 auto;
	width: var(--lw-ft-social-size);
	height: var(--lw-ft-social-size);
	transition: opacity 200ms ease;
}

.leaware-ft__social:hover,
.leaware-ft__social:focus {
	opacity: 0.75;
}

.leaware-ft__social:focus-visible {
	outline: 2px solid var(--lw-ft-link-color-hover);
	outline-offset: 3px;
}

.leaware-ft__social img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --- Pasek na dole ------------------------------------------------------- */

.leaware-ft .leaware-ft__bar {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--lw-ft-bar-height);
	padding: 12px var(--lw-ft-padding-x);
	color: var(--lw-ft-link-color);
	font-size: 10px;
	font-weight: 400;
	line-height: 24px;
	text-align: center;
}

.leaware-ft .leaware-ft__bar a {
	color: inherit;
	text-decoration: underline;
}

/* --- Tablet -------------------------------------------------------------- */

@media (max-width: 1024px) {

	.leaware-ft {
		--lw-ft-padding-x: 40px;
		--lw-ft-columns-gap: 48px;
	}

	.leaware-ft__main {
		flex-wrap: wrap;
	}

	/* Kolumna z logo bierze cały wiersz, listy układają się pod nią. */
	.leaware-ft__brand {
		flex-basis: 100%;
	}
}

/* --- Mobile: wszystko w pionie, do lewej --------------------------------- */

@media (max-width: 767px) {

	.leaware-ft {
		--lw-ft-padding-y: 60px;
		--lw-ft-padding-x: 16px;
		--lw-ft-columns-gap: 40px;
		/* Kadr mobilny: plamy przesunięte w lewo (patrz ramka 1:1939). */
		--lw-ft-glow-a-x: -138px;
		--lw-ft-glow-b-x: 282px;
	}

	.leaware-ft__main {
		flex-direction: column;
	}

	/*
	 * W mobilnej ramce kolumna z logo bierze pełną szerokość treści (328 px),
	 * a listy linków zostają przy swoich 185 px i stoją do lewej.
	 */
	.leaware-ft__brand {
		flex-basis: auto;
		width: 100%;
		max-width: none;
	}

	.leaware-ft__column {
		flex-basis: auto;
		width: 100%;
		max-width: var(--lw-ft-column-width);
	}

	.leaware-ft .leaware-ft__bar {
		padding-right: var(--lw-ft-padding-x);
		padding-left: var(--lw-ft-padding-x);
	}
}

/* --- Dostępność ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.leaware-ft .leaware-ft__link,
	.leaware-ft__social {
		transition-duration: 1ms;
	}
}