/**
 * MH Apartment comparison (mh-compare).
 * Figma: Apartments "Photo-led apartment comparison". Padding 72, 1312 container,
 * three equal columns (gap 24), photo 421 × 330 without radius, five ruled rows.
 * Rows line up across columns through subgrid (each column spans 10 grid rows).
 * Phone: apartments stack, photo 350 × 280, 20 between apartments.
 */

.mh-compare.mh-pad {
	padding-top: var(--mh-pad-t, 72px);
	padding-bottom: var(--mh-pad-b, 72px);
}

.mh-compare .mh-heading {
	margin-bottom: 32px;
}

.mh-compare__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 0;
}

.mh-compare__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

@supports (grid-template-rows: subgrid) {
	.mh-compare__item {
		display: grid;
		grid-row: span 10;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	/* Space between rows of apartments when there are more than three. */
	.mh-compare__item:nth-child(n + 4) .mh-compare__media {
		margin-top: 48px;
	}
}

.mh-compare__media {
	height: 330px;
	overflow: hidden;
	background: var(--mh-c-line);
}

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

.mh .mh-compare__name {
	margin: 16px 0;
}

.mh .mh-compare__row {
	margin: 0;
	padding: 16px 0;
	border-top: 1px solid var(--mh-line);
}

.mh .mh-compare__row:nth-child(7) {
	border-bottom: 1px solid var(--mh-line);
}

.mh-compare__label {
	color: var(--mh-muted);
}

.mh .mh-compare__value {
	margin: 4px 0 0;
	color: var(--mh-text);
	font-size: 16px;
	line-height: 24px;
}

.mh .mh-compare__price {
	margin-top: 16px;
}

.mh .mh-compare__note {
	margin-top: 16px;
	color: var(--mh-muted);
	font-size: var(--mh-fs-small);
	line-height: var(--mh-lh-small);
}

.mh-compare__action {
	margin-top: 16px;
	align-self: end;
}

/* Flex fallback: keep the buttons on one line at the bottom. */
@supports not (grid-template-rows: subgrid) {
	.mh-compare__action {
		margin-top: auto;
		padding-top: 16px;
	}
}

@media (max-width: 1024px) {
	.mh-compare__media {
		height: 220px;
	}
}

@media (max-width: 767px) {
	.mh-compare.mh-pad {
		padding-top: var(--mh-pad-t, 56px);
		padding-bottom: var(--mh-pad-b, 56px);
	}

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

	.mh-compare__item,
	.mh-compare__item:nth-child(n) {
		display: flex;
		flex-direction: column;
		grid-row: auto;
	}

	.mh-compare__item + .mh-compare__item {
		margin-top: 20px;
	}

	.mh-compare__item:nth-child(n + 4) .mh-compare__media {
		margin-top: 0;
	}

	.mh-compare__media {
		height: 280px;
	}

	.mh-compare__action {
		margin-top: 16px;
		padding-top: 0;
	}
}

/* Figma: the eyebrow is blue on desktop and tablet, muted on phones. */
@media (min-width: 768px) {
	.mh-compare .mh-eyebrow {
		color: var(--mh-accent);
	}
}