/**
 * Canopy Closing (Figma "V11 Closing"): full-bleed photo half at the left, panel at the right
 * (padding 80 left, right edge lined up with the page container), questions and the next step.
 * Tablet and phone: photo on top, panel under it.
 *
 * - intro (Home "Know who to ask", sage): 20/30 line, panel centred on the 640 photo, gaps 16/32/32.
 * - compact (lodge pages "Ask before you book", paper): 16/24 line, padding 96, gaps 28/28/36.
 */

.cn-closing {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cn-closing__media {
	position: relative;
	min-width: 0;
	min-height: 640px;
	overflow: hidden;
	background: var(--cn-c-line);
}

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

/* 100% is the panel (half the section), so this is 120px at 1440, the container edge. */
.cn-closing__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: var(--cn-pad-t, 80px) max(var(--cn-gutter), calc(100% - var(--cn-max) / 2)) var(--cn-pad-b, 80px) 80px;
	background: var(--cn-bg);
}

.cn-closing--compact .cn-closing__panel {
	padding-top: var(--cn-pad-t, 96px);
	padding-bottom: var(--cn-pad-b, 96px);
}

.cn-closing__body {
	min-width: 0;
}

.cn-closing .cn-closing__text {
	margin-top: 16px;
	color: var(--cn-muted);
}

.cn-closing--compact .cn-closing__text {
	margin-top: 28px;
	font-size: 16px;
	line-height: 24px;
}

.cn-closing__faq,
.cn-closing__actions {
	margin-top: 32px;
}

.cn-closing--compact .cn-closing__faq {
	margin-top: 28px;
}

.cn-closing--compact .cn-closing__actions {
	margin-top: 36px;
}

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

.cn-closing .cn-closing__actions {
	gap: 12px 24px;
}

.cn-closing .cn-closing__button {
	min-width: 200px;
}

/* Tablet (834): photo 560 (lodge pages 480) on top, panel 64/32. */
@media (max-width: 1024px) {
	.cn-closing {
		grid-template-columns: minmax(0, 1fr);
	}

	.cn-closing__media {
		min-height: 0;
		height: 560px;
	}

	.cn-closing--compact .cn-closing__media {
		height: 480px;
	}

	.cn-closing__panel,
	.cn-closing--compact .cn-closing__panel {
		padding: var(--cn-pad-t, 64px) var(--cn-gutter) var(--cn-pad-b, 64px);
	}

	.cn-closing--compact .cn-closing__text,
	.cn-closing--compact .cn-closing__faq {
		margin-top: 24px;
	}

	.cn-closing--compact .cn-closing__actions {
		margin-top: 32px;
	}
}

/* Phone (390): photo 440 (lodge pages 300), panel 48/20 (lodge pages 64/20), full-width button. */
@media (max-width: 767px) {
	.cn-closing__media {
		height: 440px;
	}

	.cn-closing--compact .cn-closing__media {
		height: 300px;
	}

	.cn-closing__panel {
		padding: var(--cn-pad-t, 48px) var(--cn-gutter) var(--cn-pad-b, 48px);
	}

	.cn-closing .cn-closing__actions {
		flex-direction: column;
		align-items: stretch;
	}

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

	.cn-closing .cn-closing__link {
		justify-content: center;
	}
}