/**
 * Canopy Lodges (cn-lodges): lodge cards.
 *
 * Styles: compact (Home, rounded 4:5 photos), detailed (Lodges and Photographs pages, square
 * photos, 16px rhythm, rule and price), captioned (lodge pages "Other forest levels", wide
 * square-cornered photos with captions). Columns on desktop and tablet, stacked on phones.
 */

/* Section padding per style (Elementor "Padding" controls override through --cn-pad-t/b). */
.cn-lodges.cn-pad {
	padding-top: var(--cn-pad-t, 80px);
	padding-bottom: var(--cn-pad-b, 80px);
}

.cn-lodges--detailed.cn-pad {
	padding-top: var(--cn-pad-t, 72px);
	padding-bottom: var(--cn-pad-b, 72px);
}

.cn-lodges--captioned.cn-pad {
	padding-top: var(--cn-pad-t, 96px);
	padding-bottom: var(--cn-pad-b, 96px);
}

/* Heading */
.cn-lodges .cn-heading {
	margin-bottom: 40px;
}

.cn-lodges .cn-heading__text {
	max-width: 780px;
	color: var(--cn-muted);
}

.cn-lodges--detailed .cn-heading {
	margin-bottom: 28px;
}

.cn-lodges--captioned .cn-heading {
	margin-bottom: 32px;
}

/* "← All lodges" */
.cn-lodges__back-wrap {
	margin-bottom: 24px;
}

.cn .cn-lodges__back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	color: var(--cn-heading);
	text-decoration: none;
}

.cn .cn-lodges__back:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Cards */
.cn-lodges__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.cn-lodges--cols-2 .cn-lodges__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 48px;
}

.cn-lodge-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.cn-lodge-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--cn-radius);
	background: var(--cn-c-line);
}

.cn-lodges--tall .cn-lodge-card__media {
	aspect-ratio: 5 / 6;
}

.cn-lodges--square .cn-lodge-card__media {
	aspect-ratio: 1 / 1;
}

.cn-lodges--landscape .cn-lodge-card__media {
	aspect-ratio: 5 / 4;
}

.cn .cn-lodge-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.cn-lodge-card__media:hover img {
	transform: scale(1.02);
}

.cn-lodge-card__name {
	margin-top: 16px;
	overflow-wrap: anywhere;
}

.cn-lodge-card__meta {
	margin-top: 4px;
	color: var(--cn-muted);
}

.cn-lodge-card__text {
	margin-top: 16px;
	color: var(--cn-text);
}

.cn-lodge-card__rule {
	width: 100%;
	height: 0;
	margin: 16px 0 0;
	border: 0;
	border-top: 1px solid var(--cn-line);
}

.cn-lodge-card__price {
	margin-top: 16px;
}

.cn .cn-lodge-card__link {
	margin-top: 16px;
}

/* Detailed: square photos, every line 16px apart, plain 48px link. */
.cn-lodges--detailed .cn-lodge-card__media,
.cn-lodges--captioned .cn-lodge-card__media {
	border-radius: 0;
}

/* Lodge pages: Figma frames the beds, the lower part of the portrait photos. */
.cn-lodges--captioned .cn-lodge-card__media img {
	object-position: 50% 78%;
}

.cn-lodges--detailed .cn-lodge-card__meta {
	margin-top: 16px;
}

.cn-lodges--detailed .cn-lodge-card__link {
	min-height: 48px;
	text-decoration: none;
}

.cn-lodges--detailed .cn-lodge-card__link:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/* Captioned: caption, name, data line and link 12px apart, all in the text colour. */
.cn-lodge-card__caption {
	margin-top: 12px;
	color: var(--cn-text);
}

.cn-lodges--captioned .cn-lodge-card__name,
.cn-lodges--captioned .cn-lodge-card__meta,
.cn-lodges--captioned .cn-lodge-card__text,
.cn-lodges--captioned .cn-lodge-card__price,
.cn-lodges--captioned .cn-lodge-card__link {
	margin-top: 12px;
}

.cn-lodges--captioned .cn-lodge-card__meta {
	color: var(--cn-text);
}

@media (prefers-reduced-motion: reduce) {
	.cn-lodge-card__media:hover img {
		transform: none;
	}
}

/* Tablet (834): same columns, narrower. */
@media (max-width: 1024px) {
	.cn-lodges.cn-pad {
		padding-top: var(--cn-pad-t, 64px);
		padding-bottom: var(--cn-pad-b, 64px);
	}

	.cn-lodges--detailed.cn-pad {
		padding-top: var(--cn-pad-t, 72px);
		padding-bottom: var(--cn-pad-b, 72px);
	}

	.cn-lodges .cn-heading {
		margin-bottom: 32px;
	}

	.cn-lodges--detailed .cn-heading {
		margin-bottom: 28px;
	}

	.cn-lodges--captioned .cn-heading {
		margin-bottom: 24px;
	}

	.cn-lodges--compact .cn-lodges__list {
		column-gap: 10px;
	}

	.cn-lodges--cols-2 .cn-lodges__list {
		column-gap: 24px;
	}
}

/* The Lodges page keeps its 56px title on tablets (Figma 834). */
@media (min-width: 768px) and (max-width: 1024px) {
	.cn-lodges--detailed .cn-section-title {
		font-size: 56px;
		line-height: 64px;
	}
}

/* Phone (390): one card per row. */
@media (max-width: 767px) {
	.cn-lodges.cn-pad,
	.cn-lodges--detailed.cn-pad {
		padding-top: var(--cn-pad-t, 48px);
		padding-bottom: var(--cn-pad-b, 48px);
	}

	.cn-lodges--captioned.cn-pad {
		padding-top: var(--cn-pad-t, 64px);
		padding-bottom: var(--cn-pad-b, 64px);
	}

	.cn-lodges .cn-heading {
		margin-bottom: 32px;
	}

	.cn-lodges--detailed .cn-heading {
		margin-bottom: 28px;
	}

	.cn-lodges--captioned .cn-heading {
		margin-bottom: 24px;
	}

	.cn-lodges__list,
	.cn-lodges--cols-2 .cn-lodges__list {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	.cn-lodges--compact .cn-lodges__list {
		row-gap: 40px;
	}
}