/**
 * Canopy Feature (Figma "V6 Feature"), full bleed on a forest panel.
 *
 * Two layouts, picked by whether a small photo is set:
 * - stack (Home "What comes with quiet"): large photo 864 at the left, small photo 576 × 400
 *   above a 576 × 320 panel at the right. Tablet: large photo on top, small photo and panel
 *   side by side. Phone: large photo, panel, small photo.
 * - single (lodge pages "Comes with your stay"): photo 864 × 640 and a tall panel (96/72).
 *   Tablet and phone: photo on top, panel under it.
 */

.cn-feature {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.cn-feature__media {
	position: relative;
	overflow: hidden;
	min-width: 0;
	background: var(--cn-c-forest-dark);
}

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

.cn-feature__media--main {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.cn-feature__media--side {
	grid-column: 2;
	grid-row: 1;
	aspect-ratio: 576 / 400;
}

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

.cn-feature__body {
	width: 100%;
	min-width: 0;
}

/* Single: one photo, the panel is as tall as the photo. */
.cn-feature--single .cn-feature__media--main {
	grid-row: 1;
	min-height: 640px;
}

.cn-feature--single .cn-feature__panel {
	grid-row: 1;
	min-height: 640px;
	padding: var(--cn-pad-t, 96px) 72px var(--cn-pad-b, 96px);
}

/* Icon list: two columns, icon 24 then the label 12px to its right. */
.cn-feature__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
	margin-top: 28px;
}

.cn-feature--single .cn-feature__items {
	gap: 24px;
	margin-top: 32px;
}

.cn-feature__items:first-child {
	margin-top: 0;
}

.cn-feature__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
	color: var(--cn-text);
	font-size: 16px;
	line-height: 24px;
}

.cn-feature__icon {
	flex: none;
	color: var(--cn-heading);
}

/* Tablet (834). */
@media (max-width: 1024px) {
	.cn-feature,
	.cn-feature--single {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cn-feature__media--main,
	.cn-feature--single .cn-feature__media--main {
		grid-column: 1 / -1;
		grid-row: 1;
		min-height: 0;
		height: 520px;
	}

	.cn-feature__media--side {
		grid-column: 1;
		grid-row: 2;
		aspect-ratio: auto;
		min-height: 380px;
	}

	.cn-feature__panel {
		grid-column: 2;
		grid-row: 2;
		min-height: 380px;
		padding: var(--cn-pad-t, 32px) 32px var(--cn-pad-b, 32px);
	}

	.cn-feature--single .cn-feature__panel {
		grid-column: 1 / -1;
		grid-row: 2;
		min-height: 0;
		padding: var(--cn-pad-t, 64px) var(--cn-gutter) var(--cn-pad-b, 64px);
	}

	/* The half-width panel lists its items at their natural width. */
	.cn-feature--stack .cn-feature__items {
		grid-template-columns: repeat(2, minmax(0, max-content));
		column-gap: 16px;
	}
}

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

	.cn-feature__media--main {
		height: 420px;
	}

	.cn-feature--single .cn-feature__media--main {
		height: 320px;
	}

	.cn-feature__panel {
		grid-column: 1;
		grid-row: 2;
		min-height: 0;
		padding: var(--cn-pad-t, 32px) var(--cn-gutter) var(--cn-pad-b, 32px);
	}

	.cn-feature--single .cn-feature__panel {
		grid-column: 1;
		padding: var(--cn-pad-t, 64px) var(--cn-gutter) var(--cn-pad-b, 64px);
	}

	.cn-feature__media--side {
		grid-column: 1;
		grid-row: 3;
		min-height: 0;
		height: 300px;
	}

	.cn-feature--single .cn-feature__items {
		grid-template-columns: minmax(0, 1fr);
	}
}