/**
 * MH Rates (Figma "Stay longer, pay less a week"): photo at the left, title, three price
 * tiers and a button at the right. Tablet and phone: photo on top.
 */

.mh-rates__inner {
	display: grid;
	grid-template-columns: minmax(0, 560fr) minmax(0, 576fr);
	column-gap: 64px;
	align-items: center;
}

.mh-rates__media {
	overflow: hidden;
	height: 600px;
	border-radius: var(--mh-radius);
	background: var(--mh-c-line);
}

.mh-rates__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Without a photo the text uses the full width. */
.mh-rates__body:only-child {
	grid-column: 1 / -1;
	max-width: 576px;
}

.mh-rates__text {
	margin-top: 16px;
	color: var(--mh-text);
}

.mh-rates__tiers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 176px));
	gap: 24px;
	margin-top: 32px;
}

.mh-rates__tier {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	min-width: 0;
	padding-top: 16px;
	border-top: 1px solid var(--mh-line);
}

.mh-rates__value {
	margin: 0;
	white-space: nowrap;
}

.mh-rates__label {
	margin-top: 4px;
	color: var(--mh-muted);
}

.mh-rates__actions {
	margin-top: 32px;
}

.mh-rates__button {
	width: 320px;
	max-width: 100%;
}

.mh-rates__text:first-child,
.mh-rates__tiers:first-child,
.mh-rates__actions:first-child {
	margin-top: 0;
}

/* Tablet: photo full width on top, text under it. */
@media (max-width: 1024px) {
	.mh-rates__inner {
		display: block;
	}

	.mh-rates__media {
		height: 420px;
	}

	.mh-rates__body {
		margin-top: 32px;
	}

	.mh-rates__body:only-child {
		margin-top: 0;
		max-width: none;
	}

	.mh-rates__tiers {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Phone: shorter photo, tighter tiers (the figure token drops to 36), full-width button. */
@media (max-width: 767px) {
	.mh-rates__media {
		height: 340px;
	}

	.mh-rates__text {
		font-size: 16px;
		line-height: 24px;
	}

	.mh-rates__tiers {
		gap: 12px;
	}

	.mh-rates__button {
		width: 100%;
	}
}