/*Home hero - full-bleed top section, pulled up under the fixed header so it owns the
top of the viewport, with the quick search sitting directly on the background (no card)*/

.home-hero {
	position: relative;
	margin-top: -50px;
	min-height: calc(80vh + 50px);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #263544;
	background-position: center center;
	background-size: cover;
	padding: 90px 0px 70px 0px;
	overflow: hidden;
}

/*Video and YouTube/Vimeo backgrounds sit between the hero's background image - which stays on as
their poster frame - and the overlay. Neither one takes the pointer, the hero search owns it*/

.home-hero-media {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	border: 0;
	pointer-events: none;
}

video.home-hero-media {
	object-fit: cover;
}

.home-hero-embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*The player keeps its own 16:9 box, so it is oversized on whichever axis falls short of the hero*/
	width: 100vw;
	height: 56.25vw;
	min-width: 177.78vh;
	min-height: 100%;
	border: 0;
	pointer-events: none;
}

/*Backgrounds are decoration only - nothing the player would normally draw over the video
may ever show. The native controls are hidden outright, and the YouTube/Vimeo iframe is
oversized past the hero so the player's own title bar and control bar fall outside of it*/

video.home-hero-media::-webkit-media-controls,
video.home-hero-media::-webkit-media-controls-enclosure,
video.home-hero-media::-webkit-media-controls-panel,
video.home-hero-media::-webkit-media-controls-start-playback-button,
video.home-hero-media::-webkit-media-controls-overlay-play-button {
	display: none !important;
	-webkit-appearance: none;
	opacity: 0;
}

.home-hero-embed-youtube iframe {
	/*A bit over 1/8th of the player height is chrome at the top and again at the bottom*/
	transform: translate(-50%, -50%) scale(1.4);
}

.home-hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(12,20,32,.72) 0%, rgba(12,20,32,.55) 45%, rgba(12,20,32,.82) 100%);
}

.home-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	color: #fff;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.home-hero-eyebrow {
	margin: 0px 0px 18px 0px;
	font-size: 14px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(255,255,255,.75);
}

.home-hero-title {
	margin: 0px;
	font-size: 54px;
	line-height: 1.2;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

.home-hero-subtitle {
	margin: 22px 0px 0px 0px;
	font-size: 20px;
	color: rgba(255,255,255,.85);
}

/*Search fields sit bare on the hero - no panel, no border, no shadow around them*/

.home-hero-search {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-end;
	gap: 15px;
	width: 100%;
	max-width: 1000px;
	margin: 40px auto 0px auto;
}

.home-hero-field {
	flex: 1 1 0px;
	min-width: 0px;
	text-align: left;
}

.home-hero-label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255,255,255,.8);
}

.home-hero-search .form-control {
	height: 52px;
	padding: 6px 15px;
	font-size: 16px;
	color: #1b2431;
	background-color: rgba(255,255,255,.96);
	border: none;
	border-radius: 6px;
	box-shadow: none;
}

.home-hero-search .form-control:focus {
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(255,255,255,.35);
}

.home-hero-search .form-control[disabled] {
	background-color: rgba(255,255,255,.6);
	color: #6b7480;
}

.home-hero-field-submit {
	flex: 0 0 auto;
	min-width: 0px;
	white-space: nowrap;
}

.home-hero-search .btn {
	height: 52px;
	padding: 0px 32px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 6px;
}

@media (max-width: 960px) {
	.home-hero {
		min-height: calc(80vh + 50px);
		padding-top: 110px;
	}

	.home-hero-title {
		font-size: 34px;
	}

	.home-hero-subtitle {
		font-size: 17px;
	}
}

@media (max-width: 767px) {
	.home-hero-search {
		display: block;
	}

	.home-hero-field {
		margin-bottom: 15px;
	}

	.home-hero-search .btn {
		width: 100%;
	}
}

/*Shop by body type - one tile per body style actually in stock, each one a link into the
search page with that body filter applied. The art is the theme's own picture for the body
key; a body with no picture keeps the tile and shows the flat fallback behind it*/

.body-types-row {
	background-color: #f5f6f8;
}

/* Flex rather than grid so a partial last row (or a row with fewer tiles than columns) stays
   centered instead of packing to the left. --tile-cols keeps the tiles the same width a grid
   of that many columns would have given them. */
.body-type-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	--tile-cols: 4;
	--tile-gap: 20px;
	gap: var(--tile-gap);
}

.body-type-tile {
	display: block;
	flex: 0 1 calc((100% - (var(--tile-cols) - 1) * var(--tile-gap)) / var(--tile-cols));
	padding: 18px 15px 15px 15px;
	background-color: #fff;
	border: 1px solid #e2e5ea;
	border-radius: 8px;
	text-align: center;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.body-type-tile:hover,
.body-type-tile:focus {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(18,26,38,.12);
	border-color: #cfd4dc;
	text-decoration: none;
}

.body-type-art {
	display: block;
	height: 110px;
	margin-bottom: 12px;
	background-color: #ffffff;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 6px;
}

.body-type-label {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: #1b2431;
}

/* Shop by make - the logos are 200x100 with their own white background, so the tile keeps them on
   white in both themes rather than tinting the row behind them */
.make-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	--tile-cols: 6;
	--tile-gap: 20px;
	gap: var(--tile-gap);
}

.make-tile {
	display: flex;
	flex: 0 1 calc((100% - (var(--tile-cols) - 1) * var(--tile-gap)) / var(--tile-cols));
	flex-direction: column;
	justify-content: center;
	padding: 15px 12px 12px 12px;
	background-color: #fff;
	border: 1px solid #e2e5ea;
	border-radius: 8px;
	text-align: center;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.make-tile:hover,
.make-tile:focus {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(18,26,38,.12);
	border-color: #cfd4dc;
	text-decoration: none;
}

.make-art {
	display: block;
	margin-bottom: 8px;
}

.make-art img {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
	margin: 0 auto;
	border-radius: 4px;
}

.make-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #1b2431;
}

.make-tile-noart {
	min-height: 90px;
}

.make-tile-noart .make-label {
	font-size: 16px;
}

@media (max-width: 991px) {
	.body-type-grid {
		--tile-cols: 3;
	}

	.make-grid {
		--tile-cols: 4;
	}
}

@media (max-width: 767px) {
	.body-type-grid {
		--tile-cols: 2;
		--tile-gap: 15px;
	}

	.body-type-art {
		height: 85px;
	}

	.make-grid {
		--tile-cols: 3;
		--tile-gap: 15px;
	}
}

#index-map-container iframe {
	display: block;
}


/*Section rhythm and headings.

  These were inline on the markup - which meant a 36px heading and 60px of padding above and below
  it on a 360px wide phone, with no way for a media query to say otherwise. They are classes so the
  small screen sizes below can reach them*/

.home-section {
	padding-top: 60px;
	padding-bottom: 60px;
}

.home-section-title {
	margin-top: 0px;
	margin-bottom: 30px;
	font-size: 36px;
}

/*Full width call to action band between the reviews and the map*/

.home-banner {
	max-width: none;
	padding-top: 85px;
	padding-bottom: 85px;
}

.home-banner-title {
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 45px;
	color: #fff;
}

/*Map and dealership details, side by side on a wide screen and stacked below it*/

#index-contact-container {
	max-width: none;
}

.home-contact {
	margin: 0px;
	background: #fff;
}

.home-contact-map {
	padding: 0px;
}

.home-contact-details {
	display: flex;
	align-items: center;
	min-height: 350px;
	background-color: #fff;
}

.home-contact-details-inner {
	width: 100%;
}

.home-contact-list {
	margin-left: 0px;
	padding-left: 0px;
	font-size: 16px;
	line-height: 32px;
	list-style: none;
	text-align: center;
}

/*A finger coming down the page onto the map pans the map instead of scrolling past it, and there
  is no way for the browser to tell the two apart. The embed is deaf until it is tapped once,
  which is the tap that says the visitor means the map. Pointer devices are left alone - a mouse
  has to be moved onto the map deliberately, so there is nothing to disambiguate*/

@media (max-width: 991px) {

	#index-map-container iframe {
		pointer-events: none;
	}

	#index-map-container.map-active iframe {
		pointer-events: auto;
	}
}

@media (max-width: 767px) {

	.home-section {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.home-section-title {
		margin-bottom: 22px;
		font-size: 26px;
	}

	.home-banner {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.home-banner-title {
		font-size: 28px;
	}

	.home-contact-details {
		min-height: 0px;
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.home-contact-list {
		font-size: 15px;
		line-height: 28px;
	}

	/*The hero is the first thing on a phone and the header sits over the top of it - 80% of a
	  short viewport with a 110px cap above the title left the search fields crowded against the
	  bottom edge. Let it be as tall as its contents need instead*/
	.home-hero {
		min-height: 0px;
		padding-bottom: 50px;
	}

	.home-hero-title {
		font-size: 28px;
	}

	.home-hero-eyebrow {
		margin-bottom: 12px;
		font-size: 12px;
		letter-spacing: 2px;
	}

	.home-hero-subtitle {
		margin-top: 14px;
		font-size: 16px;
	}

	.home-hero-search {
		margin-top: 25px;
	}

	/*52px is a comfortable target; the select is what a phone opens its own picker from*/
	.home-hero-search .form-control,
	.home-hero-search .btn {
		height: 48px;
	}
}

/*Three make logos across a phone puts a 200x100 badge in an 83px box, which is a smudge. Two*/

@media (max-width: 480px) {

	.make-grid {
		--tile-cols: 2;
	}
}