/**
 * Search Results Page Styles
 *
 * Styles for the search results page and listing grid
 *
 * Dependencies: ssa-base
 * Extracted from: styles.css lines 294-347, responsive rules from 768px, 480px
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */

.search-results .content {
	padding-top: 70px;
	padding-bottom: 70px;
}

.search-results .content > h1 {
	color: var(--brand-main);
	font-size: 42px;
	letter-spacing: -1.5px;
	font-weight: 900;
	margin-bottom: var(--space-8);
}

.search-results .content > p {
	margin-bottom: 30px;
}

#searchList .listing-items-container {
	display: flex;
	flex-wrap: wrap;
	gap: 3%;
}

#searchList .listing-item {
	border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-lg);
	box-shadow: 7px 7px 9px 0 var(--shadow-medium);
	margin-bottom: var(--space-8);
	width: 22.75%;
}

#searchList .listing-item .listing-item-img {
	border-top-left-radius: var(--radius-lg);
	border-top-right-radius: var(--radius-lg);
	display: inline-block;
	height: 146px;
	width: 100%;
}

#searchList .listing-item .listing-item-content {
	font-size: 14px;
	line-height: 18px;
	padding: 16px 24px 34px;
}

#searchList .listing-item .listing-item-content a {
	text-decoration: none;
}

#searchList .listing-item .listing-item-content h4 {
	color: var(--black);
	font-size: 19px;
	line-height: 22px;
	margin-bottom: 30px;
}

/* ==========================================================================
   Responsive: Tablet (768px and below)
   ========================================================================== */

@media (width <= 768px) {
	#searchList .listing-item {
		width: 48.5%;
	}
}

/* ==========================================================================
   Responsive: Mobile (480px and below)
   ========================================================================== */

@media (width <= 480px) {
	.search-results .content {
		padding: 30px 24px;
	}

	#searchList .listing-items-container {
		gap: var(--space-0);
	}

	#searchList .listing-item {
		width: 100%;
	}
}