/* ==========================================================================
   Your Host — Dhammika's photo on a watercolour wash, his story and three guest moments.
   ========================================================================== */

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

.mro-host__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: var(--wp--preset--spacing--90);
	align-items: center;
}

.mro-host__media {
	position: relative;
	isolation: isolate;
}

.mro-host__wash {
	position: absolute;
	z-index: -1;
	inset: -10% -14% auto -18%;
	aspect-ratio: 600 / 520;
	background: center / contain no-repeat;
	transform: rotate(160deg);
}

.mro-host__photo {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--wp--custom--radius--arch);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--lift);
}

.mro-host__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mro-to-confirm--tag {
	position: absolute;
	left: 50%;
	bottom: var(--wp--preset--spacing--50);
	transform: translateX(-50%);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--pill);
	white-space: nowrap;
	font-size: var(--wp--preset--font-size--sm);
}

.mro-host__leaf {
	position: absolute;
	right: -2.5rem;
	bottom: -2.5rem;
	width: 7.5rem;
	transform-origin: bottom center;
	animation: mro-sway 7s var(--wp--custom--ease--sway) infinite alternate;
}

.mro-host__copy > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

.mro-host__lead {
	margin-top: var(--wp--preset--spacing--50) !important;
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--weight--medium);
}

.mro-host__subtitle {
	margin-top: var(--wp--preset--spacing--70) !important;
	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);
}

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

.mro-moment {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	max-width: 34rem;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--note);
	background: var(--wp--preset--color--mint-faint);
}

.mro-moment:nth-child(2) {
	margin-left: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--mint-soft);
}

.mro-moment:nth-child(3) {
	margin-left: var(--wp--preset--spacing--40);
}

@media (max-width: 1024px) {
	.mro-host__inner {
		gap: var(--wp--preset--spacing--70);
	}
}

@media (max-width: 860px) {
	.mro-host__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.mro-host__media {
		max-width: 26rem;
		width: 85%;
	}

	.mro-host__leaf {
		right: -1.5rem;
		width: 5.5rem;
	}

	.mro-moment:nth-child(2) {
		margin-left: var(--wp--preset--spacing--50);
	}

	.mro-moment:nth-child(3) {
		margin-left: var(--wp--preset--spacing--20);
	}
}