/* ============================================================
   MM Footer — "Get in touch with us" top row.

   Blocksy lays this row out as a CSS grid on the .ct-container
   (--grid-template-columns: 1fr 3fr on desktop, single column on
   mobile), with the contacts column right-aligned. We keep that grid
   and only rebalance the columns + tidy the contact rows.

   NOTE: an earlier version forced "display:flex" with "flex:1 1 280px"
   on the two columns. In the desktop grid that made each column grow to
   ~50% (heading stranded far left, contacts far right with a huge gap);
   once flex-direction turned column on mobile, that 280px basis became a
   280px min-HEIGHT per column, producing the tall empty card. Both are
   gone now — we no longer touch display/flex on the container.
   ============================================================ */

/* Rebalance the grid: heading hugs its own width, contacts fill the
   rest; both vertically centred. */
.ct-footer [data-row="top"] > .ct-container {
	--grid-template-columns: auto 1fr !important;
	align-items: center !important;
}

/* Collapse the stray empty " " paragraph the footer builder leaves
   under the heading (it added dead space below the title). */
.ct-footer [data-column="text"] .entry-content p {
	display: none !important;
}
.ct-footer [data-column="text"] .entry-content h3 {
	margin: 0 !important;
	white-space: nowrap !important;
}

/* Contacts block fills its grid cell so it can right-align on desktop */
.ct-footer [data-column="contacts"] .ct-contact-info {
	width: 100% !important;
}

/* Phone + Email as a neat horizontal row, right-aligned on desktop */
.ct-contact-info ul[data-icons-type="simple"] {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: flex-end !important;
	align-items: center !important;
	gap: 16px 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.ct-contact-info ul[data-icons-type="simple"] li {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Icon bubble */
.ct-contact-info .ct-icon-container {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	background: rgba(228, 31, 33, 0.08) !important;
	color: #E41F21 !important;
}

.ct-contact-info .contact-info {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	text-align: left !important;
}

.ct-contact-info .contact-title {
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	color: #222 !important;
	line-height: 1.3 !important;
}

.ct-contact-info .contact-text,
.ct-contact-info .contact-text a {
	font-size: 0.9rem !important;
	color: #444 !important;
	line-height: 1.3 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}

.ct-contact-info .contact-text a:hover {
	color: #E41F21 !important;
}

/* ── Tablet: keep the two-column row but allow contacts to wrap ── */
@media (max-width: 999.98px) {
	.ct-contact-info ul[data-icons-type="simple"] {
		gap: 14px 28px !important;
	}
}

/* ── Mobile: stack heading then contacts, both left-aligned, compact ── */
@media (max-width: 689.98px) {
	.ct-footer [data-row="top"] > .ct-container {
		--grid-template-columns: initial !important;
		align-items: start !important;
		row-gap: 18px !important;
	}

	.ct-footer [data-column="text"] .entry-content h3 {
		white-space: normal !important;
	}

	.ct-footer [data-column="contacts"] {
		--horizontal-alignment: flex-start !important;
	}

	.ct-contact-info ul[data-icons-type="simple"] {
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		gap: 16px !important;
	}
}