/**
 * Styles for the Featured Properties Block
 *
 */

.section-featured-properties {

	.f-carousel__viewport {
		align-items: stretch;
		min-height: 500px;
	}

	.f-carousel__slide {
		display: flex;
		margin-bottom: var(--wp--preset--spacing--10);
	}

	.jaleo--card.row {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	position: relative;
	padding: calc(var(--wp--preset--spacing--10) / 2);
	box-shadow: 0px 0px 8px rgba(51, 51, 51, 0.1);
	width: 100%;


	.jaleo--card-body {
		padding: 0 var(--wp--preset--spacing--10);
		height: 100%;
		display: flex;
		flex-direction: column;
		p{
			font-size: var(--wp--preset--font-size--ultrasmall);
		}
	}

	.jaleo--card-body-priceref {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: var(--wp--preset--font-size--normal);
		padding-bottom: var(--wp--preset--spacing--10);
		border-bottom: rgba(51, 51, 51, 0.2) solid 1px;
		flex-wrap: wrap;
		@media (max-width:768px) {
			flex-direction: column;
			gap: calc(var(--wp--preset--spacing--10) / 2);
			align-items: flex-start;
		}
	}

	.jaleo--card-reference {
		font-size: var(--wp--preset--font-size--small);
	}

	.jaleo--card-title {
		text-transform: capitalize;
		color: var(--wp--preset--color--accent);
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		a:hover {
			border: none !important;
		}
		a::after {
			position: absolute;
			content: "";
			inset: 0;
		}
	}
	.jaleo--card-footer {
		padding:0 var(--wp--preset--spacing--10);
		margin-top: var(--wp--preset--spacing--20);
		.jaleo--card-features {
            padding: 0;
			list-style: none;
			margin-top: auto;

			li {
				padding: calc(var(--wp--preset--spacing--10) / 2) 0;
				border-bottom: rgba(51, 51, 51, 0.2) dotted 1px;
				display: flex;
				justify-content: space-between;
				font-size: var(--wp--preset--font-size--ultrasmall);
			}
		}
	}
	}


		.f-carousel__slide {
			width: calc(var(--f-carousel-slide-width)/3);
			padding: 0 var(--wp--preset--spacing--10);
	@media (max-width: 768px) {
		width: calc(var(--f-carousel-slide-width));
	}

			.jaleo--aspect-box-figure {
				img {
					width: 100%;
					object-fit: cover;
					aspect-ratio: 16/9;
				}
			}
		}

		.f-button {
			--f-button-bg: rgba(255, 255, 255, 0.8) !important;
			--f-button-color: var(--wp--preset--color--accent) !important;
		}
}