/* The gallery is a flex row: tiles grow into whatever space is left over so the right edge is
   never ragged. Only the width grows - the height stays put, so a short last row widens instead
   of turning one photo into a full-width square. They stop growing at a third of the row (less the
   two 10px gutters of a row of three), so one or two photos stay thumbnails rather than a banner */
#photos-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.thumb_container {
	flex: 1 1 150px;
	max-width: calc((100% - 20px) / 3);
	height: 150px;
	overflow: hidden;
	background-color: #f5f5f5;
}

/* The no-photos notice is a flex child too, and would otherwise shrink to its text */
#photos-container .alert {
	flex: 1 1 100%;
	margin-bottom: 0px;
}

.thumb_container a {
	display: block;
	width: 100%;
	height: 100%;
}

.thumb_image {
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Mobile: a 150px tile and its gutter can't sit three across a phone-width panel, and the cap
   would leave each one alone on its row with empty space beside it - so they take a third each */
@media (max-width: 600px) {

	.thumb_container {
		flex-basis: calc((100% - 20px) / 3);
	}
}

#vehicle-price-container {
	color: #333;
	font-weight: 600;
}

.vehicle-dealership-map {
	margin-top: 15px;
	border-radius: 4px;
	overflow: hidden;
}

#vehicle-dealership-map-container iframe {
	display: block;
	width: 100%;
}

/* Sticky action bar - the Call / Send us a message buttons from the top of the page follow
   the visitor down in a translucent bar once the inline ones scroll up under the header */
#vehicle-sticky-actions {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1020;
	padding: 8px 0;
	background-color: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-100%);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

#vehicle-sticky-actions.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Phones.

   The three actions are btn-lg, and one of them is pulled left of the two the row right-aligns.
   Side by side they are wider than any phone, so what a visitor actually got was a ragged stack at
   three different widths with a stray 5px indent under it - and the same three in the sticky bar,
   which then stood about a third of the screen tall over the page it was following.

   Inline they become one full width button per line. In the sticky bar they stay on one row,
   sharing it equally at a size that fits - a bar that follows the visitor down the page has to
   stay a bar. */

@media (max-width: 767px) {

	#vehicle-action-buttons {
		text-align: left;
	}

	#vehicle-action-buttons .col-xs-12 > a {
		display: block;
	}

	#vehicle-action-buttons .btn {
		display: block;
		width: 100%;
		float: none;
		margin-left: 0px !important;
		margin-bottom: 8px;
	}

	#vehicle-sticky-actions {
		padding: 6px 0;
	}

	#vehicle-sticky-actions .col-xs-12 {
		display: flex;
		align-items: stretch;
		text-align: center;
	}

	#vehicle-sticky-actions .col-xs-12 > a {
		display: flex;
		flex: 1 1 0px;
		min-width: 0px;
		margin-left: 5px;
	}

	#vehicle-sticky-actions .btn {
		flex: 1 1 0px;
		float: none;
		min-width: 0px;
		margin-left: 5px !important;
		padding: 7px 5px;
		font-size: 12px;
		line-height: 1.25;
		white-space: normal;
	}

	#vehicle-sticky-actions .col-xs-12 > :first-child,
	#vehicle-sticky-actions .col-xs-12 > :first-child .btn {
		margin-left: 0px !important;
	}
}

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