/******************************************************************************
 *
 * CRDM listing result cards and toolbar
 *
 * Shared by the real estate, vacation rental and vacation special searches.
 * Keeps the established grid and list layouts intact while giving each result
 * its own visual surface.
 *
 ******************************************************************************/

.crdm-listing-card {
	box-sizing: border-box;
	padding: 16px 8px;
	background:
		radial-gradient(circle at calc(100% + 22px) calc(100% + 22px), rgba(214, 180, 123, .065) 0 92px, transparent 93px),
		linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .008)),
		var(--crdm-surface-raised);
	border: 1px solid var(--crdm-border);
	border-top: 3px solid var(--crdm-brand-gold);
	border-radius: var(--crdm-radius-md);
	box-shadow: var(--crdm-shadow-inset);
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

@media (hover: hover) and (pointer: fine) {
	.crdm-listing-card:hover {
		border-color: rgba(214, 180, 123, .48);
		box-shadow: var(--crdm-shadow-inset), 0 10px 22px rgba(0, 0, 0, .16);
		transform: translateY(-2px);
	}
}

/* Keep the legacy floated grid aligned in predictable rows. */
.box-wrapper > .box1:nth-child(3n + 1) {
	clear: left;
}

@media all and (max-width: 1023px) {
	.box-wrapper > .box1:nth-child(3n + 1) {
		clear: none;
	}

	.box-wrapper > .box1:nth-child(2n + 1) {
		clear: left;
	}
}

@media all and (min-width: 768px) and (max-width: 1023px) {
	.box2 .crdm-listing-card .img-wrapp img {
		width: calc(50% - 10px) !important;
		height: auto !important;
	}
}

.listing-results-toolbar {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 22px;
	padding: 12px 14px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 18px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, .006)),
		var(--crdm-surface-raised);
	border: 1px solid var(--crdm-border);
	border-radius: var(--crdm-radius-md);
	box-shadow: var(--crdm-shadow-inset);
}

.entry-content .listing-results-toolbar > p.resultsP {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	flex: 1 1 260px;
}

.listing-results-toolbar > p.resultsP span {
	color: var(--crdm-brand-gold);
	font-weight: bold;
}

.listing-results-toolbar__controls,
.listing-results-sort,
.listing-view-switch,
.listing-view-switch a {
	display: flex;
	align-items: center;
}

.listing-results-toolbar__controls {
	margin-left: auto;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px 16px;
}

.listing-results-sort {
	gap: 7px;
}

.listing-results-sort label {
	color: var(--crdm-text-label);
	font: bold 12px/1.2 var(--crdm-font-ui);
}

.listing-results-sort select {
	max-width: 220px;
	margin: 0;
}

.listing-view-switch {
	float: none;
	padding: 0;
	gap: 6px;
}

.listing-view-switch a {
	padding: 5px 7px;
	gap: 4px;
	border: 1px solid transparent;
	border-radius: var(--crdm-radius-sm);
	color: var(--crdm-text-label);
	font: 12px/1 var(--crdm-font-ui);
	text-decoration: none;
}

.listing-view-switch a:hover,
.listing-view-switch a:focus {
	background: rgba(214, 180, 123, .07);
	border-color: rgba(214, 180, 123, .28);
	color: var(--crdm-brand-gold);
}

.listing-view-switch a.is-active,
.listing-view-switch a.is-active:hover,
.listing-view-switch a.is-active:focus {
	background: rgba(214, 180, 123, .14);
	border-color: rgba(214, 180, 123, .58);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
	color: var(--crdm-brand-gold);
}

.listing-view-switch img {
	display: block;
}

.listing-empty-state {
	box-sizing: border-box;
	width: 100%;
	padding: 38px 24px;
	background:
		radial-gradient(circle at calc(100% + 34px) calc(100% + 34px), rgba(214, 180, 123, .07) 0 124px, transparent 125px),
		linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .008)),
		var(--crdm-surface-raised);
	border: 1px solid var(--crdm-border);
	border-top: 3px solid var(--crdm-brand-gold);
	border-radius: var(--crdm-radius-md);
	box-shadow: var(--crdm-shadow-inset);
	text-align: center;
}

.listing-empty-state__icon {
	display: flex;
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	align-items: center;
	justify-content: center;
	background: rgba(214, 180, 123, .09);
	border: 1px solid rgba(214, 180, 123, .3);
	border-radius: 50%;
	color: var(--crdm-brand-gold);
	font-size: 20px;
}

.listing-empty-state__icon > i {
	color: inherit;
}

.listing-empty-state h2 {
	margin: 0 0 9px;
	color: var(--crdm-text-strong);
	font: 28px/1.2 var(--crdm-font-brand);
}

.entry-content .listing-empty-state p {
	max-width: 580px;
	margin: 0 auto 20px;
	padding: 0;
	color: var(--crdm-text-muted);
	font: 15px/1.55 var(--crdm-font-ui);
}

@media all and (max-width: 640px) {
	.box-wrapper > .box1 {
		clear: left;
	}

	.listing-results-toolbar {
		align-items: stretch;
	}

	.listing-results-toolbar__controls {
		width: 100%;
		margin-left: 0;
		justify-content: space-between;
	}

	.listing-results-sort {
		flex: 1 1 220px;
	}

	.listing-results-sort select {
		min-width: 0;
		max-width: 100%;
		flex: 1;
	}

	.listing-empty-state {
		padding: 30px 18px;
	}

	.listing-empty-state h2 {
		font-size: 24px;
	}
}