.footer {
	padding: 24px 0;
}

/* On workshop pages, the tabs pattern always ends with a beige break-out "Footer" section directly above the site footer — tint the footer to match. On a single blog post with a visible comments panel, do the same. Either way, only the footer is tinted — the rest of the page background is unaffected */
body.has-workshop-footer-breakout .footer,
body.has-comments-panel .footer {
	--page-background-color: var(--wp--preset--color--neutral-500);
	background-color: var(--page-background-color);
}

.wp-block-group.footer__inner {
	position: relative;
	padding-top: 50px;
	padding-right: 35px;
	padding-bottom: 35px;
	padding-left: 35px;
	border-bottom-left-radius: 24px;
	border-top-left-radius: 24px;
}

@media (max-width: 600px) {
	.footer__inner .footer__final-row {
		margin-bottom: 75px;
	}
}

.footer__columns {
	width: 100%;
}

.footer__column {
	width: 100%;
}

@media (min-width: 601px) {
	.footer__column {
		width: 25%;
		max-width: 308px;
		gap: 0;
	}
}

.footer__column .footer__phone {
	margin-bottom: 20px;
}

.footer__logo {
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: var(--page-background-color, var(--wp--preset--color--white));
	color: var(--wp--preset--color--neutral-900);
	padding: 24px 24px 0 0;
}

/* Newsletter / CTA band that sits above the dark footer inner */
.wp-block-group.footer__newsletter {
	padding: 40px 35px 0;
	border-top-left-radius: 20px;
}

.footer__newsletter-image {
	flex-shrink: 0;
	padding: 0;
	line-height: 0;
}

.footer__newsletter-image img {
	display: block;
}

.footer__newsletter-image .wp-block-image {
	margin: 0;
}

.footer__newsletter-image .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Remove top-left radius when the newsletter band sits directly above the dark footer inner */
.footer--with-newsletter .footer__inner {
	border-top-left-radius: 0;
}

.footer__logo::before {
	content: '';
	position: absolute;
	left: -49px;
	top: 0;
	width: 50px;
	height: 77px;
	background: var(--page-background-color, var(--wp--preset--color--white));
	clip-path: path('M 50 0 C 42 0 33 7 31 17 L 15 62 C 13 70 6 77 0 77 L 50 77 Z');
}