/**
 * Vehicle Listing.
 *
 * Figma desktop 10210:3828 — 1440 × 826, bg white, padding 80/100. Heading row:
 *   H2 32/42 semibold uppercase, actions gap 10 on the right; filled button
 *   #0C8CE9 radius 200 padding 16/32 gap 16 text 18/18 semibold white + 16px
 *   plus, outlined button 1px black same metrics. 20 below the row a 1px #C7C7C7
 *   rule, then 24 to the card track.
 * Figma mobile 10343:5171 — 375 × 882, padding 40/20. Heading, 12 to the rule,
 *   24 to the track, 32 to the actions, which stack full width, 58 tall, gap 8.
 *
 * Card (both frames) — 295 wide, radius 6, clipped. Image 220 tall. Body
 *   #F8F8F8, padding 20, inner gap 16: brand 18/24 uppercase ls 0.72 black,
 *   model 22/30 semibold capitalize black, 12 to a 1px #C7C7C7 rule; tags wrap
 *   gap 4/6, each #0067B3 padding 2/8 text 12/20 uppercase ls 0.48 white; specs
 *   gap 24, icon 22 + 14/22 #676767; excerpt 18/28 #404040 filling the rest.
 *
 * The track scrolls at every width and bleeds through the section gutter, as
 * drawn — partial cards sit at both edges in both frames. Card images are
 * `contain`, not `cover`: they are cut-out product shots on white and cropping
 * them would clip the vehicle.
 */

.ae-vehicle-listing {
	--ae-vehicle-gutter: 20px;

	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
}

.ae-vehicle-listing *,
.ae-vehicle-listing *::before,
.ae-vehicle-listing *::after {
	box-sizing: border-box;
}

.ae-vehicle-listing.alignfull {
	max-width: 100%;
}

.ae-vehicle-listing__inner {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"heading"
		"divider"
		"track"
		"controls"
		"actions";
	width: 100%;
	padding-block: 40px;
	padding-inline: var(--ae-vehicle-gutter);
}

/* Header ---------------------------------------------------------------- */

.ae-vehicle-listing__heading {
	grid-area: heading;
	margin: 0;
	/* Figma: 28/38 at 375 → 32/42 at 1440. */
	font-size: clamp(28px, calc(28px + 4 * var(--ae-fluid)), 32px);
	line-height: clamp(38px, calc(38px + 4 * var(--ae-fluid)), 42px);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--ae-color-black, #000);
	overflow-wrap: break-word;
}

.ae-vehicle-listing__divider {
	grid-area: divider;
	width: 100%;
	height: 0;
	margin: 12px 0 0;
	border: 0;
	border-top: 1px solid var(--ae-color-grey-400, #c7c7c7);
}

.ae-vehicle-listing__actions {
	grid-area: actions;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 32px;
}

.ae-vehicle-listing__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 20px 32px;
	border: 1px solid transparent;
	border-radius: 200px;
	font-size: 18px;
	line-height: 18px;
	font-weight: 600;
	text-transform: capitalize;
	text-decoration: none;
	white-space: nowrap;
}

.ae-vehicle-listing__button--primary {
	background-color: var(--ae-color-blue-600, #0c8ce9);
	color: var(--ae-color-white, #fff);
}

.ae-vehicle-listing__button--primary:hover,
.ae-vehicle-listing__button--primary:focus-visible {
	background-color: var(--ae-color-blue-700, #0067b3);
	color: var(--ae-color-white, #fff);
}

.ae-vehicle-listing__button--secondary {
	border-color: var(--ae-color-black, #000);
	color: var(--ae-color-black, #000);
}

.ae-vehicle-listing__button--secondary:hover,
.ae-vehicle-listing__button--secondary:focus-visible {
	background-color: var(--ae-color-black, #000);
	color: var(--ae-color-white, #fff);
}

.ae-vehicle-listing__button-icon {
	display: block;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

/* Track ----------------------------------------------------------------- */

.ae-vehicle-listing__track {
	grid-area: track;
	display: flex;
	align-items: stretch;
	gap: 20px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	/*
	 * Proximity, not mandatory. Mandatory re-snaps after a programmatic scroll,
	 * which fought the loop's silent repositioning and previously left the
	 * arrows pointing at a position the track was not actually at.
	 */
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	/* Bleed back through the section gutter so cards run to the screen edge. */
	margin-inline: calc(-1 * var(--ae-vehicle-gutter));
	padding-inline: var(--ae-vehicle-gutter);
}

.ae-vehicle-listing__track::-webkit-scrollbar {
	display: none;
}

.ae-vehicle-listing__track:focus-visible {
	outline: 2px solid var(--ae-color-orange, #ea6042);
	outline-offset: 4px;
}

/* Slider controls -------------------------------------------------------- */

/*
 * Not in Figma — the design draws a clipped strip with no affordance. These are
 * built from the file's own button language: the outlined pill for the arrows,
 * the accent blue for the active dot.
 */
.ae-vehicle-listing__controls {
	grid-area: controls;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 24px;
}

.ae-vehicle-listing__controls[hidden] {
	display: none;
}

.ae-vehicle-listing__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--ae-color-grey-400, #c7c7c7);
	border-radius: 50%;
	background-color: var(--ae-color-white, #fff);
	color: var(--ae-color-black, #000);
	cursor: pointer;
}

/* A chevron drawn in CSS, so no icon is invented as a design asset. */
.ae-vehicle-listing__nav::before {
	content: "";
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.ae-vehicle-listing__nav--next::before {
	transform: translateX(-2px) rotate(45deg);
}

.ae-vehicle-listing__nav--prev::before {
	transform: translateX(2px) rotate(-135deg);
}

.ae-vehicle-listing__nav:hover:not(:disabled),
.ae-vehicle-listing__nav:focus-visible:not(:disabled) {
	border-color: var(--ae-color-black, #000);
	background-color: var(--ae-color-black, #000);
	color: var(--ae-color-white, #fff);
}

/* The loop has no ends, so the arrows are never disabled. */

.ae-vehicle-listing__dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.ae-vehicle-listing__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 200px;
	background-color: var(--ae-color-grey-400, #c7c7c7);
	cursor: pointer;
	transition: width 0.2s ease, background-color 0.2s ease;
}

.ae-vehicle-listing__dot.is-active {
	width: 24px;
	background-color: var(--ae-color-blue-600, #0c8ce9);
}

.ae-vehicle-listing__dot:hover:not(.is-active),
.ae-vehicle-listing__dot:focus-visible:not(.is-active) {
	background-color: var(--ae-color-grey-600, #676767);
}

@media (prefers-reduced-motion: reduce) {

	.ae-vehicle-listing__dot {
		transition: none;
	}
}

/* Card ------------------------------------------------------------------ */

.ae-vehicle-listing__card {
	flex: 0 0 auto;
	/* Figma: 295 × 572 in both frames — cards are equal height whether or not
	   they carry tags, and the excerpt absorbs the difference. */
	width: 295px;
	height: 572px;
	max-width: 100%;
	scroll-snap-align: start;
}

.ae-vehicle-listing__card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}

.ae-vehicle-listing__media {
	display: block;
	flex-shrink: 0;
	width: 100%;
	height: 220px;
	overflow: hidden;
}

.ae-vehicle-listing__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ae-vehicle-listing__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 16px;
	min-height: 0;
	padding: 20px;
	background-color: var(--ae-color-grey-100, #f8f8f8);
}

.ae-vehicle-listing__title {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ae-color-grey-400, #c7c7c7);
	color: var(--ae-color-black, #000);
}

.ae-vehicle-listing__brand {
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	letter-spacing: 0.72px;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.ae-vehicle-listing__model {
	font-size: 22px;
	line-height: 30px;
	font-weight: 600;
	text-transform: capitalize;
	overflow-wrap: break-word;
}

.ae-vehicle-listing__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
}

.ae-vehicle-listing__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 8px;
	background-color: var(--ae-color-blue-700, #0067b3);
	color: var(--ae-color-white, #fff);
	font-size: 12px;
	line-height: 20px;
	font-weight: 400;
	letter-spacing: 0.48px;
	text-transform: uppercase;
}

.ae-vehicle-listing__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.ae-vehicle-listing__spec {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
	color: var(--ae-color-grey-600, #676767);
}

.ae-vehicle-listing__spec--type {
	text-transform: capitalize;
}

.ae-vehicle-listing__spec img {
	display: block;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
}

.ae-vehicle-listing__excerpt {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
	color: var(--ae-color-grey-800, #404040);
	overflow-wrap: break-word;
}

a.ae-vehicle-listing__card-link:hover .ae-vehicle-listing__model,
a.ae-vehicle-listing__card-link:focus-visible .ae-vehicle-listing__model {
	color: var(--ae-color-blue-600, #0c8ce9);
}

/* Tablet ---------------------------------------------------------------- */

@media (min-width: 768px) {

	.ae-vehicle-listing {
		--ae-vehicle-gutter: 60px;
	}

	.ae-vehicle-listing__inner {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"heading  actions"
			"divider  divider"
			"track    track"
			"controls controls";
		align-items: center;
		column-gap: 20px;
	}

	.ae-vehicle-listing__divider {
		margin-top: 20px;
	}

	.ae-vehicle-listing__actions {
		flex-direction: row;
		gap: 10px;
		margin-top: 0;
	}

	.ae-vehicle-listing__button {
		padding-block: 16px;
	}
}

/* Desktop --------------------------------------------------------------- */

@media (min-width: 1025px) {

	.ae-vehicle-listing__inner {
		padding-block: 80px;
		/* Figma: 100px of 1440. */
		padding-inline: var(--ae-section-padding-desktop);
	}

	/*
	 * Same 100px gutter expressed against the inner content box, so the bleed
	 * stays exact: 6.9444 / (100 - 2 × 6.9444) = 8.0645%.
	 */
	.ae-vehicle-listing__track {
		margin-inline: -8.0645%;
		padding-inline: 8.0645%;
	}
}