/*The search page's own top spacing, on the container inside .content rather than on #top-content
  itself - that element's padding is the fixed header's clearance, and the site banner handler in
  php/includes/page-js.php recalculates it whenever a banner is set.

  ?Used to be an inline <style> block printed above search.php's include of config.php - which sent
  ?output before config.php could send its https redirect header, so that redirect fell back to a
  ?javascript hop instead of a 301*/
.search-page {
	padding-top: 25px;
}

/*Page heading - sits above the result count, at the size the rest of the site's page headings use*/
#search-page-heading {
	font-size: 30px;
	margin-top: 0;
	margin-bottom: 8px;
}

.results-row {
	display: flex;
	flex-wrap: wrap;
}

.result_container {
	margin-bottom: 20px;
	display: flex;
}

.result_container a {
	display: flex;
	width: 100%;
}

.result-panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow 0.2s ease;
}

.result-panel:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.result-panel .panel-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.result-picture {
	width: 100%;
	height: 180px;
	background-color: #f5f5f5;
	overflow: hidden;
	position: relative;
}

/* The photo used to be this box's background-image, which is invisible to image search.
   It is a real <img> now; object-fit reproduces exactly what background-size: cover was
   doing, so the tile crops and sizes the way it always did. */
.result-picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/*Sheen sweep across the photo while the tile is hovered - a skewed band of light that crosses the
  picture once, left to right. The band is a pseudo-element of .result-picture, which already clips
  its children (overflow: hidden), so the light never shows outside the photo box and no markup had
  to change to get it.

  ?It animates transform rather than left, so the sweep stays on the compositor and never reflows the
  ?tile. At rest the band sits off the left edge and the keyframes carry it past the right edge, so
  ?at every moment other than the sweep itself it is outside the clip and invisible*/
.result-picture:after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	pointer-events: none;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
	transform: skewX(-20deg) translateX(0);
}

.result-panel:hover .result-picture:after {
	animation: result-picture-sheen 0.85s ease-out;
}

@keyframes result-picture-sheen {
	from { transform: skewX(-20deg) translateX(0); }
	to   { transform: skewX(-20deg) translateX(400%); }
}

@media (prefers-reduced-motion: reduce) {
	.result-panel:hover .result-picture:after {
		animation: none;
	}
}

.result-title {
	margin-top: 0;
	margin-bottom: 5px;
	font-size: 16px;
}

.result-meta {
	color: #777;
	font-size: 13px;
	margin-bottom: 5px;
}

.result-price {
	font-size: 18px;
	font-weight: 600;
	margin-top: auto;
}

#result-filter-container a,
.result_container a {
	color: inherit;
	text-decoration: none;
}

/*Tile / table toggle above the results - outside #resultscontainer, which the ajax refill empties*/
.search-results-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10px;
}

/*Table view - see VehicleInventory::resultTableHtml().
  ?Every cell holds a link to the vehicle, and the link is what carries the padding, so a click
  ?anywhere on the row lands on the vehicle. Every link has the same min-height - the photo plus its
  ?padding - so they all fill the row and the text sits centred beside the photo.
  ?This used to be height: 1px on the cell and height: 100% on the link. Chrome resolves that against
  ?the finished row, Safari takes 100% of the 1px literally, which left every row 17.5px tall with the
  ?photo spilling out of it. A fixed min-height means the same thing in every browser*/
.results-table-container {
	background-color: #fff;
	margin-bottom: 20px;
}

.results-table {
	margin-bottom: 0;
}

.results-table > thead > tr > th {
	white-space: nowrap;
}

.results-table > tbody > tr > td {
	padding: 0;
	vertical-align: middle;
}

.results-table > tbody > tr > td > a {
	display: flex;
	align-items: center;
	min-height: 116px;
	padding: 8px;
	color: inherit;
	text-decoration: none;
}

.results-table > tbody > tr > td.text-right > a {
	justify-content: flex-end;
}

/*The photo sets the row height - 100px tall inside the cell's 8px padding, so every row is at least
  116px and the picture always sits inside it. 4:3, which is close to what the lot photos are shot
  at, so cover crops next to nothing off them*/
.results-table .results-table-photo {
	width: 150px;
}

.results-table .results-table-photo img {
	display: block;
	width: 134px;
	height: 100px;
	max-width: none;
	object-fit: cover;
	background-color: #f5f5f5;
	border-radius: 3px;
}

.results-table .results-table-model {
	font-weight: 600;
}

.results-table .result-price {
	font-size: 16px;
	margin-top: 0;
	white-space: nowrap;
}

.results-table .result-price .vehicle-price-was {
	font-size: 13px;
}

/* Sticker price shown beside a sale price - reads as the price that was, see VehicleInventory::displayPrice() */
.result-price .vehicle-price-was {
	color: #999;
	font-size: 15px;
	font-weight: 400;
	margin-right: 4px;
}