/**
 * WLRE Theme - Property Card Styles
 *
 * Reusable property listing card used across carousels and grids.
 * Figma source: node 4004:4547 (Desktop Default Grid)
 *
 * Token map:
 *   Card radius     → --wlre-radius-20 (20px)
 *   Image radius    → --wlre-radius-lg (16px)
 *   Button radius   → --wlre-radius-sm (8px)
 *   Price           → H4 (28px DM Sans Semibold)
 *   Title           → H6 (20px DM Sans Semibold)
 *   Specs/Location  → Body L (16px Lato Regular)
 *   Button label    → Label M (14px Lato Bold)
 */

.wlre-property-card {
	position: relative; /* anchors the stretched link below */
	width: 400px;
	height: 510px;
	padding: var(--wlre-space-16);
	background: var(--wlre-color-white);
	border-radius: var(--wlre-radius-20);
	box-shadow: var(--wlre-shadow-card);
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-16);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	isolation: isolate; /* scope z-indexes inside the card */
}
.wlre-property-card:hover {
	transform: translateY(calc(var(--wlre-space-4) * -1));
	box-shadow: 0 14px 34px rgba(10, 36, 56, 0.16);
}

/* === Stretched link — click anywhere on the card lands on the property
 * detail page. Sits BELOW the interactive widgets (save heart, Visit,
 * WhatsApp, carousel arrows/dots) via z-index. Focus ring hidden
 * because the title + visit link provide accessible routes. */
.wlre-property-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}
.wlre-property-card__link:focus { outline: none; }

/* Every interactive child sits above the stretched link. The image is
 * deliberately omitted — giving it z-index here would trap its slides in
 * a stacking context above the stretched link, blocking image-area clicks
 * from navigating to the detail page. Arrows + dots get z-index:3 below so
 * they stay clickable above the link. */
.wlre-property-card__actions,
.wlre-property-card__carousel-arrow,
.wlre-property-card__carousel-dots,
.wlre-property-card__sponsored-badge {
	position: relative;
	z-index: 2;
}

/* === Image === */
.wlre-property-card__image {
	/* position:relative so absolute-positioned slides/arrows anchor here,
	 * but NO z-index — keeps slides at the card's default z-index so the
	 * stretched link (z-index:1) can capture clicks on the image area. */
	position: relative;
	width: 100%;
	flex: 1 0 0;
	min-height: 0;
	overflow: hidden;
	border-radius: var(--wlre-radius-lg);
	background:
		linear-gradient(
			135deg,
			var(--wlre-color-brand-700) 0%,
			var(--wlre-color-brand-900) 40%,
			var(--wlre-color-brand-800) 100%
		);
}
.wlre-property-card__image--carousel {
	touch-action: pan-y;
}

.wlre-property-card__image img,
.wlre-property-card__slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

/* === Carousel — stacked slides with opacity cross-fade. === */
.wlre-property-card__slides {
	position: absolute;
	inset: 0;
}
.wlre-property-card__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity;
}
.wlre-property-card__slide.is-active {
	opacity: 1;
}

/* Arrow buttons fade in on card hover / focus-within (desktop). On mobile
 * (hover:none) they stay visible so taps work immediately. */
.wlre-property-card__carousel-arrow {
	position: absolute;
	top: 50%;
	width: 32px;
	height: 32px;
	border-radius: var(--wlre-radius-sm);
	background: rgba(255, 255, 255, 0.6);
	color: var(--wlre-color-text-900);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(10, 36, 56, 0.16);
	opacity: 0;
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
	transform: translateY(-50%) scale(0.92);
	z-index: 3;
}
.wlre-property-card__carousel-arrow:hover {
	background: var(--wlre-color-white);
	transform: translateY(-50%) scale(1);
}
.wlre-property-card__carousel-arrow--prev {
	inset-inline-start: var(--wlre-space-12);
	background: rgba(255, 255, 255, 0.6);
}
.wlre-property-card__carousel-arrow--next {
	inset-inline-end: var(--wlre-space-12);
	background: var(--wlre-color-white);
}
[dir="rtl"] .wlre-property-card__carousel-arrow svg {
	transform: scaleX(-1);
}
.wlre-property-card:hover .wlre-property-card__carousel-arrow,
.wlre-property-card:focus-within .wlre-property-card__carousel-arrow {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}
@media (hover: none) {
	.wlre-property-card__carousel-arrow {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}
}

/* Dots: tiny bars at bottom, active bar is wider + brighter. Matches
 * Figma canonical (carousel-dots, node 6360:148115). */
.wlre-property-card__carousel-dots {
	position: absolute;
	inset-block-end: var(--wlre-space-12);
	inset-inline: 0;
	display: flex;
	gap: var(--wlre-space-8);
	justify-content: center;
	z-index: 3;
}
.wlre-property-card__carousel-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: width 0.25s ease, background 0.25s ease;
}
.wlre-property-card__carousel-dot.is-active {
	width: 16px;
	background: var(--wlre-color-white);
}
.wlre-property-card__carousel-dot:hover {
	background: var(--wlre-color-white);
}

.wlre-property-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(255, 255, 255, 0.25);
}

/* === Card body === */
.wlre-property-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-16);
	flex-shrink: 0;
}

.wlre-property-card__price {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: var(--wlre-font-size-h4);
	line-height: var(--wlre-line-height-heading);
	color: var(--wlre-color-text-900);
	margin: 0;
}

/* "/month" suffix on rental prices — same weight and size as the amount,
 * separated by a single space (Figma: "€ 900 /mese"). */
.wlre-property-card__price-period {
	margin-inline-start: 0.25em;
}

.wlre-property-card__title {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: var(--wlre-font-size-h6);
	line-height: var(--wlre-line-height-heading);
	color: var(--wlre-color-text-900);
	margin: 0;
}

/* Type + specs row */
.wlre-property-card__specs {
	display: flex;
	align-items: center;
	gap: var(--wlre-space-8);
	flex-wrap: wrap;
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: var(--wlre-font-size-l);
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-text-900);
}

.wlre-property-card__spec {
	display: inline-flex;
	align-items: center;
	gap: var(--wlre-space-8);
}

/* Icon wrapper span from wlre_icon() */
.wlre-property-card__spec-icon {
	display: inline-flex;
	width: var(--wlre-space-16);
	height: var(--wlre-space-16);
	flex-shrink: 0;
}

.wlre-property-card__spec-icon svg {
	width: 100%;
	height: 100%;
}

.wlre-property-card__spec svg {
	width: var(--wlre-space-16);
	height: var(--wlre-space-16);
	color: var(--wlre-color-text-900);
	flex-shrink: 0;
}

/* Spec sub-group: bed/bath/surface without separators between them */
.wlre-property-card__spec-group {
	display: flex;
	align-items: center;
	gap: var(--wlre-space-8);
}

/* Details wrapper (title + specs-area with 8px gap) */
.wlre-property-card__details {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-8);
}

/* Specs area (type-specs row + location, 8px gap) */
.wlre-property-card__specs-area {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-8);
}

/* Vertical line divider between type and specs (Figma: 1px × 12px) */
.wlre-property-card__divider {
	width: 1px;
	height: var(--wlre-space-12);
	background: var(--wlre-color-neutral-400);
	flex-shrink: 0;
}

/* Legacy dot separator — kept for backwards compat, styled as line */
.wlre-property-card__dot {
	width: 1px;
	height: var(--wlre-space-12);
	background: var(--wlre-color-neutral-400);
	flex-shrink: 0;
}

/* Location row */
.wlre-property-card__location {
	display: flex;
	align-items: center;
	gap: var(--wlre-space-8);
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: var(--wlre-font-size-l);
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-text-900);
	margin: 0;
}

.wlre-property-card__location svg {
	width: var(--wlre-space-16);
	height: var(--wlre-space-16);
	color: var(--wlre-color-text-900);
	flex-shrink: 0;
}

/* === Actions row === */
.wlre-property-card__actions {
	display: flex;
	align-items: center;
	gap: var(--wlre-space-12);
	margin-top: var(--wlre-space-4); /* Body gap(16) + 4 = 20px visual spacing from text to buttons */
}

.wlre-property-card__visit {
	flex: 1 0 100px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wlre-space-4);
	height: var(--wlre-tap-target);
	padding: 0 var(--wlre-space-24);
	background: var(--wlre-color-accent-500);
	color: var(--wlre-color-text-900);
	border: none;
	border-radius: var(--wlre-radius-sm);
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: var(--wlre-font-size-m);
	line-height: var(--wlre-line-height-body);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.wlre-property-card__visit:hover {
	background-color: var(--wlre-color-accent-600);
}

/* === Sponsored card variant + ribbon — Figma node 6705:312022 (Ad/Grid/Desktop).
 * The card itself takes a cream fill with a yellow-gold hairline border so the
 * sponsored slot reads as a paid placement at a glance. The pill in the image
 * tile uses the Warning palette (warm amber-on-cream), matching paid-placement
 * conventions in Italian real-estate portals. === */
.wlre-property-card--sponsored {
	background: #faf8f4; /* New UI / Secondary / Cream */
	border: 1px solid #c9a961; /* New UI / Secondary / Yellow gold */
}
.wlre-property-card__sponsored-badge {
	position: absolute;
	top: var(--wlre-space-8);
	inset-inline-start: var(--wlre-space-8);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 6px 20px;
	background: #fff4e6; /* New UI / Semantic / Warning 2 */
	border: 1px solid #904110; /* New UI / Semantic / Warning 1 */
	color: #904110;
	border-radius: 40px;
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: var(--wlre-font-size-s);
	line-height: var(--wlre-line-height-body);
	letter-spacing: 0.02em;
	pointer-events: none;
}

.wlre-property-card__visit svg {
	width: var(--wlre-space-20);
	height: var(--wlre-space-20);
}

.wlre-property-card__visit-icon {
	display: inline-flex;
	width: var(--wlre-space-20);
	height: var(--wlre-space-20);
	flex-shrink: 0;
}

.wlre-property-card__visit-icon svg {
	width: 100%;
	height: 100%;
}

/* Save-btn icon toggle — must live here (globally loaded) because
 * saved-properties.css is page-conditional and not loaded on the home page.
 * Without these rules both icon states render simultaneously, inflating the
 * heart button width and pushing the WhatsApp button outside the card. */
.wlre-save-btn .wlre-save-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wlre-save-btn .wlre-save-btn__icon--on {
	display: none;
}

.wlre-save-btn.is-saved .wlre-save-btn__icon--off {
	display: none;
}

.wlre-save-btn.is-saved .wlre-save-btn__icon--on {
	display: inline-flex;
	color: #95231f;
}

/* Action buttons: save + WhatsApp — rectangular with 8px radius (NOT circular) */
.wlre-property-card__action-btn {
	height: var(--wlre-tap-target);
	padding: var(--wlre-space-16);
	border-radius: var(--wlre-radius-sm);
	border: 1px solid var(--wlre-color-text-900);
	background: transparent;
	color: var(--wlre-color-text-900);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	flex-shrink: 0;
}

.wlre-property-card__action-btn:hover {
	background: var(--wlre-color-surface-50);
}

.wlre-property-card__action-btn svg {
	width: var(--wlre-space-20);
	height: var(--wlre-space-20);
}

.wlre-property-card__action-label {
	display: none;
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-m);
	font-weight: 700;
	line-height: var(--wlre-line-height-body);
	color: currentColor;
}

/* === Zoom variant — Figma 4004:4521 (Home carousels).
 * Adds: bottom-up gradient on image, "Off-Plan"-style status pill top-right
 * in place of the top-left sponsored ribbon. Inherits everything else
 * from the default card (including shared dot style). */
.wlre-property-card--zoom .wlre-property-card__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.4) 0%,
		rgba(0, 0, 0, 0) 40%
	);
	pointer-events: none;
	z-index: 1;
}

/* Status pill (Off-Plan / Ready / Resale) — top-right, white pill. */
.wlre-property-card__status-pill {
	position: absolute;
	top: var(--wlre-space-8);
	inset-inline-end: var(--wlre-space-8);
	z-index: 3;
	height: 32px;
	padding: 0 var(--wlre-space-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wlre-color-white);
	color: var(--wlre-color-text-900);
	border-radius: 40px;
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: var(--wlre-font-size-m);
	line-height: 1;
	letter-spacing: 0.02em;
	box-shadow: 0 2px 6px rgba(10, 36, 56, 0.18);
	pointer-events: none;
	white-space: nowrap;
}

/* Square chevrons centred vertically per Figma zoom variant. */
.wlre-property-card--zoom .wlre-property-card__carousel-arrow {
	width: 32px;
	height: 32px;
	border-radius: var(--wlre-radius-sm);
	background: rgba(255, 255, 255, 0.6);
}

.wlre-property-card--zoom .wlre-property-card__carousel-arrow--next {
	background: var(--wlre-color-white);
}

.wlre-property-card--zoom .wlre-property-card__carousel-arrow:hover {
	background: var(--wlre-color-white);
}


/* === Responsive === */
@media (max-width: 767px) {
	.wlre-property-card {
		width: 303px;
		height: auto;
		padding: var(--wlre-space-12);
		gap: var(--wlre-space-12);
	}

	.wlre-property-card__status-pill {
		height: 28px;
		padding: 0 var(--wlre-space-12);
		font-size: var(--wlre-font-size-s);
	}

	.wlre-property-card__image {
		flex: none;
		height: 180px;
	}

	.wlre-property-card__price {
		font-size: var(--wlre-font-size-h5);
	}

	.wlre-property-card__title {
		font-size: var(--wlre-font-size-l);
	}

	.wlre-property-card__specs {
		font-size: var(--wlre-font-size-m);
	}

	.wlre-property-card__location {
		font-size: var(--wlre-font-size-m);
	}

	.wlre-property-card__actions {
		margin-top: 0;
		gap: var(--wlre-space-8);
	}

	/* Compact action row: tighter padding on all three buttons so the full
	 * row (Appuntamento + heart + WhatsApp) fits within the 303px card. */
	.wlre-property-card__visit {
		padding-inline: var(--wlre-space-12);
		height: 44px;
	}

	.wlre-property-card__action-btn {
		padding: var(--wlre-space-8);
		min-width: 44px;
		height: 44px;
	}
}