/**
 * Casa Terra Villa cards (ct-villa-cards), ported from the Canopy Lodges cards.
 *
 * Styles: compact (Home "V4 Villas · Photo-led cards": rounded 5:6 photos, name, data line,
 * link), and the original detailed (square photos, 16px rhythm, rule and price) and captioned
 * (square-cornered photos with captions) styles. Columns on desktop and tablet, stacked on phones.
 */

/* Section padding per style (Elementor "Padding" controls override through --ct-pad-t/b). */
.ct-villa-cards.ct-pad {
	padding-top: var(--ct-pad-t, var(--ct-section-pad));
	padding-bottom: var(--ct-pad-b, var(--ct-section-pad));
}

.ct-villa-cards--detailed.ct-pad {
	padding-top: var(--ct-pad-t, 72px);
	padding-bottom: var(--ct-pad-b, 72px);
}

.ct-villa-cards--captioned.ct-pad {
	padding-top: var(--ct-pad-t, 96px);
	padding-bottom: var(--ct-pad-b, 96px);
}

/* Heading */
.ct-villa-cards .ct-heading {
	margin-bottom: 40px;
}

.ct-villa-cards .ct-heading__text {
	max-width: 820px;
	margin-top: 12px;
	color: var(--ct-muted);
}

.ct-villa-cards--detailed .ct-heading {
	margin-bottom: 28px;
}

.ct-villa-cards--captioned .ct-heading {
	margin-bottom: 32px;
}

/* "← All villas" */
.ct-villa-cards__back-wrap {
	margin-bottom: 24px;
}

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

.ct .ct-villa-cards__back:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.ct-villa-cards--cols-2 .ct-villa-cards__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 48px;
}

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

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

.ct-villa-cards--tall .ct-villa-card__media {
	aspect-ratio: 5 / 6;
}

.ct-villa-cards--square .ct-villa-card__media {
	aspect-ratio: 1 / 1;
}

.ct-villa-cards--landscape .ct-villa-card__media {
	aspect-ratio: 5 / 4;
}

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

.ct-villa-card__media:hover img {
	transform: scale(1.02);
}

.ct-villa-card__name {
	margin-top: 16px;
	overflow-wrap: anywhere;
}

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

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

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

.ct-villa-card__price {
	margin-top: 16px;
}

.ct .ct-villa-card__link {
	margin-top: 16px;
}

/* Compact (Figma Home): photo, 20px, name, data line and link 4px apart, a plain-weight link. */
.ct-villa-cards--compact .ct-villa-card__name {
	margin-top: 20px;
}

.ct-villa-cards--compact .ct-villa-card__link {
	margin-top: 4px;
	font-weight: 400;
}

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

/* Captioned cards frame the lower part of portrait photos (from the original). */
.ct-villa-cards--captioned .ct-villa-card__media img {
	object-position: 50% 78%;
}

.ct-villa-cards--detailed .ct-villa-card__meta {
	margin-top: 16px;
}

.ct-villa-cards--detailed .ct-villa-card__link {
	min-height: 48px;
	text-decoration: none;
}

.ct-villa-cards--detailed .ct-villa-card__link:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

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

.ct-villa-cards--captioned .ct-villa-card__name,
.ct-villa-cards--captioned .ct-villa-card__meta,
.ct-villa-cards--captioned .ct-villa-card__text,
.ct-villa-cards--captioned .ct-villa-card__price,
.ct-villa-cards--captioned .ct-villa-card__link {
	margin-top: 12px;
}

.ct-villa-cards--captioned .ct-villa-card__meta {
	color: var(--ct-text);
}

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

/* Tablet (834): same columns, narrower. */
@media (max-width: 1024px) {
	.ct-villa-cards--detailed.ct-pad {
		padding-top: var(--ct-pad-t, 72px);
		padding-bottom: var(--ct-pad-b, 72px);
	}

	.ct-villa-cards .ct-heading {
		margin-bottom: 24px;
	}

	.ct-villa-cards .ct-heading__text {
		margin-top: 20px;
	}

	.ct-villa-cards--detailed .ct-heading {
		margin-bottom: 28px;
	}

	.ct-villa-cards--captioned .ct-heading {
		margin-bottom: 24px;
	}

	.ct-villa-cards--compact .ct-villa-cards__list {
		column-gap: 16px;
	}

	.ct-villa-cards--cols-2 .ct-villa-cards__list {
		column-gap: 24px;
	}
}

/* Detailed cards keep a 56px title on tablets (from the original). */
@media (min-width: 768px) and (max-width: 1024px) {
	.ct-villa-cards--detailed .ct-section-title {
		font-size: 56px;
		line-height: 64px;
	}
}

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

	.ct-villa-cards .ct-heading__text {
		margin-top: 8px;
	}

	.ct-villa-cards--captioned.ct-pad {
		padding-top: var(--ct-pad-t, 64px);
		padding-bottom: var(--ct-pad-b, 64px);
	}

	.ct-villa-cards .ct-heading {
		margin-bottom: 32px;
	}

	.ct-villa-cards--detailed .ct-heading {
		margin-bottom: 28px;
	}

	.ct-villa-cards--captioned .ct-heading {
		margin-bottom: 24px;
	}

	.ct-villa-cards__list,
	.ct-villa-cards--cols-2 .ct-villa-cards__list {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	.ct-villa-cards--compact .ct-villa-cards__list {
		row-gap: 32px;
	}
}