/* listing-info.css | Jarvis Wong | 2024 */
/* ------------ hero --------------*/
.hero {
	position: relative;
	height: calc(75vh - 100px);
	width: 100%;
}
.status {
	position: absolute;
	right: 0;
	top: 0;
	background-color: rgba(0,0,0,0.5);
	padding: 5px;
	color: white;
	font-size: 2em;
}
.hero-gradient {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 30vh;
	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
}
.hero .block-content {
	padding: 0;
}
.address {
	position: absolute;
	bottom: 0;
	font-size: 2.2em;
	color: white;
	font-weight: normal;
	padding: 0 20px;
	text-shadow: 0px 0px 10px #000000;
}
/* ------------ main info --------------*/
.info-grid {
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1rem;
}
.price {
	grid-column: span 5;
	font-weight: bold;
	font-size: 2em;
}
.featured-info {
	grid-column: span 3;
	padding: 0;
	margin: 0;
}
.featured-info li {
	list-style: none;
	display: inline;
	font-size: 1.2em;
	padding: 0 20px;
	border-left: 1px solid;
}
.featured-info li:first-child {
	padding-left: 0;
	border-left: none;
}
.learn-more {
	grid-column: span 1;
	color: #013228;
	border: solid 2px #013228;
	background-color: white;
	font-size: 1.2em;
	text-align: center;
	border-radius: 5px;
}
.learn-more:hover{
	color: #001614;
	border-color:#001614;
}
.book-showing {
	grid-column: span 1;
	color: white;
	border: solid 2px #013228;
	background-color: #013228;
	font-size: 1.2em;
	text-align: center;
	border-radius: 5px;
}
.book-showing:hover{
	background-color: #001614;
	color: #ec9d0a;
}
@media (max-width:1000px) {
	.featured-info {grid-column: span 5;}
	.learn-more {grid-column: span 2;}
	.book-showing {grid-column: span 3;}
}
@media (max-width:500px) {
	.price {text-align: center;}
	.featured-info li {
		display: block;
		border-left: none;
		padding: 0;
		text-align: center;
	}
	.learn-more {grid-column: span 5;}
	.book-showing {grid-column: span 5;}
}
.sold {
	background-color: rgba(180,0,0,1);
}
/* ------------ details --------------*/
.details-grid {
	padding: 20px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.details {
	width: 100%;
	border-collapse: collapse;
}
.details td {
	border-top: 1px solid;
	padding: 15px;
}
.details tr:first-child td {
	border-top: none;
}
@media (max-width:1000px) {
	.details-grid {
		display: block;
	}
}
@media (max-width:500px) {
	.details td {
		display: block;
		text-align: center;
	}
	.details tr td:last-child {
		border-top: none;
	}
}
/* END */