/* listings.css | Jarvis Wong | 2024 */
/* ------------ banner --------------*/
.hero {
	height: 100px;
	font-size: 1.5em;
}
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/img/hero-banner.jpg');
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  	overflow: hidden;
	white-space: nowrap;
}
/* ------------ listings --------------*/
.listings-grid {
	padding: 20px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 3rem;
}
.listing {
	background-color: white;
	color: black;
	box-shadow: 0px 0px 20px #888888;
	transition: all 0.1s ease-in-out;
}
.listing:hover {
	transform: scale(1.04); 
}
.listing-image {
	position: relative;
	height: 250px;
}
.listing-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.listing-status {
	position: absolute;
	right: 0;
	top: 0;
	background-color: rgba(0,0,0,0.5);
	padding: 5px;
	color: white;
}
.listing-gradient {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 50%;
	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.listing-address {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	font-size: 1.2em;
	color: white;
	font-weight: normal;
	text-shadow: 0px 0px 5px #000000;
	padding: 5px;
}
.listing-grid{
	padding: 5px;
	display: grid;
	grid:
	'price mls'
	'info info'
	'brokerage brokerage';
}
.listing-price {
	grid-area: price;
	font-weight: bold;
	font-size: 1.5em;
	color: #013228;
}
.listing-mls {
	grid-area: mls;
	text-align: right;
}
.listing-info {
	grid-area: info;
	list-style-type: disc;
	padding-left: 0;
}
.listing-info li {
	display: inline-block;
	border-left: 1px solid;
	padding: 0 5px 0 10px;
}
.listing-info li:first-child {
	border-left: none;
	padding-left: 0;
}
.listing-brokerage {
	grid-area: brokerage;
}
.sold {
	background-color: rgba(180,0,0,1);
}
/* END */