/**
 * Casa Terra Villa comparison (Figma Villas "Browse accommodations" 7:784): a photo band (640 /
 * 520 / 440) under a 32% earth overlay with the title near its foot, the booking bar (plain
 * look) half over the band's lower edge, then one row per villa: photo 792 and a 360 summary
 * on desktop (every second row mirrored), photo on top on tablet and phone.
 */

.ct-compare {
	--ct-compare-band-h: 640px;
	--ct-compare-overlap: 57px;
	position: relative;
	padding-bottom: var(--ct-pad-b, var(--ct-section-pad));
	background: var(--ct-bg);
}

.ct-compare__band {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: var(--ct-compare-band-h);
	overflow: hidden;
	background: var(--ct-c-earth);
}

.ct-compare__band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ct-hero-overlay, transparent);
	opacity: var(--ct-hero-overlay-o, 0);
	pointer-events: none;
}

.ct-compare .ct-compare__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ct-compare .ct-compare__img--phone {
	display: none;
}

/* The title sits on the band, 48px above the bar; the bar overlaps the band's foot. */
.ct-compare__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: calc(var(--ct-compare-band-h) - var(--ct-compare-overlap));
	padding-top: 120px;
}

.ct-compare .ct-compare__title {
	margin-top: auto;
	padding-bottom: 48px;
	color: var(--ct-hero-text, var(--ct-c-paper));
}

.ct-compare__booking {
	position: relative;
}

.ct-compare__list {
	display: flex;
	flex-direction: column;
	gap: 64px;
	margin-top: 64px;
}

.ct-compare__item {
	display: grid;
	grid-template-columns: minmax(0, 792fr) minmax(0, 360fr);
	align-items: center;
	gap: 48px;
}

.ct-compare__item:nth-child(even) {
	grid-template-columns: minmax(0, 360fr) minmax(0, 792fr);
}

.ct-compare__item:nth-child(even) .ct-compare__media {
	order: 2;
}

.ct-compare__media {
	aspect-ratio: 792 / 528;
	overflow: hidden;
	background: var(--ct-c-line);
}

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

.ct-compare__summary {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.ct-compare__meta {
	margin-top: 8px;
	color: var(--ct-muted);
}

.ct-compare__price {
	font-weight: 600;
}

.ct-compare .ct-compare__button {
	width: 220px;
}

@media (max-width: 1024px) {
	.ct-compare {
		--ct-compare-band-h: 520px;
	}

	.ct-compare .ct-compare__title {
		padding-bottom: 40px;
		/* Figma keeps the 56px title on tablets. */
		font-size: 56px;
		line-height: 64px;
	}

	.ct-compare__list {
		gap: 48px;
		margin-top: 48px;
	}

	.ct-compare__item,
	.ct-compare__item:nth-child(even) {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.ct-compare__item:nth-child(even) .ct-compare__media {
		order: 0;
	}

	.ct-compare__media {
		aspect-ratio: 770 / 460;
	}

	/* Name and figures left, price right, the button under them. */
	.ct-compare__summary {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 24px;
	}

	.ct-compare .ct-compare__button {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.ct-compare {
		--ct-compare-band-h: 440px;
		--ct-compare-overlap: 32px;
	}

	.ct-compare .ct-compare__img--phone {
		display: block;
	}

	.ct-compare .ct-compare__img--wide {
		display: none;
	}

	.ct-compare .ct-compare__title {
		padding-bottom: 32px;
		font-size: var(--ct-fs-h1);
		line-height: var(--ct-lh-h1);
	}

	.ct-compare__list {
		gap: 40px;
		margin-top: 40px;
	}

	.ct-compare__media {
		aspect-ratio: 350 / 260;
	}

	.ct-compare__summary {
		display: flex;
	}

	.ct-compare .ct-compare__button {
		width: 100%;
	}
}