@charset "utf-8";
/* CSS Document */

/* Vehicle carousel - the row of vehicle cards with arrows: "You may also like" on the vehicle page and the featured / latest rows of a home page.
   Driven by js/vehicle/vehicle-carousel.js, which mirrors the breakpoints below instead of measuring widths and sets up every .vehicle-carousel on a page
   independently (a theme's own rows of other cards - reviews - can use the same classes and add their own rules).

   Moved here from the DealerShark theme's style.css so the pack's cards read the same under any theme. Specificity is unchanged from where it lived, so a theme
   that styles these classes keeps winning with a selector as specific as the one it overrides, or one more class. */

/* Vehicle carousel - shared by the home page (featured / latest additions) and the vehicle
   details page ("You may also like"), driven by js/vehicle/vehicle-carousel.js */
.vehicle-carousel {
	position: relative;
	padding: 0 50px;
}

.vehicle-carousel-viewport {
	overflow: hidden;
}

.vehicle-carousel-track {
	display: flex;
	transition: transform 0.4s ease;
}

.vehicle-carousel-card {
	flex: 0 0 25%;
	max-width: 25%;
	box-sizing: border-box;
	padding: 0 10px;
	display: flex;
}

.vehicle-carousel-card a {
	display: flex;
	width: 100%;
}

@media (max-width: 991px) {
	.vehicle-carousel-card { flex-basis: 33.3333%; max-width: 33.3333%; }
}

@media (max-width: 767px) {
	.vehicle-carousel-card { flex-basis: 50%; max-width: 50%; }
}

@media (max-width: 480px) {
	.vehicle-carousel-card { flex-basis: 100%; max-width: 100%; }
}

.vehicle-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #ddd;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
	cursor: pointer;
}

.vehicle-carousel-arrow:hover {
	background: #f5f5f5;
}

.vehicle-carousel-prev {
	left: 0;
}

.vehicle-carousel-next {
	right: 0;
}

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

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

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

.vehicle-carousel-card .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. */
.vehicle-carousel-card .result-picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/*Sheen sweep across the photo while the card 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. Same effect the search tiles carry, see css/search/search.css.

  ?It animates transform rather than left, so the sweep stays on the compositor and never reflows the
  ?card. 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*/
.vehicle-carousel-card .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);
}

.vehicle-carousel-card .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) {
	.vehicle-carousel-card .result-panel:hover .result-picture:after {
		animation: none;
	}
}

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

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

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

.vehicle-carousel-card a {
	color: inherit;
	text-decoration: none;
}

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

/* Fewer cards than the viewport holds - vehicle-carousel.js flags the carousel as static so the
   short row centers itself instead of hugging the left edge, and the dead arrows come off */
.vehicle-carousel.vehicle-carousel-static .vehicle-carousel-track {
	justify-content: center;
}

.vehicle-carousel.vehicle-carousel-static .vehicle-carousel-arrow {
	display: none;
}

/* One card in the row - it takes the whole width rather than sitting at a quarter of it in the
   middle of an empty strip. :only-child rather than a flag from the JS so it holds for every row
   built out of these classes at every breakpoint, the review rows included, and over the phone
   peek width below - with nothing beside it there is nothing left to peek at */
.vehicle-carousel .vehicle-carousel-track .vehicle-carousel-card:only-child {
	flex-basis: 100%;
	max-width: 100%;
}


/* Phones: 50px of arrow gutter on each side of a 360px screen left the card itself under 260px
   wide. The arrows come off the gutter and sit over the edge of the row instead.
   The card used to be given 85% here so the next one peeked out beside it - the row is swiped
   (see the swipe handler in vehicle-carousel.js) and the peek is what says so. It was cut: once
   the row is down to one card across, that card is the whole row, and a screen this narrow has
   nothing to spare for half of the next one */
@media (max-width: 767px) {
	.vehicle-carousel {
		padding: 0 8px;
	}

	.vehicle-carousel-arrow {
		width: 36px;
		height: 36px;
		background: rgba(255,255,255,.92);
	}

	.vehicle-carousel-prev {
		left: 2px;
	}

	.vehicle-carousel-next {
		right: 2px;
	}
}