/* Site footer */

.site-footer {
	position: relative;
	overflow: hidden;
	background: var(--color-primary);
	color: var(--color-neutral-2);
}

/*
 * Figma I196:782;258:2854 — a darker swoosh whose fill occupies the LOWER part of
 * the footer, sweeping up across the copyright rule.
 *
 * Figma places the 1440x510 artwork flipped vertically and scaled to 0.902, with
 * its (flipped) bottom edge 136px below the footer: solving the placement from
 * the rendered edges gives y_footer = 809 - 0.902 * y_art. The flip is baked into
 * the SVG file, and the box is anchored to the bottom so a taller mobile footer
 * keeps the swoosh at its foot instead of stranding it mid-column.
 */
.site-footer__wave {
	position: absolute;
	bottom: -136px;
	left: 0;
	width: 100%;
	height: 460px;
	pointer-events: none;
}

.site-footer__top,
.site-footer__bottom,
.site-footer__wordmark { position: relative; }

.site-footer__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	max-width: var(--container);
	margin: 0 auto;
	padding: 60px var(--gutter-mobile);
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.site-footer__brand { gap: 31px; }

.site-footer__logo img { width: 111.368px; height: 23px; }

.site-footer__tagline {
	margin-top: 20px;
	color: var(--color-neutral-2);
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: -0.24px;
}

.site-footer__socials {
	display: flex;
	gap: var(--space-3);
}

.site-footer__social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	border-radius: 22.5px;
	background: #223256;
	transition: background-color .2s ease;
}

/*
 * Figma 113:2018 — each glyph keeps its own geometry inside a 21px box
 * (Instagram 15x15, Facebook 8.83x17, YouTube 19x13.24). Forcing them square
 * stretches the narrow ones.
 */
.site-footer__social img {
	width: auto;
	height: auto;
	max-width: 21px;
	max-height: 21px;
}

.site-footer__social:hover { background: #2c406f; }

.site-footer__heading {
	color: var(--color-neutral-4);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--btn-ls);
}

.site-footer__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.site-footer__list a,
.site-footer__list li {
	color: var(--color-neutral-2);
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: var(--btn-ls);
}

.site-footer__list a:hover { color: var(--color-neutral-7); }

/* Figma sizes the map 209x122 in the desktop column; on mobile it takes the
   full column instead of sitting as a stamp in the corner. */
.site-footer__map {
	width: 100%;
	max-width: 100%;
	height: 150px;
	border-radius: var(--space-2);
	object-fit: cover;
}

/* Bottom bar */

.site-footer__bottom {
	border-top: 1px solid #223256;
	border-bottom: 1px solid #223256;
}

.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	max-width: var(--container);
	margin: 0 auto;
	padding: 13px var(--gutter-mobile);
	color: #3a4b70;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: -0.24px;
}

.site-footer__bottom-inner a {
	color: var(--color-neutral-4);
	font-weight: 600;
	text-decoration: underline;
}

/* Oversized wordmark */

.site-footer__wordmark {
	display: block;
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter-mobile);
}

@media (min-width: 640px) {
	.site-footer__map { width: 209px; height: 122px; }
	.site-footer__top { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	/*
	 * Figma 196:1277 — columns are content-width (165 / 66 / 183 / 210 / 184) with
	 * the 1340px row distributing the remainder as four equal 132px gutters. The
	 * hairlines (Line 20-23) sit at the centre of each gutter, i.e. at 281, 479,
	 * 794 and 1136 of the 1440 frame, so they are painted as background stripes
	 * rather than column borders.
	 */
	.site-footer__top {
		/* Two labels measure a fraction of a pixel over their Figma track in Inter
		   ("Mikroskopicka endodoncie" 183.4 / "Zpracovani osobnich udaju" 184.2),
		   so those tracks may grow to their content instead of wrapping. */
		grid-template-columns: 165px 66px minmax(183px, max-content) 210px minmax(184px, max-content);
		justify-content: space-between;
		gap: 0;
		max-width: calc(var(--container) + var(--gutter) * 2);
		padding: 80px var(--gutter);
		background-image:
			linear-gradient(#223256, #223256),
			linear-gradient(#223256, #223256),
			linear-gradient(#223256, #223256),
			linear-gradient(#223256, #223256);
		background-size: 1px 100%;
		background-position: 19.51% 0, 33.26% 0, 55.14% 0, 78.89% 0;
		background-repeat: no-repeat;
	}
	.site-footer__bottom-inner,
	.site-footer__wordmark {
		max-width: calc(var(--container) + var(--gutter) * 2);
		padding-inline: var(--gutter);
	}
}