/* ==========================================================================
   Contact — the green WhatsApp card, contact details, booking links and the map.
   ========================================================================== */

.mro-contact {
	padding-block: calc(var(--wp--preset--spacing--110) + var(--wp--preset--spacing--50)) var(--wp--preset--spacing--110);
}

.mro-contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	grid-template-areas:
		"card map"
		"details map";
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
	align-items: start;
}

.mro-contact__card {
	grid-area: card;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
	border-radius: 3rem 7rem 3.5rem 8rem / 4rem 5rem 4rem 6rem;
	background: var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--mint-faint);
}

.mro-contact__rings {
	position: absolute;
	z-index: -1;
	right: -18%;
	top: -30%;
	width: 70%;
	animation: mro-spin calc(var(--wp--custom--duration--spin) * 2) linear infinite;
}

.mro-contact__rings path {
	fill: none;
	stroke: var(--wp--preset--color--mint);
	stroke-width: 2;
	opacity: 0.4;
}

.mro-contact .mro-contact__title {
	font-size: var(--wp--preset--font-size--xxxl);
	color: var(--wp--preset--color--base);
	max-width: 10ch;
}

.mro-contact__lead {
	max-width: 40ch;
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--md);
}

.mro-contact__phone {
	margin-top: var(--wp--preset--spacing--40);
}

.mro-contact__phone a {
	color: var(--wp--preset--color--base);
	font-weight: var(--wp--custom--weight--bold);
}

.mro-contact__phone a:hover {
	color: var(--wp--preset--color--mint);
}

.mro-contact__card :focus-visible {
	outline-color: var(--wp--preset--color--base);
}

.mro-contact__details {
	grid-area: details;
}

.mro-details {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.mro-details dt {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-weight: var(--wp--custom--weight--bold);
}

.mro-details dt .mro-icon {
	flex: none;
	color: var(--wp--preset--color--accent-strong);
}

.mro-details dd {
	padding-left: calc(22px + var(--wp--preset--spacing--20));
}

.mro-booking-links {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--stroke--hand) dashed var(--wp--preset--color--line);
}

.mro-booking-links__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 400;
	line-height: var(--wp--custom--leading--body);
	text-transform: lowercase;
	letter-spacing: var(--wp--custom--tracking--display);
	margin-bottom: var(--wp--preset--spacing--20);
}

.mro-booking-links__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

.mro-contact__map {
	grid-area: map;
}

.mro-contact__map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5.4;
	border: 0;
	border-radius: var(--wp--custom--radius--arch);
	box-shadow: var(--wp--preset--shadow--lift);
	background: var(--wp--preset--color--mint-soft);
}

.mro-contact__map figcaption {
	margin-top: var(--wp--preset--spacing--40);
	text-align: center;
	font-weight: var(--wp--custom--weight--bold);
}

@media (max-width: 860px) {
	.mro-contact__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "card" "details" "map";
	}

	.mro-contact__map iframe {
		aspect-ratio: 4 / 4.6;
	}
}

@media (max-width: 640px) {
	.mro-contact__card {
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
		border-radius: 2rem 4rem 2rem 4.5rem / 2.5rem 3rem 2.5rem 3.5rem;
	}

	.mro-booking-links__row .mro-button {
		flex: 1 1 auto;
	}
}