/**
 * ==========================================================
 * MetrYMMO V2
 * assets/css/property-card.css
 *
 * Cartes immobilières premium
 * Identité MetrYMMO
 * ==========================================================
 */

.property-card {

	--metrymmo-black: #0B0B0B;
	--metrymmo-black-soft: #11100F;

	--metrymmo-brown: #21160F;
	--metrymmo-brown-medium: #5A351D;
	--metrymmo-bronze: #8D5B32;

	--metrymmo-gold-dark: #A86F3D;
	--metrymmo-gold: #C99A55;
	--metrymmo-gold-light: #E0BB80;
	--metrymmo-champagne: #F0D7AE;

	--metrymmo-cream: #F5EEE3;
	--metrymmo-white: #FFFFFF;

	position: relative;

	display: flex;
	flex-direction: column;

	width: 100%;
	min-width: 0;

	overflow: hidden;

	border: 1px solid rgba(33, 22, 15, .10);
	border-radius: 20px;

	background: var(--metrymmo-white);

	box-shadow:
		0 18px 45px rgba(33, 22, 15, .09);

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


/* ==========================================================
   HOVER CARTE
========================================================== */

.property-card:hover {

	transform: translateY(-7px);

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

	box-shadow:
		0 28px 65px rgba(33, 22, 15, .16);
}


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

.property-card__image {

	position: relative;

	display: block;

	width: 100%;

	aspect-ratio: 4 / 3;

	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			var(--metrymmo-brown),
			var(--metrymmo-black)
		);
}

.property-card__image-placeholder { display: grid; width: 100%; height: 100%; min-height: 220px; place-items: center; background: var(--metrymmo-cream, #F5EEE3); color: var(--metrymmo-black, #0B0B0B); font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; letter-spacing: .08em; }


.property-card__image img {

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform .8s cubic-bezier(.2, .7, .2, 1);
}


.property-card:hover .property-card__image img {

	transform: scale(1.055);
}


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

.property-card__overlay {

	position: absolute;

	inset: 0;

	pointer-events: none;

	background:
		linear-gradient(
			180deg,
			rgba(11, 11, 11, .05) 0%,
			transparent 42%,
			rgba(11, 11, 11, .55) 100%
		);
}


/* ==========================================================
   BADGES
========================================================== */

.property-card__badges {

	position: absolute;

	top: 16px;
	left: 16px;

	z-index: 4;

	display: flex;

	flex-wrap: wrap;

	gap: 7px;
}


.property-card__badge {

	display: inline-flex;

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

	min-height: 30px;

	padding: 6px 11px;

	border: 1px solid rgba(240, 215, 174, .28);

	border-radius: 999px;

	font-size: .64rem;

	font-weight: 800;

	line-height: 1;

	letter-spacing: .07em;

	text-transform: uppercase;

	backdrop-filter: blur(12px);
}


.property-card__badge--new {

	background:
		rgba(11, 11, 11, .88);

	color:
		var(--metrymmo-champagne);
}


.property-card__badge--exclusive {

	border-color:
		rgba(240, 215, 174, .42);

	background:
		linear-gradient(
			135deg,
			var(--metrymmo-gold-light),
			var(--metrymmo-gold)
		);

	color:
		var(--metrymmo-black);
}


.property-card__badge--sold {

	background:
		rgba(33, 22, 15, .92);

	color:
		var(--metrymmo-white);
}


/* ==========================================================
   PRIX
========================================================== */

.property-card__price {

	position: absolute;

	right: 16px;
	bottom: 16px;

	z-index: 4;

	display: inline-flex;

	align-items: center;

	min-height: 42px;

	padding: 9px 15px;

	border: 1px solid rgba(240, 215, 174, .34);

	border-radius: 999px;

	background:
		rgba(11, 11, 11, .84);

	color:
		var(--metrymmo-champagne);

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

	font-size: .94rem;

	font-weight: 800;

	letter-spacing: -.01em;

	backdrop-filter: blur(14px);
}


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

.property-card__content {

	display: flex;

	flex-direction: column;

	flex: 1;

	padding: 21px 21px 20px;
}


/* ==========================================================
   META
========================================================== */

.property-card__meta-top {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 12px;

	min-height: 19px;

	margin-bottom: 10px;
}


.property-card__type {

	color:
		var(--metrymmo-gold-dark);

	font-size: .66rem;

	font-weight: 800;

	letter-spacing: .12em;

	text-transform: uppercase;
}


.property-card__location {

	display: inline-flex;

	align-items: center;

	gap: 5px;

	color:
		rgba(33, 22, 15, .58);

	font-size: .76rem;

	font-weight: 600;

	white-space: nowrap;
}


.property-card__location-icon {

	color:
		var(--metrymmo-gold);

	font-size: .95rem;
}


/* ==========================================================
   TITRE
========================================================== */

.property-card__title {

	margin: 0 0 17px;

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

	font-size:
		clamp(1.08rem, 1.5vw, 1.30rem);

	font-weight: 800;

	line-height: 1.18;

	letter-spacing: -.025em;
}


.property-card__title a {

	color:
		var(--metrymmo-brown);

	text-decoration: none;

	transition:
		color .25s ease;
}


.property-card:hover .property-card__title a {

	color:
		var(--metrymmo-gold-dark);
}


/* ==========================================================
   INFORMATIONS
========================================================== */

.property-card__infos {

	display: grid;

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

	gap: 8px;

	padding: 14px 0;

	border-top:
		1px solid rgba(33, 22, 15, .08);

	border-bottom:
		1px solid rgba(33, 22, 15, .08);
}


.property-card__info {

	display: flex;

	align-items: center;

	gap: 8px;

	min-width: 0;
}


.property-card__info-icon {

	display: inline-flex;

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

	flex: 0 0 auto;

	width: 30px;
	height: 30px;

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

	border-radius: 8px;

	background:
		linear-gradient(
			135deg,
			var(--metrymmo-cream),
			var(--metrymmo-champagne)
		);

	color:
		var(--metrymmo-brown-medium);

	font-size: .82rem;

	font-weight: 800;
}


.property-card__info div {

	display: flex;

	flex-direction: column;

	min-width: 0;
}


.property-card__info strong {

	color:
		var(--metrymmo-brown);

	font-size: .80rem;

	font-weight: 800;

	line-height: 1.1;
}


.property-card__info div > span {

	margin-top: 2px;

	color:
		rgba(33, 22, 15, .48);

	font-size: .63rem;

	font-weight: 500;

	line-height: 1.1;
}


/* ==========================================================
   FOOTER CARTE
========================================================== */

.property-card__footer {

	display: flex;

	align-items: center;

	padding-top: 17px;
}


/* ==========================================================
   BOUTON — VERSION PREMIUM
========================================================== */

.property-card__button {

	display: inline-flex;

	align-items: center;

	justify-content: space-between;

	gap: 14px;

	width: fit-content;

	min-height: 46px;

	padding: 8px 9px 8px 17px;

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

	border-radius: 999px;

	background:
		linear-gradient(
			135deg,
			var(--metrymmo-cream),
			var(--metrymmo-champagne)
		);

	color:
		var(--metrymmo-brown);

	font-size: .76rem;

	font-weight: 800;

	line-height: 1;

	text-decoration: none;

	box-shadow:
		0 5px 15px rgba(33, 22, 15, .05);

	transition:
		background .3s ease,
		color .3s ease,
		border-color .3s ease,
		transform .3s ease,
		box-shadow .3s ease;
}


.property-card__button:hover {

	background:
		linear-gradient(
			135deg,
			var(--metrymmo-gold-light),
			var(--metrymmo-gold)
		);

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

	color:
		var(--metrymmo-black);

	transform:
		translateY(-2px);

	box-shadow:
		0 9px 22px rgba(33, 22, 15, .10);
}


/* ==========================================================
   FLÈCHE
========================================================== */

.property-card__button-arrow {

	display: inline-flex;

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

	flex: 0 0 auto;

	width: 28px;
	height: 28px;

	border-radius: 50%;

	background:
		var(--metrymmo-brown);

	color:
		var(--metrymmo-champagne);

	font-size: .82rem;

	line-height: 1;

	transition:
		transform .3s ease,
		background .3s ease,
		color .3s ease;
}


.property-card__button:hover
.property-card__button-arrow {

	transform:
		translateX(3px);

	background:
		var(--metrymmo-black);

	color:
		var(--metrymmo-gold-light);
}


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

@media (max-width: 1100px) {

	.property-card__content {

		padding: 19px;
	}
}


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

@media (max-width: 768px) {

	.property-card {

		border-radius: 18px;
	}


	.property-card__image {

		aspect-ratio: 16 / 11;
	}


	.property-card__badges {

		top: 13px;
		left: 13px;
	}


	.property-card__price {

		right: 13px;
		bottom: 13px;
	}


	.property-card__content {

		padding: 18px;
	}


	.property-card__button {

		min-height: 44px;

		padding-left: 15px;

		font-size: .74rem;
	}


	.property-card__button-arrow {

		width: 27px;
		height: 27px;
	}
}


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

@media (max-width: 480px) {

	.property-card__meta-top {

		align-items: flex-start;

		flex-direction: column;

		gap: 5px;
	}


	.property-card__infos {

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