/**
 * Milestone 1 component styles — property card, agent card, search form (spec 25 req. 2/3).
 * Everything reads from tokens.css custom properties; no hardcoded colors/spacing here so a
 * single token change propagates without touching this file (spec 25 acceptance criteria).
 */

body {
	background: var(--nd-color-background);
	color: var(--nd-color-text);
	font-family: var(--nd-font-body);
}

/* Property card — one consolidated widget, presets vary via modifier class only (spec 08 req. 2) */
.nd-property-grid {
	display: grid;
	grid-template-columns: repeat(var(--nd-grid-columns, 3), 1fr);
	gap: var(--nd-space-4);
}

.nd-property-card {
	background: var(--nd-color-surface);
	border: 1px solid var(--nd-color-border);
	border-radius: var(--nd-radius-md);
	overflow: hidden;
	transition: transform var(--nd-motion-base) var(--nd-motion-easing), box-shadow var(--nd-motion-base) var(--nd-motion-easing);
}

.nd-property-card:hover {
	box-shadow: var(--nd-shadow-md);
	transform: translateY(-2px);
}

.nd-property-card--compact-list-row {
	display: flex;
	align-items: center;
}

.nd-property-card__media {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--nd-color-border);
}

.nd-property-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nd-badge {
	position: absolute;
	top: var(--nd-space-2);
	left: var(--nd-space-2);
	padding: var(--nd-space-1) var(--nd-space-2);
	border-radius: var(--nd-radius-sm);
	font-size: var(--nd-font-size-sm);
	background: var(--nd-color-primary);
	color: var(--nd-color-primary-contrast);
}

.nd-property-card__body {
	padding: var(--nd-space-3);
}

.nd-property-card__price {
	color: var(--nd-color-primary);
	font-weight: 600;
}

.nd-property-card__meta {
	display: flex;
	gap: var(--nd-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--nd-color-text-muted);
	font-size: var(--nd-font-size-sm);
}

/* Agent card */
.nd-agent-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--nd-space-4);
}

.nd-agent-card {
	background: var(--nd-color-surface);
	border: 1px solid var(--nd-color-border);
	border-radius: var(--nd-radius-md);
	padding: var(--nd-space-3);
	text-align: center;
}

.nd-agent-card__media img {
	border-radius: 50%;
	width: 96px;
	height: 96px;
	object-fit: cover;
}

/* Search form */
.nd-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nd-space-2);
	background: var(--nd-color-surface);
	border: 1px solid var(--nd-color-border);
	border-radius: var(--nd-radius-md);
	padding: var(--nd-space-3);
	margin-bottom: var(--nd-space-4);
}

.nd-search-form input,
.nd-search-form select {
	padding: var(--nd-space-2);
	border: 1px solid var(--nd-color-border);
	border-radius: var(--nd-radius-sm);
	background: var(--nd-color-background);
	color: var(--nd-color-text);
}

.nd-search-form__submit {
	background: var(--nd-color-primary);
	color: var(--nd-color-primary-contrast);
	border: none;
	border-radius: var(--nd-radius-sm);
	padding: var(--nd-space-2) var(--nd-space-4);
	cursor: pointer;
}

/* Dashboard shell (spec 09) */
.nd-dashboard {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--nd-space-4);
}

.nd-dashboard__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--nd-space-1);
}

.nd-dashboard__nav a {
	display: block;
	padding: var(--nd-space-2) var(--nd-space-3);
	border-radius: var(--nd-radius-sm);
	color: var(--nd-color-text);
	text-decoration: none;
}

.nd-dashboard__nav li.is-active a {
	background: var(--nd-color-primary);
	color: var(--nd-color-primary-contrast);
}

/* CRM Kanban board (spec 11 req. 4) */
.nd-crm-board {
	display: flex;
	gap: var(--nd-space-3);
	overflow-x: auto;
}

.nd-crm-board__column {
	flex: 0 0 260px;
	background: var(--nd-color-surface);
	border: 1px solid var(--nd-color-border);
	border-radius: var(--nd-radius-md);
	padding: var(--nd-space-2);
}

.nd-crm-board__card {
	background: var(--nd-color-background);
	border: 1px solid var(--nd-color-border);
	border-radius: var(--nd-radius-sm);
	padding: var(--nd-space-2);
	margin-bottom: var(--nd-space-2);
	cursor: grab;
}

/* CTA Banner (spec 08 v1.1 — added for the Gutenberg-block pass) */
.nd-cta-banner {
	position: relative;
	background-size: cover;
	background-position: center;
	border-radius: var(--nd-radius-lg);
	padding: var(--nd-space-5) var(--nd-space-4);
	text-align: center;
	color: var(--nd-color-primary-contrast);
}

.nd-cta-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	border-radius: inherit;
}

.nd-cta-banner__content {
	position: relative;
}

.nd-cta-banner__button {
	display: inline-block;
	margin-top: var(--nd-space-3);
	background: var(--nd-color-primary);
	color: var(--nd-color-primary-contrast);
	padding: var(--nd-space-2) var(--nd-space-4);
	border-radius: var(--nd-radius-sm);
	text-decoration: none;
}

/* Single-property modules (spec 02 — PropertyModules) */
.nd-single-property {
	display: flex;
	flex-direction: column;
	gap: var(--nd-space-5);
}

.nd-module {
	padding: var(--nd-space-4) 0;
	border-bottom: 1px solid var(--nd-color-border);
}

.nd-module:last-child {
	border-bottom: none;
}

.nd-single-property__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--nd-space-2);
}

.nd-energy-badge {
	display: inline-block;
	background: var(--nd-color-primary);
	color: var(--nd-color-primary-contrast);
	padding: var(--nd-space-1) var(--nd-space-3);
	border-radius: var(--nd-radius-sm);
	font-weight: 700;
}

@media (max-width: 767px) {
	.nd-property-grid {
		grid-template-columns: 1fr;
	}

	.nd-dashboard {
		grid-template-columns: 1fr;
	}
}