/**
 * NLS Property Hub — card + grid components. Scoped under .nlsph. RTL-safe via
 * logical properties. Consumes tokens from tokens.css.
 */

.nlsph .nlsph-cards {
	display: grid;
	/* auto-FIT, not auto-fill: auto-fill keeps empty trailing tracks reserved, so
	   any result count that is not a multiple of the column count strands the
	   last row's cards against visible blank space. auto-fit collapses them. */
	grid-template-columns: repeat(auto-fit, minmax(var(--nlsph-card-min), 1fr));
	gap: var(--nlsph-space-5);
	margin-block: var(--nlsph-space-5);
}

.nlsph .nlsph-cards--compact {
	grid-template-columns: 1fr;
	gap: var(--nlsph-space-3);
	margin-block: var(--nlsph-space-3);
}

/* --- Card -------------------------------------------------------------- */
.nlsph .nlsph-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--nlsph-surface);
	border: var(--nlsph-border);
	border-radius: var(--nlsph-radius);
	overflow: hidden;
	box-shadow: var(--nlsph-shadow-sm);
	transition: box-shadow var(--nlsph-transition), transform var(--nlsph-transition);
}

.nlsph .nlsph-card:hover,
.nlsph .nlsph-card:focus-within {
	box-shadow: var(--nlsph-shadow);
	transform: translateY(-2px);
}

.nlsph .nlsph-card__link {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	color: inherit;
	text-decoration: none;
}

.nlsph .nlsph-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--nlsph-surface-2);
	overflow: hidden;
}

.nlsph .nlsph-card__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--nlsph-transition);
}

.nlsph .nlsph-card:hover .nlsph-card__img {
	transform: scale(1.04);
}

.nlsph .nlsph-card__img--placeholder {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	background:
		linear-gradient(135deg, var(--nlsph-surface-2), var(--nlsph-line));
}

/* --- Badges ------------------------------------------------------------ */
.nlsph .nlsph-badge {
	position: absolute;
	inset-block-start: var(--nlsph-space-3);
	inset-inline-start: var(--nlsph-space-3);
	padding: var(--nlsph-space-1) var(--nlsph-space-3);
	font-size: var(--nlsph-fs-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border-radius: 999px;
	background: var(--nlsph-badge-bg);
	color: var(--nlsph-badge-ink);
}

.nlsph .nlsph-badge--rent {
	inset-inline-start: auto;
	inset-inline-end: var(--nlsph-space-3);
	background: var(--nlsph-accent);
	color: #fff;
}

/* --- Card body --------------------------------------------------------- */
.nlsph .nlsph-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--nlsph-space-2);
	padding: var(--nlsph-space-4);
}

.nlsph .nlsph-card__price {
	margin: 0;
	font-family: var(--nlsph-font-serif);
	font-size: var(--nlsph-fs-xl);
	font-weight: 600;
	color: var(--nlsph-brand);
	line-height: var(--nlsph-lh-tight);
}

.nlsph .nlsph-card__title {
	margin: 0;
	font-size: var(--nlsph-fs-base);
	font-weight: 600;
	line-height: var(--nlsph-lh-tight);
	color: var(--nlsph-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nlsph .nlsph-card__loc {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--nlsph-space-1);
	font-size: var(--nlsph-fs-sm);
	color: var(--nlsph-text-muted);
}

.nlsph .nlsph-card__ref {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: var(--nlsph-space-1);
	font-size: var(--nlsph-fs-xs, 0.78rem);
	color: var(--nlsph-text-muted);
	letter-spacing: 0.02em;
}

.nlsph .nlsph-card__ref-lbl {
	text-transform: uppercase;
	opacity: 0.75;
}

.nlsph .nlsph-card__ref-val {
	font-variant-numeric: tabular-nums;
	/* An agency reference is a copyable identifier, so let it be selected
	   without dragging the rest of the card text along. */
	user-select: all;
}

/* The network listing id sits beside the agency reference, subordinate to it:
   the agency reference is the one a buyer quotes back to the agent. */
.nlsph .nlsph-card__ref-id {
	display: inline-flex;
	align-items: baseline;
	gap: var(--nlsph-space-1);
	opacity: 0.6;
}

.nlsph .nlsph-card__ref-id::before {
	content: "\00B7";
	margin-inline-end: var(--nlsph-space-1);
	opacity: 0.8;
}

.nlsph .nlsph-card__loc-ico {
	inline-size: 0.85em;
	block-size: 0.85em;
	border-radius: 50% 50% 50% 0;
	background: currentColor;
	transform: rotate(-45deg);
	flex: 0 0 auto;
	opacity: 0.7;
}

.nlsph .nlsph-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nlsph-space-4);
	margin: var(--nlsph-space-1) 0 0;
	padding: var(--nlsph-space-3) 0 0;
	border-block-start: var(--nlsph-border);
	list-style: none;
}

.nlsph .nlsph-card__spec {
	display: flex;
	align-items: baseline;
	gap: var(--nlsph-space-1);
	font-size: var(--nlsph-fs-sm);
	color: var(--nlsph-text);
}

.nlsph .nlsph-card__spec-num {
	font-weight: 700;
}

.nlsph .nlsph-card__spec-lbl {
	color: var(--nlsph-text-muted);
	font-size: var(--nlsph-fs-xs);
}

.nlsph .nlsph-card__type {
	margin: 0;
	font-size: var(--nlsph-fs-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nlsph-text-muted);
}

/* --- Compact (widget) variant ----------------------------------------- */
.nlsph .nlsph-card--compact {
	flex-direction: row;
}

.nlsph .nlsph-card--compact .nlsph-card__link {
	flex-direction: row;
}

.nlsph .nlsph-card--compact .nlsph-card__media {
	aspect-ratio: 1 / 1;
	inline-size: 96px;
	flex: 0 0 96px;
}

.nlsph .nlsph-card--compact .nlsph-card__body {
	padding: var(--nlsph-space-3);
	gap: var(--nlsph-space-1);
}

.nlsph .nlsph-card--compact .nlsph-card__price {
	font-size: var(--nlsph-fs-base);
}

/* --- Empty state ------------------------------------------------------- */
.nlsph .nlsph-empty {
	padding: var(--nlsph-space-6);
	text-align: center;
	color: var(--nlsph-text-muted);
	background: var(--nlsph-surface-2);
	border-radius: var(--nlsph-radius);
}