/**
 * Casa Terra Villa hero (Figma villa pages "Accommodation overview"): the photo band (880 /
 * 640 / 560) under a 32% earth overlay, "← All villas" top left, the name and its line bottom
 * left, then 8px lower the facts in a bordered bar (one row of four on desktop and tablet,
 * stacked on phones).
 */

.ct-vhero {
	padding-bottom: var(--ct-pad-b, 16px);
	background: var(--ct-bg);
}

.ct-vhero__photo {
	position: relative;
	display: flex;
	min-height: var(--ct-vhero-h, 880px);
	overflow: hidden;
	background: var(--ct-c-earth);
}

.ct-vhero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

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

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

.ct-vhero .ct-vhero__img--phone {
	display: none;
}

.ct-vhero__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-top: 24px;
	padding-bottom: 72px;
	color: var(--ct-hero-text, var(--ct-c-paper));
}

.ct .ct-vhero__back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	align-self: flex-start;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}

.ct .ct-vhero__back:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ct-vhero__copy {
	margin-top: auto;
}

.ct-vhero .ct-vhero__title {
	color: var(--ct-hero-text, var(--ct-c-paper));
}

.ct-vhero__text {
	margin-top: 8px;
}

/* Facts: a bordered bar, four equal columns, plain text. */
.ct-vhero__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: 8px;
	padding: 24px;
	border: 1px solid var(--ct-line);
	color: var(--ct-heading);
	font-weight: 600;
}

@media (max-width: 1024px) {
	.ct-vhero__photo {
		min-height: var(--ct-vhero-h, 640px);
	}

	.ct-vhero__stage {
		padding-top: 16px;
		padding-bottom: 48px;
	}

	/* Figma keeps the 56px name on tablets. */
	.ct-vhero .ct-vhero__title {
		font-size: 56px;
		line-height: 64px;
	}
}

@media (max-width: 767px) {
	.ct-vhero__photo {
		min-height: var(--ct-vhero-h, 560px);
	}

	.ct-vhero .ct-vhero__img--phone {
		display: block;
	}

	.ct-vhero .ct-vhero__img--wide {
		display: none;
	}

	.ct-vhero__stage {
		padding-top: 12px;
		padding-bottom: 32px;
	}

	.ct-vhero .ct-vhero__title {
		font-size: var(--ct-fs-h1);
		line-height: var(--ct-lh-h1);
	}

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