/* Stopka strony + pływające przyciski social media i "do góry" */

.gn-footer {
	--gn-footer-line: #2f2f2f;

	position: relative;
	padding-top: 70px;
	overflow: hidden;
	background: var(--gn-ink);
	color: var(--gn-cream);
	isolation: isolate;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: url("../../assets/img/footer-bg.webp") center / 100% 100% no-repeat;
		opacity: 0.02;
	}

	& .gn-footer__main {
		position: relative;
		display: grid;
		grid-template-columns: 340px minmax(0, 1fr);
		column-gap: 140px;
		padding-bottom: 158px; /* miejsce na obrys logo nad linią */

		/* Pionowa linia między kolumnami: od 20 px nad treścią do 50 px nad dolną linią */
		&::before {
			content: "";
			position: absolute;
			top: -20px;
			bottom: 50px;
			left: 410px;
			width: 1px;
			background: var(--gn-footer-line);
		}
	}

	& .gn-footer__logo img {
		display: block;
		width: 141.43px;
		height: 36px;
	}

	& .gn-footer__text {
		margin-top: 40px;
		font-size: 14px;
		line-height: 1.6;
	}

	& .gn-footer__tagline {
		margin-top: 10px;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.6;
		color: var(--gn-gold);
	}

	& .gn-footer__contact {
		display: flex;
		flex-direction: column;
		margin-top: 40px;
		padding: 30px;
		border: 1px solid var(--gn-footer-line);
		border-radius: 50px 10px 50px 50px;
	}

	& .gn-footer__contact-title {
		font-weight: 600;
		line-height: 1.6;
		color: var(--gn-gold);
	}

	& .gn-footer__contact-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: 30px;
		padding-left: 1px;

		& a {
			display: flex;
			align-items: center;
			gap: 10px;
			line-height: 1.6;
			transition: color 0.2s var(--gn-ease);

			&:hover {
				color: var(--gn-gold);
			}
		}
	}

	& .gn-footer__contact-icon {
		width: 24px;
		height: 24px;
	}

	& .gn-footer__contact-btn {
		margin-top: 41px;
	}

	& .gn-footer__photo {
		height: 286px;
		margin-top: 40px;
		overflow: hidden;
		border: 1px solid var(--gn-footer-line);
		border-radius: 50px 10px 50px 50px;

		& img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	/* Trzy kolumny po 360 px jak w projekcie; ostatnia kolumna jest węższa (220 px) */
	& .gn-footer__nav {
		width: 1080px;
		max-width: calc(100% + 140px);
	}

	& .gn-footer__groups {
		columns: 3;
		column-gap: 0;
	}

	& .gn-footer__group {
		break-inside: avoid;
		padding-bottom: 15px;
	}

	& .gn-footer__heading {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		font-weight: 600;
		line-height: 1.6;
		color: var(--gn-gold);
	}

	& .gn-footer__links li {
		margin-top: 5px;
	}

	& .gn-footer__link {
		line-height: 1.6;
		color: var(--gn-white);
	}

	& :is(.gn-footer__heading, .gn-footer__link) {
		transition: color 0.2s var(--gn-ease), opacity 0.2s var(--gn-ease);

		&:hover {
			opacity: 0.75;
		}
	}

	& .gn-footer__highlight > ul {
		display: flex;
		flex-direction: column;
		gap: 15px;
		width: 220px;
		margin-top: 41px;
		padding: 20px;
		border: 1px solid var(--gn-gold);
		border-radius: var(--gn-radius-lg);
	}

	& .gn-footer__arrow {
		width: 16px;
		height: 13px;
	}

	/* Obrys logo przycięty dolną linią stopki */
	& .gn-footer__outline {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 943px;
		max-width: 66%;
		height: 171px;
		overflow: hidden;
		pointer-events: none;

		& img {
			display: block;
			width: 100%;
			height: auto;
		}
	}

	& .gn-footer__bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		padding-block: 30px 31px;
		border-top: 1px solid var(--gn-footer-line);
		font-size: 14px;
		line-height: 1.33;
	}

	& .gn-footer__copy {
		font-weight: 600;

		& a {
			color: var(--gn-gold);
		}
	}

	& .gn-footer__slash {
		font-weight: 400;
	}

	& .gn-footer__legal {
		display: flex;

		& li + li::before {
			content: "/";
			padding-inline: 0.3em;
		}

		& a:hover {
			color: var(--gn-gold);
		}
	}

	@media (max-width: 1459px) {
		& .gn-footer__main {
			column-gap: 70px;

			&::before {
				left: 375px;
			}
		}

		& .gn-footer__nav {
			width: auto;
			max-width: none;
		}

		& .gn-footer__groups {
			column-gap: 20px;
		}
	}

	@media (max-width: 1199px) {
		padding-top: 70px;

		& .gn-footer__main {
			grid-template-columns: 1fr;
			row-gap: 40px;
			padding-bottom: 115px;

			&::before {
				display: none;
			}
		}

		& .gn-footer__contact {
			padding-inline: 35px;
		}

		& .gn-footer__contact-btn {
			align-self: stretch;
			font-size: 14px;
		}

		& .gn-footer__photo {
			display: none;
		}

		& .gn-footer__nav {
			margin-top: 40px;
		}

		& .gn-footer__groups {
			columns: 1;
			text-align: center;
		}

		& .gn-footer__group {
			padding-bottom: 10px;
		}

		/* Na wąskich ekranach w stopce tylko usługi i strony główne - bez podstron */
		& .gn-footer__links {
			display: none;
		}

		& .gn-footer__highlight > ul {
			align-items: center;
			width: 100%;
			margin: 10px auto 0;
		}

		& .gn-footer__outline {
			left: 0;
			right: 0;
			width: auto;
			max-width: none;
			height: 75px;
		}

		& .gn-footer__bottom {
			flex-direction: column-reverse;
			gap: 10px;
			padding-block: 20px 20px;
		}
	}
}

/* ---------------------------------------------------------------------------
 * Wysuwane przyciski social media (desktop) i przycisk "do góry"
 * ------------------------------------------------------------------------- */

.gn-social-tabs {
	position: fixed;
	top: 380px;
	right: 0;
	z-index: 800;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;

	& .gn-social-tabs__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 180px;
		height: 50px;
		padding: 15px 20px;
		border-radius: var(--gn-radius-lg);
		background: rgb(255 255 255 / 0.9);
		backdrop-filter: blur(20px);
		box-shadow: var(--gn-shadow);
		font-size: 16px;
		font-weight: 600;
		line-height: 1.33;
		color: var(--gn-ink);
		text-decoration: none;
		transform: translateX(120px);
		transition: transform 0.3s var(--gn-ease);

		&:hover,
		&:focus-visible {
			transform: translateX(-20px);
		}
	}

	& .gn-social-tabs__icon {
		width: 24px;
		height: 24px;
	}

	& .gn-social-tabs__label {
		flex: 1;
		text-align: center;
	}

	@media (max-width: 1199px) {
		display: none;
	}
}

.gn-to-top {
	position: fixed;
	right: 20px;
	bottom: clamp(20px, 100vh - 840px, 240px);
	z-index: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 53px;
	height: 50px;
	border-radius: var(--gn-radius-lg);
	background: rgb(255 255 255 / 0.9);
	backdrop-filter: blur(20px);
	box-shadow: var(--gn-shadow);
	color: var(--gn-ink);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.3s var(--gn-ease), transform 0.3s var(--gn-ease), visibility 0.3s;

	&.is-visible {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	& .gn-to-top__icon {
		width: 13px;
		height: 16px;
	}

	/* W projekcie mobilnym przycisku nie ma - nie zasłania treści na wąskich ekranach */
	@media (max-width: 767px) {
		display: none;
	}
}