/**
 * Wave Image & Text — layout; background and text from Core block colors on the section.
 */

.mtt-wave-image-text {
	box-sizing: border-box;
	padding: 65px 0 90px;
}

.mtt-wave-image-text *,
.mtt-wave-image-text *::before,
.mtt-wave-image-text *::after {
	box-sizing: inherit;
}

.mtt-wave-image-text__preview {
	margin: 0;
}

.mtt-wave-image-text__placeholder {
	margin: 0;
	padding: 1rem;
	border: 1px dashed currentColor;
	font-size: 0.9375rem;
}

.mtt-wave-image-text__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 50px;
    max-width: 1125px;
    margin: 0 auto;
}

.mtt-wave-image-text__inner--copy-only {
	min-height: 0;
}

.mtt-wave-image-text__inner--media-only {
	min-height: min(20rem, 70vh);
}

.mtt-wave-image-text__inner--image-left {
	flex-direction: row-reverse;
}

.mtt-wave-image-text__content {
	flex: 1 1 45%;
	min-width: min(100%, 17rem);
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	position: relative;
}

.mtt-wave-image-text__graphic {
    position: absolute;
    z-index: 1;
    right: 24px;
    top: 49px;
    width: 100px;
    pointer-events: none;
}

.mtt-wave-image-text__media--graphic-only {
	min-height: clamp(7rem, 22vw, 11rem);
}

.mtt-wave-image-text__media--graphic-only .mtt-wave-image-text__graphic {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: clamp(4rem, 20vw, 8rem);
}

.mtt-wave-image-text__graphic-img {
	display: block;
	width: 100%;
	height: auto;
}

.mtt-wave-image-text__inner--copy-only .mtt-wave-image-text__content {
	flex: 1 1 100%;
	max-width: 42rem;
}

.mtt-wave-image-text__content-inner {
	width: 100%;
	max-width: 29rem;
	text-align: center;
	position: relative;
}

/* Match blocks/image-copy arc (mtt-image-copy__arc + __arc-svg + __arc-text). */
.mtt-wave-image-text__curved-wrap {
	width: 100%;
	max-width: 17.5rem;
	margin: 0 auto;
	line-height: 0;
}

.mtt-wave-image-text__curved-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.mtt-wave-image-text__curved-text {
	fill: currentColor;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-family: "TT Norms Pro", var(--wp--preset--font-family--tt-norms-pro, sans-serif);
	font-weight: 800;
	font-size: 22px;
}

.mtt-wave-image-text__prose {
    margin: 0;
    width: 100%;
    line-height: 1.55;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.mtt-wave-image-text__prose > *:first-child {
	margin-top: 0;
}

.mtt-wave-image-text__prose > *:last-child {
	margin-bottom: 0;
}

.mtt-wave-image-text__prose h1,
.mtt-wave-image-text__prose h2,
.mtt-wave-image-text__prose h3 {
    margin: 0 0 0;
    text-align: center;
    font-family: "TT Norms Pro Condensed";
    font-size: 50px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
}

.mtt-wave-image-text__prose h4,
.mtt-wave-image-text__prose h5,
.mtt-wave-image-text__prose h6 {
	margin: 0 0 0.5em;
	font-weight: 700;
	line-height: 1.25;
	font-size: clamp(1.125rem, 2vw, 1.35rem);
}

.mtt-wave-image-text__prose p {
    margin: 0 0 0.75em;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
	padding:0 20px;
}

.mtt-wave-image-text__prose ul,
.mtt-wave-image-text__prose ol {
	margin: 0 0 0.75em 1.25em;
	padding: 0;
	text-align: left;
}

.mtt-wave-image-text__prose li {
	margin-bottom: 0.35em;
}

.mtt-wave-image-text__prose a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 0.15em;
}
.mtt-wave-image-text__prose a button {
	color: var(--dark-brown, #5E4234);
	text-align: center;
	font-family: "TT Norms Pro";
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 60px; /* 375% */
	letter-spacing: 2.24px;
	text-transform: uppercase;
	border-radius: 60px;
	border: 2px solid var(--dark-brown, #5E4234);
	display: flex;
	padding: 5px 40px;
	justify-content: center;
	align-items: center;
	gap: 100px;
	-webkit-appearance:none;
	text-decoration:none;
	background:transparent;
	margin: 0 auto;
	transition: all 0.5s;
}
.mtt-wave-image-text__prose a button:hover {
	background:#5E4234;
	color:#fffbeb;
	cursor:pointer;
}
.mtt-wave-image-text__prose a:focus {
	outline: none;
}

.mtt-wave-image-text__prose a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mtt-wave-image-text__media {
	flex: 0 1 50%;
	position:relative;
}

.mtt-wave-image-text__inner--media-only .mtt-wave-image-text__media {
	flex: 1 1 auto;
	max-width: min(100%, 28rem);
}

.mtt-wave-image-text__clip {
	/* Figma node 998:3872 — mask group (SVG as CSS mask-image). */
	--mtt-wit-mask: url("../../assets/images/wave-image-text-mask.svg");
	-webkit-mask-image: var(--mtt-wit-mask);
	mask-image: var(--mtt-wit-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	width: 100%;
	aspect-ratio: 574.964 / 568.372;
	position: relative;
	overflow: hidden;
}

.mtt-wave-image-text__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtt-wave-image-text__media--empty {
	min-height: 12rem;
	border: 1px dashed rgba(128, 128, 128, 0.5);
	background: rgba(0, 0, 0, 0.03);
}

.mtt-wave-image-text__media-placeholder {
	margin: 0;
	padding: 1rem;
	font-size: 0.875rem;
	color: inherit;
	opacity: 0.85;
}
@media (max-width:1170px) {
	.mtt-wave-image-text__inner {
		max-width:1000px;
	}
}

@media (max-width: 768px) {
	.mtt-wave-image-text__inner:not(.mtt-wave-image-text__inner--copy-only) {
		flex-direction: column;
		min-height: 0;
		gap:27px;
	}

	.mtt-wave-image-text__inner--image-left,
	.mtt-wave-image-text__inner--image-right {
		flex-direction: column;
	}

	.mtt-wave-image-text__media {
		order: -1;
		width: 100%;
	}

	.mtt-wave-image-text__content {
		order: 0;
	}

	.mtt-wave-image-text__clip {
		width: min(100%, 20rem);
		margin-inline: auto;
	}
	.mtt-wave-image-text {
		padding:50px 0;
	}
	.mtt-wave-image-text__graphic {
		    top: 0;
    right: 19%;
    width: 70px;
	}
	.mtt-wave-image-text__prose h1, .mtt-wave-image-text__prose h2, .mtt-wave-image-text__prose h3 {
		font-size:40px;
	}
	.mtt-wave-image-text__prose p {
		font-size:17px;
	}
	.mtt-wave-image-text__prose {
		gap:20px;
	}
}
@media (max-width:500px) {
	    .mtt-wave-image-text__graphic {
        top: 0;
        right: 13%;
        width: 70px;
    }
}