/* ==========================================================================
   Contact — Split hero
   ========================================================================== */

body:has(.ut-contact) {
	background-color: var(--wp--preset--color--warm);
}

.ut-contact-hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: clamp(0.75rem, 1.2vw, 1.2rem);
	padding-top: var(--ut-space-xs);
	/* padding-bottom: clamp(0.9rem, 1.5vw, 1.5rem); */
}

.ut-contact-hero__block {
	position: relative;
	isolation: isolate;
	background-color: var(--wp--preset--color--accent);
	/* display: flex; */
	padding: var(--ut-space-md) var(--ut-space-md);
	min-height: 70vh;
	/* border: 1px solid rgba( 255, 255, 255, 0.18 ); */
}

.ut-contact-hero__block--left {
	align-items: flex-start;
	justify-content: center;
}

.ut-contact-hero__block--right {
	align-items: flex-start;
	justify-content: center;
}

.ut-contact-hero__gap {
	width: clamp(2.5rem, 18vw, 14rem);
	/* border-top: 1px solid rgba( 26, 26, 26, 0.25 ); */
	/* border-bottom: 1px solid rgba( 26, 26, 26, 0.25 ); */
	background-color: var(--wp--preset--color--warm);
	position: relative;
}


body:not(.ut-can-edit) .ut-contact-hero__word {
	display: block;
	width: 100%;
	max-width: 100%;
	line-height: 0;
	opacity: 0;
	will-change: transform, opacity;
}

body:not(.ut-can-edit) .ut-contact-hero__word-svg {
	display: block;
	width: 100%;
	height: auto;
}


.ut-visible .ut-contact-hero__block--left .ut-contact-hero__word {
	animation: ut-contact-word-in-left 1.2s var(--ut-ease-out-expo) 0.15s forwards;
}

.ut-visible .ut-contact-hero__block--right .ut-contact-hero__word {
	animation: ut-contact-word-in-right 1.2s var(--ut-ease-out-expo) 0.4s forwards;
}

/* ==========================================================================
   Contact — Body text
   ========================================================================== */

.ut-contact-body {
	padding-top: 0;
	padding-bottom: 0;
}

.ut-contact-body__inner {
	position: relative;
	isolation: isolate;
	background-color: var(--wp--preset--color--accent);
	padding: calc(2 * var(--ut-gutter)) calc(2 * var(--ut-gutter)) calc(4 * var(--ut-gutter));
	/* border: 1px solid rgba( 255, 255, 255, 0.16 ); */
}

.ut-contact-body__text {
	margin: 0;
	max-width: 22em;
	font-size: var(--ut-display-size);
	line-height: var(--ut-h2-line-height);
	overflow-wrap: break-word;
	word-break: break-word;
}

.ut-contact-body__image {
	margin: 0;
	margin-top: calc(2 * var(--ut-gutter));
	overflow: hidden;
}

.ut-contact-body__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 60em) {
	.ut-contact-body__inner {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: start;
		gap: calc(2 * var(--ut-gutter));
	}

	.ut-contact-body__inner {
		padding-bottom: 16rem;
	}

	.ut-contact-body__image {
		align-self: stretch;
		min-height: 100%;
		max-width: 30rem;
		margin-top: -20rem;
	}
}

.ut-contact-body__text a {
	color: var(--wp--preset--color--foreground);
	text-decoration: underline;
}


/* --- Contact page footer (keep green background, default content/layout) --- */

body:has(.ut-contact) .ut-footer {
	background-color: var(--wp--preset--color--accent);
	margin-top: 0;
	margin-left: var(--ut-gutter);
	margin-right: var(--ut-gutter);
	margin-bottom: var(--ut-gutter);
	padding-left: calc(2 * var(--ut-gutter));
	padding-right: calc(2 * var(--ut-gutter));
}

body:has(.ut-contact) .ut-footer .ut-footer__sub {
	border-top-color: var(--wp--preset--color--foreground);
}