/**
 * Casa Terra Included (Figma "V6 Split · Included in every villa"), ported from the Canopy
 * Feature layout.
 *
 * Two layouts, picked by whether a wide photo is set:
 * - stack (Home and the villa pages): tall photo 576 at the left, wide photo 856 × 320 (villa
 *   pages 400) above a 272 high paper panel at the right, 8px gaps showing the page colour.
 *   Tablet: the two photos side by side (320 + 506, 440 high), the panel under them.
 *   Phone: photo, photo, panel, one column.
 * - single: one photo and a panel as tall as the photo.
 */

.ct-included {
	--ct-included-side-h: 320px;
	display: grid;
	grid-template-columns: minmax(0, 576fr) minmax(0, 856fr);
	gap: 8px;
	background: var(--ct-included-gap-bg, var(--ct-c-cream));
}

.ct-included__media {
	position: relative;
	overflow: hidden;
	min-width: 0;
	background: var(--ct-c-line);
}

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

.ct-included__media--main {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.ct-included__media--side {
	grid-column: 2;
	grid-row: 1;
	height: var(--ct-included-side-h);
}

.ct-included__panel {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 272px;
	padding: var(--ct-pad-t, 44px) 48px var(--ct-pad-b, 44px);
	background: var(--ct-bg);
}

.ct-included__body {
	width: 100%;
	min-width: 0;
}

.ct-included__text {
	margin-top: 12px;
	color: var(--ct-muted);
}

/* Single: one photo, the panel is as tall as the photo. */
.ct-included--single .ct-included__media--main {
	grid-row: 1;
	min-height: 600px;
}

.ct-included--single .ct-included__panel {
	grid-row: 1;
	min-height: 600px;
}

/* Items: one row, icon 24 then the label 12px to its right, 40 apart. */
.ct-included__items {
	display: flex;
	flex-wrap: wrap;
	gap: 0 40px;
	margin-top: 32px;
}

.ct-included__items:first-child {
	margin-top: 0;
}

.ct-included__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	min-height: 44px;
	color: var(--ct-text);
	font-size: 16px;
	line-height: 24px;
}

.ct-included__icon {
	flex: none;
	color: var(--ct-heading);
}

/* Tablet (834): photos side by side, panel full width under them. */
@media (max-width: 1024px) {
	.ct-included {
		grid-template-columns: minmax(0, 320fr) minmax(0, 506fr);
	}

	.ct-included__media--main,
	.ct-included__media--side {
		grid-row: 1;
		height: 440px;
	}

	.ct-included__media--side {
		grid-column: 2;
	}

	.ct-included__panel,
	.ct-included--single .ct-included__panel {
		grid-column: 1 / -1;
		grid-row: 2;
		min-height: 0;
		padding: var(--ct-pad-t, 44px) 32px var(--ct-pad-b, 44px);
	}

	.ct-included--single .ct-included__media--main {
		grid-column: 1 / -1;
		min-height: 0;
	}

	.ct-included__items {
		justify-content: space-between;
		gap: 0 24px;
	}

	/* Villa pages: two columns, Wi-Fi under Linen. */
	.ct-included--tablet-grid .ct-included__items {
		display: grid;
		grid-template-columns: repeat(2, max-content);
		grid-template-rows: repeat(2, auto);
		grid-auto-flow: column;
		justify-content: start;
		gap: 8px 120px;
		margin-top: 24px;
	}
}

/* Phone (390): one column. */
@media (max-width: 767px) {
	.ct-included,
	.ct-included--single {
		grid-template-columns: minmax(0, 1fr);
	}

	.ct-included__media--main,
	.ct-included__media--side {
		grid-column: 1;
		height: 280px;
	}

	.ct-included__media--main {
		grid-row: 1;
	}

	.ct-included__media--side {
		grid-row: 2;
		height: 334px;
	}

	/* Home: the wide photo first. */
	.ct-included--phone-side-first .ct-included__media--side {
		grid-row: 1;
		height: 280px;
	}

	.ct-included--phone-side-first .ct-included__media--main {
		grid-row: 2;
		height: 334px;
	}

	.ct-included__panel,
	.ct-included--single .ct-included__panel {
		grid-column: 1;
		grid-row: 3;
		padding: var(--ct-pad-t, 20px) var(--ct-gutter) var(--ct-pad-b, 20px);
	}

	.ct-included--single .ct-included__panel {
		grid-row: 2;
	}

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

	.ct-included__items,
	.ct-included--tablet-grid .ct-included__items {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-top: 16px;
	}
}