/*
 * Stopka wg Figmy (patrz --u w tokens.css).
 * Mobile: wszystko wyśrodkowane w kolumnie — logo 108x33, KONTAKT + dwa
 * e-maile, link do Instagrama z ikoną 19x19.
 * Desktop: wiersz 224px — logo 230x70 z lewej, kontakt na środku, Instagram
 * z prawej (ikona 40x40).
 * Wiersz z prawami autorskimi i linkami prawnymi nie występuje w Figmie —
 * zostaje pod spodem, bo linki prawne muszą być dostępne.
 */
.site-footer {
	background-color: var(--color-ink);
	color: var(--color-brand-red);
}

/* Klasa .container zostaje w footer.php, ale jej max-width i padding są tu
   nadpisane (footer.css ładuje się po base.css). */
.site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: none;
	padding: calc(35 * var(--u)) 0 0;
	text-align: center;
}

.site-footer__brand {
	width: calc(108 * var(--u));
}

.site-footer__logo svg {
	width: 100%;
	height: auto;
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: calc(30 * var(--u));
}

.site-footer__contact-title {
	font-size: calc(8 * var(--u));
	font-weight: var(--font-weight-medium);
	line-height: calc(20.25 * var(--u));
	text-transform: uppercase;
}

/* Pozycje menu "Kontakt w stopce" - jak dawne linki e-mail. */
.site-footer__contact-menu {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.site-footer__contact-link,
.site-footer__contact-menu a {
	font-size: calc(8 * var(--u));
	line-height: calc(18 * var(--u));
}

.site-footer__social {
	display: flex;
	align-items: center;
	gap: calc(8 * var(--u));
	margin-top: calc(30 * var(--u));
	margin-bottom: calc(35 * var(--u));
}

.site-footer__social-link {
	font-size: calc(8 * var(--u));
	line-height: calc(19 * var(--u));
}

.site-footer__icon-link {
	display: inline-flex;
	width: calc(19 * var(--u));
	height: calc(19 * var(--u));
}

.site-footer__icon-link svg {
	width: 100%;
	height: 100%;
}

.site-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(4 * var(--u));
	width: 100%;
	padding: 0 calc(17 * var(--u)) calc(16 * var(--u));
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(4 * var(--u)) calc(12 * var(--u));
}

.site-footer__legal-link,
.site-footer__meta {
	font-size: calc(8 * var(--u));
	line-height: calc(12 * var(--u));
	color: var(--color-cream);
	opacity: 0.7;
}

.site-footer__legal-link:hover,
.site-footer__legal-link:focus-visible {
	opacity: 1;
}

@media (min-width: 900px) {
	.site-footer__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: start;
		padding: 0 calc(43 * var(--u)) 0 calc(36 * var(--u));
	}

	/*
	 * Górny rząd ma 224 (Figma) niezależnie od sekcji Kontakt: dawniej wysokość
	 * dawał jej blok (45 + 179), bez niego rząd kurczył się do logo (61 + 70).
	 * Dolny margines logo = 224 - 131, więc dolny rząd zostaje na swoim miejscu.
	 */
	.site-footer__brand {
		width: calc(230 * var(--u));
		margin-top: calc(61 * var(--u));
		margin-bottom: calc(93 * var(--u));
	}

	/* Figma: blok kontaktu jest przesunięty 20px w prawo od osi strony. */
	.site-footer__contact {
		margin-top: calc(45 * var(--u));
		min-height: calc(179 * var(--u));
		transform: translateX(calc(20 * var(--u)));
	}

	.site-footer__contact-title {
		font-size: calc(20 * var(--u));
		line-height: calc(45.68 * var(--u));
	}

	.site-footer__contact-link,
	.site-footer__contact-menu a {
		font-size: calc(20 * var(--u));
		line-height: calc(40 * var(--u));
	}

	/* Stała kolumna: bez sekcji Kontakt (puste menu) social zostaje po prawej. */
	.site-footer__social {
		grid-column: 3;
		justify-self: end;
		gap: calc(16 * var(--u));
		margin-top: calc(78 * var(--u));
		margin-bottom: 0;
	}

	.site-footer__social-link {
		font-size: calc(20 * var(--u));
		line-height: calc(40 * var(--u));
	}

	.site-footer__icon-link {
		width: calc(40 * var(--u));
		height: calc(40 * var(--u));
	}

	.site-footer__bottom {
		grid-column: 1 / -1;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 0 calc(16 * var(--u));
	}

	.site-footer__legal {
		gap: calc(24 * var(--u));
	}

	.site-footer__legal-link,
	.site-footer__meta {
		font-size: calc(12 * var(--u));
		line-height: calc(18 * var(--u));
	}
}