/**
 * c-footer - contact & footer (Bricks footer template, site-wide, #kontakt)
 * =========================================================================
 *   .c-footer                  wrapper; wave edge on top, glow on the right
 *     .c-footer__inner         content box
 *       .c-footer__top         brand (logo + claim) | address pill (maps link)
 *       .c-footer__cards       one .c-footer-card per practice
 *       .c-footer__bottom      copyright | legal links
 *
 * The footer slides up by --c-footer-wave-h under the last section, and the
 * wave IS the edge between the two: above the curve the section shows
 * through, below it the footer colour starts. The wave is a CSS mask filled
 * with palette colours (not an SVG file with fixed colours), so a re-skin
 * recolours it:
 *   ::before   the area below the curve, in the footer's top colour
 *   ::after    the thin teal line along the curve
 * The last .c-practice keeps its controls clear of it (c-practice.css).
 * The page before the footer must reserve that much room at its end.
 *
 * Built from the Claude Design canvas (Main footer + M-Footer), 2026-10-20.
 */

.c-footer {
	--c-footer-top: #F1EAE0;
	position: relative;
	z-index: 1;
	overflow: hidden;
	margin-top: calc(-1 * var(--c-footer-wave-h));
	padding-top: var(--c-footer-wave-h);
	/* the footer colour starts below the wave strip; the strip itself is ::before */
	background: linear-gradient(180deg, var(--c-footer-top) 0%, #E6EFEA 100%) no-repeat 0 var(--c-footer-wave-h) / 100% calc(100% - var(--c-footer-wave-h));
	color: var(--ink);
}

/* shared with c-practice.css (the last section keeps clear of the wave) */
:root {
	--c-footer-wave-h: 12rem;
}

@media (max-width: 767px) {
	:root {
		--c-footer-wave-h: 8rem;
	}
}

.c-footer::before,
.c-footer::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--c-footer-wave-h);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
}

.c-footer::before {
	background: var(--c-footer-top);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 92C110 64 230 30 380 26 560 22 700 74 920 92c190 16 360-8 520-54V120H0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 92C110 64 230 30 380 26 560 22 700 74 920 92c190 16 360-8 520-54V120H0z'/%3E%3C/svg%3E");
}

.c-footer::after {
	background: color-mix(in srgb, var(--tertiary, #0B8C8F) 25%, transparent);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 92c110-28 230-62 380-66 180-4 320 48 540 66 190 16 360-8 520-54' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 92c110-28 230-62 380-66 180-4 320 48 540 66 190 16 360-8 520-54' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}

.c-footer__glow {
	position: absolute;
	right: -18rem;
	top: 12rem;
	width: 62rem;
	height: 62rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(140, 192, 222, 0.35), rgba(140, 192, 222, 0) 65%);
	filter: blur(20px);
	pointer-events: none;
}

.c-footer__inner {
	position: relative;
	width: min(100% - 2 * var(--content-gutter, 2.4rem), var(--content-width, 129.6rem));
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 4.8rem;
}

/* ---------- top: brand + address ---------- */
.c-footer__top {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2.4rem;
}

.c-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 1.8rem;
}

.c-footer__logo {
	display: block;
	height: 4.4rem;
	width: auto;
	align-self: flex-start;
}

.c-footer__claim {
	margin: 0;
	max-width: 56rem;
	font-family: var(--font-heading);
	font-size: clamp(2.8rem, 2.4rem + 0.6vw, 3rem);
	line-height: 1.2;
}

.c-footer__address {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	min-height: 4.8rem;
	padding: 1.4rem 2rem;
	border-radius: var(--radius-full, 999px);
	background: rgba(255, 255, 255, 0.6);
	color: var(--ink-muted);
	font-size: 1.6rem;
	text-decoration: none;
	transition: background-color 0.3s;
}

.c-footer__address:hover {
	background: rgba(255, 255, 255, 0.9);
}

.c-footer__address-icon {
	display: block;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	color: var(--tertiary);
}

/* ---------- practice cards ---------- */
.c-footer__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
	gap: 1.6rem;
}

.c-footer-card {
	display: flex;
	flex-direction: column;
	gap: 1.8rem;
	padding: 2.8rem;
	border-radius: var(--radius-xl, 3.2rem);
	background: rgba(255, 255, 255, 0.62);
	border: 1px solid var(--glass-border);
}

.c-footer-card__logo {
	display: block;
	height: auto;
	max-height: 5.4rem;
	width: auto;
	max-width: 100%;
	align-self: flex-start;
}

.c-footer-card__lines {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-size: 1.5rem;
	line-height: 1.5;
	color: var(--ink-muted);
}

.c-footer-card__tel {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.c-footer-card__mail,
.c-footer-card__extra[href] {
	color: var(--secondary-d-1, #0E6F8C);
	overflow-wrap: anywhere;
}

.c-footer-card__tel:hover,
.c-footer-card__mail:hover {
	text-decoration: underline;
}

/* ---------- bottom bar ---------- */
.c-footer__bottom {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
	padding: 2.6rem 0 3.2rem;
	border-top: 1px solid rgba(27, 47, 69, 0.12);
	font-size: 1.4rem;
	color: var(--grey3, #4F6275);
}

.c-footer__legal {
	display: flex;
	flex-direction: row;
	gap: 2.4rem;
}

.c-footer__legal-link {
	color: var(--ink);
	text-decoration: none;
}

.c-footer__legal-link:hover {
	text-decoration: underline;
}

.c-footer a:focus-visible {
	outline: 2px solid var(--tertiary);
	outline-offset: 3px;
	border-radius: 0.4rem;
}

/* ---------- phone (<= 767px) ---------- */
@media (max-width: 767px) {
	.c-footer {
		padding-top: calc(var(--c-footer-wave-h) + 0.4rem);
	}

	.c-footer__glow {
		right: -20rem;
		top: 26rem;
		width: 44rem;
		height: 44rem;
	}

	.c-footer__inner {
		width: calc(100% - 3.2rem);
		gap: 2.8rem;
	}

	.c-footer__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.6rem;
		padding: 0 0.6rem;
	}

	.c-footer__brand {
		gap: 1.6rem;
	}

	.c-footer__logo {
		height: 3.2rem;
	}

	.c-footer__address {
		min-height: 4.8rem;
		padding: 0 1.8rem;
		background: rgba(255, 255, 255, 0.65);
		color: var(--ink);
		font-size: 1.5rem;
	}

	.c-footer__address-icon {
		width: 1.8rem;
		height: 1.8rem;
	}

	.c-footer__cards {
		gap: 1.2rem;
	}

	.c-footer-card {
		gap: 1.4rem;
		padding: 2.2rem;
		border-radius: 2.8rem;
		background: rgba(255, 255, 255, 0.65);
	}

	.c-footer-card__logo {
		max-height: 4.2rem;
	}

	.c-footer-card__lines {
		gap: 0.4rem;
	}

	/* every line becomes a comfortable tap target */
	.c-footer-card__lines > * {
		padding: 0.4rem 0;
	}

	.c-footer-card__address {
		display: none; /* same address as above, once is enough on a phone */
	}

	.c-footer__bottom {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 1.4rem;
		padding: 2.2rem 0.6rem 3.2rem;
	}

	.c-footer__legal-link {
		padding: 0.6rem 0;
	}
}