/**
 * Vehicle archive (Figma "Used Vehicles").
 *
 * Desktop 10365:3653 — 1440 wide, content inset 100 (the standard section
 *   padding), 80 above and below. H1 48/58 bold black centred, 40 to the grid,
 *   four columns 20 apart both ways, cards 295 × 644. 48 below the grid a
 *   centred blue pill 199 × 58.
 * Mobile 10365:3701 — 375 wide, inset 20 and the card column inset a further
 *   20, so the card stays 295. 40 above and below, H1 36/46, 32 to the grid,
 *   one column 10 apart. 40 below the grid the button goes full width.
 *
 * Card 10365:3661 (identical in both frames) — radius 6, clipped, photo 220
 *   `contain`, body #F8F8F8 padding 20 with 24 between the content and the
 *   button. Content gap 16: brand 14/22 uppercase ls 0.56 black over model
 *   22/30 semibold capitalize, 6 apart, 12 to a 1px #C7C7C7 rule; tags wrap
 *   4/6, each #0067B3 padding 2/8 text 12/20 uppercase ls 0.48 white; specs
 *   gap 24, icon 22 + 14/22 #676767; blurb 18/28 #404040 clipped to two lines.
 *   Button full width, 1px black, radius 200, padding 16/32, 18/18 uppercase
 *   ls 0.72 black.
 *
 * The brand is 14/22 here; the same card inside the Vehicle Listing block
 * (10210:3828) draws it at 18/24, so the two are not one component.
 *
 * The column count is the one structural choice Figma does not draw: the card
 * is a fixed 295 in both frames, so the track fills with as many 270-and-up
 * columns as fit and is pinned to the four the desktop frame draws at 1440.
 */

.ae-vehicles {
	width: 100%;
	/* Figma: 40 at 375 → 80 at 1440. */
	padding-block: clamp(40px, calc(40px + 40 * var(--ae-fluid)), 80px);
	background-color: var(--ae-color-grey-100, #f8f8f8);
}

.ae-vehicles__inner {
	display: flex;
	flex-direction: column;
}

/* Heading ---------------------------------------------------------------- */

.ae-vehicles__heading {
	/* H1 is already 36/46 → 48/58 bold in main.css. */
	margin: 0;
	text-align: center;
	text-transform: capitalize;
	color: var(--ae-color-black, #000);
	overflow-wrap: break-word;
}

/* Grid ------------------------------------------------------------------- */

.ae-vehicles__list {
	display: grid;
	/*
	 * `min()` keeps the 270 floor from becoming a hard minimum width: below 350
	 * the track shrinks with the column instead of pushing the page sideways.
	 */
	grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
	/* Figma: 10 at 375 → 20 at 1440. */
	gap: clamp(10px, calc(10px + 10 * var(--ae-fluid)), 20px);
	/* Figma: 32 below the heading at 375 → 40 at 1440. */
	margin: clamp(32px, calc(32px + 8 * var(--ae-fluid)), 40px) 0 0;
	padding: 0;
	list-style: none;
}

/* Figma insets the card column a further 20 inside the page gutter at 375. */
@media (max-width: 599px) {

	.ae-vehicles__list {
		padding-inline: 20px;
	}
}

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

.ae-vehicle-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 6px;
	background-color: var(--ae-color-grey-100, #f8f8f8);
	overflow: hidden;
}

.ae-vehicle-card__media {
	display: block;
	flex: none;
	width: 100%;
	height: 220px;
	overflow: hidden;
	background-color: var(--ae-color-grey-100, #f8f8f8);
}

.ae-vehicle-card__image {
	display: block;
	width: 100%;
	height: 100%;
	/*
	 * Contain, not cover: these are cut-out product shots on white and cropping
	 * one would clip the vehicle.
	 */
	object-fit: contain;
}

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

.ae-vehicle-card__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.ae-vehicle-card__heading {
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* The 12 and the rule Figma draws under the two lines. */
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ae-color-grey-400, #c7c7c7);
}

.ae-vehicle-card__brand {
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
	letter-spacing: 0.56px;
	text-transform: uppercase;
	color: var(--ae-color-black, #000);
	overflow-wrap: break-word;
}

.ae-vehicle-card__model {
	margin: 0;
	font-size: 22px;
	line-height: 30px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--ae-color-black, #000);
	overflow-wrap: break-word;
}

.ae-vehicle-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ae-vehicle-card__tag {
	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-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
}

.ae-vehicle-card__spec {
	display: 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-card__spec--type {
	text-transform: capitalize;
}

.ae-vehicle-card__spec img {
	flex: none;
	width: 22px;
	height: 22px;
}

.ae-vehicle-card__excerpt {
	display: -webkit-box;
	/* Figma clips the blurb at two lines. */
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0;
	overflow: hidden;
	/* Mobile Figma: 16/26. */
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	color: var(--ae-color-grey-800, #404040);
	overflow-wrap: break-word;
}

.ae-vehicle-card__button {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: auto;
	padding: 16px 32px;
	border: 1px solid var(--ae-color-black, #000);
	border-radius: 200px;
	color: var(--ae-color-black, #000);
	font-size: 18px;
	line-height: 18px;
	font-weight: 400;
	letter-spacing: 0.72px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

/* The card's only link, stretched over the card so all of it is clickable. */
.ae-vehicle-card__button::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Figma draws no hover; the filled state is the palette blue the pills use. */
.ae-vehicle-card__button:hover,
.ae-vehicle-card__button:focus-visible {
	border-color: var(--ae-color-blue-600, #0c8ce9);
	background-color: var(--ae-color-blue-600, #0c8ce9);
	color: var(--ae-color-white, #fff);
}

/* Load more -------------------------------------------------------------- */

.ae-vehicles__more {
	display: flex;
	justify-content: center;
	/* Figma: 40 below the grid at 375 → 48 at 1440. */
	margin-top: clamp(40px, calc(40px + 8 * var(--ae-fluid)), 48px);
}

.ae-vehicles__button {
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 16px;
	max-width: 100%;
	padding: 20px 40px;
	border: 0;
	border-radius: 200px;
	background-color: var(--ae-color-blue-600, #0c8ce9);
	color: var(--ae-color-white, #fff);
	font-family: inherit;
	font-size: 18px;
	line-height: 18px;
	font-weight: 600;
	text-transform: capitalize;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

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

.ae-vehicles__button.is-loading {
	pointer-events: none;
	opacity: 0.6;
}

.ae-vehicles__button-icon {
	display: block;
	flex: none;
	width: 16px;
	height: 16px;
}

.ae-vehicles__empty {
	margin: clamp(32px, calc(32px + 8 * var(--ae-fluid)), 40px) 0 0;
	text-align: center;
}

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

@media (min-width: 768px) {

	.ae-vehicles {
		background-color: var(--ae-color-white, #fff);
	}

	.ae-vehicles__button {
		flex: 0 0 auto;
	}

	.ae-vehicle-card__media {
		background-color: var(--ae-color-white, #fff);
	}

	.ae-vehicle-card__excerpt {
		/* Desktop Figma: 18/28. */
		font-size: 18px;
		line-height: 28px;
	}
}

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

@media (min-width: 1440px) {

	/* Four, as drawn — never a fifth, however wide the window gets. */
	.ae-vehicles__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}