/**
 * Casa Terra Villa intro and booking (Figma villa pages "Accommodation and booking"):
 * desktop, the photo 696 wide flush left over the whole height, and 80px to its right a 544
 * column with the text and the booking card (assets/css/parts/booking.css, card look) under
 * it. Tablet: the photo as a 480 band, then the text and a 277 card side by side. Phone: the
 * photo as a 360 band, then the text and the card stacked.
 */

.ct-vintro {
	display: grid;
	grid-template-columns: minmax(0, 696fr) minmax(0, 744fr);
	background: var(--ct-bg);
}

.ct-vintro__media {
	position: relative;
	min-height: 100%;
	overflow: hidden;
	background: var(--ct-c-line);
}

.ct .ct-vintro__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ct-vintro__main {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
	max-width: calc(544px + 80px + var(--ct-gutter));
	padding: var(--ct-pad-t, 56px) var(--ct-gutter) var(--ct-pad-b, 56px) 80px;
}

.ct-vintro__lead {
	margin-top: 16px;
	color: var(--ct-muted);
	font-size: 20px;
	line-height: 30px;
}

.ct-vintro__note {
	margin-top: 16px;
	color: var(--ct-muted);
}

/* Without a photo the text starts at the container edge. */
.ct-vintro:not(:has(.ct-vintro__media)) {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1024px) {
	.ct-vintro {
		grid-template-columns: minmax(0, 1fr);
	}

	.ct-vintro__media {
		height: 480px;
	}

	/* Text and card side by side, the card 277 wide. */
	.ct-vintro__main {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 277px);
		align-items: start;
		max-width: none;
		padding: var(--ct-pad-t, 64px) var(--ct-gutter) var(--ct-pad-b, 40px);
	}

	/* Figma keeps the 56px title on tablets. */
	.ct-vintro .ct-vintro__title {
		font-size: 56px;
		line-height: 64px;
	}
}

@media (max-width: 767px) {
	.ct-vintro__media {
		height: 360px;
	}

	.ct-vintro__main {
		display: flex;
		padding: var(--ct-pad-t, 48px) var(--ct-gutter) var(--ct-pad-b, 32px);
	}

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