/* The Footer Builder's row grid uses an inline style for its column
   count (admin-configurable), which inline styles can't scope to a media
   query. This forces a genuine single-column stack on mobile regardless
   of how many columns are configured for desktop - matching the original
   reference design's intended behavior. */
@media (max-width: 767px) {
	.footer .footer__grid {
		grid-template-columns: 1fr !important;
	}
}

/* Footer social icons: real icon badges in a flex row, not a bulleted
   text list (matches header's icon-based approach). Selector needs to
   beat .footer__grid ul's own flex-direction:column rule, which has
   higher specificity than a single class alone would. */
.footer__grid ul.footer__socials {
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 0;
	margin: 1rem 0 0;
}
.footer__socials li { display: contents; }
.footer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: rgba(255,255,255,0.08);
	color: #fff;
	transition: background-color .25s ease, transform .25s ease;
}
.footer__socials a:hover {
	background: var(--hcw-green);
	color: #050505;
	transform: translateY(-2px);
}
.footer__socials .hcw-btn-icon {
	width: 18px;
	height: 18px;
	background-color: currentColor;
}

/* Explicit safety net: every service tile full-width at tablet and
   below, regardless of its --wide status - the base grid is already
   single-column under 1024px, this just guards against any future
   override reintroducing a narrower grid-column span. */
@media (max-width: 1023px) {
	.service-card,
	.service-card--wide {
		grid-column: 1 / -1 !important;
	}
}