/**
 * ==========================================================
 * MetrYMMO V2
 * Biens à la une
 * ==========================================================
 */

.featured-properties {
	position: relative;
	padding: 78px 0 42px;
	background: #F8F6F2;
	overflow: hidden;
}


/* ==========================================================
   CONTAINER
========================================================== */

.featured-properties .container {
	width: min(
		calc(100% - 48px),
		1320px
	);

	margin: 0 auto;
}


/* ==========================================================
   HEADER DE SECTION
========================================================== */

.featured-properties .section-heading {
	max-width: 760px;
	margin: 0 auto 42px;
	text-align: center;
}

.featured-properties .section-subtitle {
	display: block;

	margin-bottom: 14px;

	color: #A86F3D;

	font-size: 0.78rem;
	font-weight: 800;

	letter-spacing: 0.16em;
	line-height: 1.4;

	text-transform: uppercase;
}

.featured-properties .section-title {
	margin: 0 0 16px;

	color: #0B0B0B;

	font-family:
		"Poppins",
		sans-serif;

	font-size:
		clamp(
			2.5rem,
			5vw,
			4rem
		);

	font-weight: 800;
	line-height: 1.05;

	letter-spacing: -0.04em;
}

.featured-properties .section-description {
	max-width: 680px;

	margin: 0 auto;

	color: #665D54;

	font-size: 1rem;
	line-height: 1.7;
}


/* ==========================================================
   GRILLE
========================================================== */

.featured-properties .properties-grid {
	display: grid;

	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);

	gap: 28px;

	width: 100%;
}


/* ==========================================================
   CARTES
========================================================== */

.featured-properties .property-card {
	overflow: hidden;

	border:
		1px solid
		rgba(
			11,
			11,
			11,
			0.08
		);

	border-radius: 22px;

	background: #FFFFFF;

	box-shadow:
		0 16px 45px
		rgba(
			11,
			11,
			11,
			0.07
		);

	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}

.featured-properties .property-card:hover {
	transform: translateY(-7px);

	border-color:
		rgba(
			201,
			154,
			85,
			0.35
		);

	box-shadow:
		0 25px 55px
		rgba(
			11,
			11,
			11,
			0.13
		);
}


/* ==========================================================
   IMAGE
========================================================== */

.featured-properties .property-image {
	position: relative;

	overflow: hidden;

	aspect-ratio: 4 / 3;

	background:
		linear-gradient(
			135deg,
			#21160F,
			#0B0B0B
		);
}

.featured-properties .property-image img {
	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 0.6s ease;
}

.featured-properties .property-card:hover .property-image img {
	transform: scale(1.05);
}


/* ==========================================================
   BADGE
========================================================== */

.featured-properties .property-badge {
	position: absolute;

	top: 18px;
	left: 18px;

	z-index: 2;

	padding: 8px 15px;

	border-radius: 999px;

	background:
		linear-gradient(
			135deg,
			#E0BB80,
			#C99A55
		);

	color: #0B0B0B;

	font-size: 0.78rem;
	font-weight: 800;

	box-shadow:
		0 8px 20px
		rgba(
			11,
			11,
			11,
			0.16
		);
}


/* ==========================================================
   CONTENU CARTE
========================================================== */

.featured-properties .property-content {
	padding: 26px;
}

.featured-properties .property-price {
	margin: 0 0 8px;

	color: #A86F3D;

	font-size: 1.35rem;
	font-weight: 800;
}

.featured-properties .property-title {
	margin: 0 0 8px;

	color: #0B0B0B;

	font-family:
		"Poppins",
		sans-serif;

	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
}

.featured-properties .property-location {
	margin: 0 0 20px;

	color: #776E65;

	font-size: 0.9rem;
}


/* ==========================================================
   CARACTÉRISTIQUES
========================================================== */

.featured-properties .property-features {
	display: flex;

	flex-wrap: wrap;

	gap: 8px;

	margin: 0 0 22px;
}

.featured-properties .property-features span {
	padding: 7px 12px;

	border-radius: 999px;

	background: #F3EEE7;

	color: #4F463D;

	font-size: 0.78rem;
	font-weight: 600;
}


/* ==========================================================
   BOUTON CARTE
========================================================== */

.featured-properties .property-button {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 48px;

	padding: 12px 18px;

	border-radius: 12px;

	background:
		linear-gradient(
			135deg,
			#21160F,
			#0B0B0B
		);

	color: #FFFFFF;

	font-size: 0.88rem;
	font-weight: 700;

	transition:
		transform 0.3s ease,
		background 0.3s ease,
		color 0.3s ease;
}

.featured-properties .property-button:hover {
	transform: translateY(-2px);

	background:
		linear-gradient(
			135deg,
			#E0BB80,
			#C99A55
		);

	color: #0B0B0B;
}


/* ==========================================================
   AUCUN BIEN
========================================================== */

.featured-properties .no-properties {
	grid-column: 1 / -1;

	width: min(
		100%,
		720px
	);

	margin: 0 auto;

	padding: 28px 34px;

	border:
		1px solid
		rgba(
			201,
			154,
			85,
			0.20
		);

	border-radius: 18px;

	background: #FFFFFF;

	text-align: center;

	box-shadow:
		0 12px 35px
		rgba(
			11,
			11,
			11,
			0.05
		);
}

.featured-properties .no-properties h3 {
	margin: 0 0 7px;

	color: #0B0B0B;

	font-family:
		"Poppins",
		sans-serif;

	font-size: 1.15rem;
	font-weight: 700;
}

.featured-properties .no-properties p {
	margin: 0;

	color: #756C63;

	font-size: 0.92rem;
	line-height: 1.6;
}


/* ==========================================================
   FOOTER DE SECTION
========================================================== */

.featured-properties .featured-properties-footer {
	display: flex;

	justify-content: center;

	margin-top: 32px;
}


/* ==========================================================
   TABLETTE
========================================================== */

@media (max-width: 1100px) {

	.featured-properties {
		padding: 70px 0 40px;
	}

	.featured-properties .properties-grid {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

	.featured-properties {
		padding: 60px 0 38px;
	}

	.featured-properties .container {
		width: min(
			calc(100% - 36px),
			1320px
		);
	}

	.featured-properties .section-heading {
		margin-bottom: 34px;
	}

	.featured-properties .section-title {
		font-size: 2.4rem;
	}

	.featured-properties .section-description {
		font-size: 0.94rem;
	}

	.featured-properties .properties-grid {
		grid-template-columns: 1fr;

		gap: 22px;
	}

	.featured-properties .no-properties {
		padding: 26px 20px;
	}

	.featured-properties .featured-properties-footer {
		margin-top: 28px;
	}

}