/**
 * Carxis Vehicle Related Cars Component
 *
 * @package CarxisToolkit
 * @subpackage Vehicle
 * @since 2.0.0
 */

/* ===============================
   Base
=============================== */

.cx-related-cars,
.cx-related-cars *{
	box-sizing:border-box;
}

/* ===============================
   Section
=============================== */

.cx-related-cars{
	width:100%;
	margin-top:72px;
	padding-top:34px;

	border-top:1px solid #e7e9ec;
}

/* ===============================
   Header
=============================== */

.cx-related-cars__header{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:24px;

	margin-bottom:24px;
}

.cx-related-cars__heading{
	min-width:0;
}

.cx-related-cars__title{
	margin:0;

	color:#202124;

	font-size:30px;
	font-weight:800;
	line-height:1.2;
	letter-spacing:-.03em;
}

.cx-related-cars__description{
	max-width:680px;
	margin:9px 0 0;

	color:#667085;

	font-size:14px;
	font-weight:400;
	line-height:1.6;
}

.cx-related-cars__view-all{
	display:inline-flex;
	align-items:center;
	gap:8px;

	flex:0 0 auto;

	color:#d1001f;

	font-size:14px;
	font-weight:700;
	line-height:1.3;
	text-decoration:none;
}

.cx-related-cars__view-all:hover{
	text-decoration:underline;
	text-underline-offset:4px;
}

/* ===============================
   Grid
=============================== */

.cx-related-cars__grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:16px;
}

/* ===============================
   Card
=============================== */

.cx-related-cars__card{
	min-width:0;

	overflow:hidden;

	background:#ffffff;
	border:1px solid #e7e9ec;
	border-radius:14px;

	box-shadow:0 5px 16px rgba(16,24,40,.05);

	transition:
		transform .22s ease,
		box-shadow .22s ease,
		border-color .22s ease;
}

.cx-related-cars__card:hover{
	transform:translateY(-3px);

	border-color:#d9dde3;
	box-shadow:0 12px 26px rgba(16,24,40,.09);
}

.cx-related-cars__card--recommended{
	border-color:#f1bcc4;
}

.cx-related-cars__card-link{
	display:flex;
	flex-direction:column;

	height:100%;

	color:inherit;
	text-decoration:none;
}

/* ===============================
   Media
=============================== */

.cx-related-cars__media{
	position:relative;

	width:100%;
	aspect-ratio:4 / 3;

	overflow:hidden;

	background:#f3f4f6;
}

.cx-related-cars__image{
	display:block;

	width:100%;
	height:100%;

	object-fit:cover;
	object-position:center;

	transition:transform .35s ease;
}

.cx-related-cars__card:hover .cx-related-cars__image{
	transform:scale(1.035);
}

.cx-related-cars__image-placeholder{
	display:flex;
	align-items:center;
	justify-content:center;

	width:100%;
	height:100%;

	color:#98a2b3;

	font-size:13px;
	font-weight:600;
}

.cx-related-cars__badge{
	position:absolute;
	top:12px;
	left:12px;

	display:inline-flex;
	align-items:center;

	padding:7px 10px;

	color:#b0001b;
	background:#fff1f3;
	border:1px solid #f5cbd2;
	border-radius:999px;

	font-size:11px;
	font-weight:800;
	line-height:1;
}

/* ===============================
   Card Content
=============================== */

.cx-related-cars__card-content{
	display:flex;
	flex-direction:column;
	flex:1;

	padding:16px;
}

.cx-related-cars__meta{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:6px;

	margin-bottom:7px;

	color:#667085;

	font-size:11px;
	font-weight:600;
	line-height:1.3;
	text-transform:uppercase;
	letter-spacing:.035em;
}

.cx-related-cars__card-title{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;

	min-height:44px;
	margin:0 0 12px;

	overflow:hidden;

	color:#202124;

	font-size:16px;
	font-weight:800;
	line-height:1.35;
}

.cx-related-cars__price{
	margin-bottom:8px;

	color:#d1001f;

	font-size:20px;
	font-weight:800;
	line-height:1.2;
}

.cx-related-cars__details{
	display:flex;
	flex-direction:column;
	gap:4px;

	margin-bottom:16px;

	color:#667085;

	font-size:12px;
	font-weight:500;
	line-height:1.45;
}

.cx-related-cars__monthly{
	color:#344054;
	font-weight:700;
}

.cx-related-cars__mileage{
	color:#667085;
}

.cx-related-cars__button{
	display:inline-flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;

	width:100%;
	margin-top:auto;
	padding-top:13px;

	color:#202124;
	border-top:1px solid #eceef1;

	font-size:13px;
	font-weight:800;
	line-height:1.3;

	transition:color .2s ease;
}

.cx-related-cars__card:hover .cx-related-cars__button{
	color:#d1001f;
}

/* ===============================
   Mobile Footer
=============================== */

.cx-related-cars__mobile-footer{
	display:none;
	margin-top:18px;
}

.cx-related-cars__mobile-view-all{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;

	width:100%;
	padding:13px 16px;

	color:#d1001f;
	background:#fff;
	border:1px solid #efc7cd;
	border-radius:10px;

	font-size:14px;
	font-weight:800;
	line-height:1.3;
	text-decoration:none;
}

/* ===============================
   Tablet
=============================== */

@media (max-width:1100px){

	.cx-related-cars__grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:14px;
	}

	.cx-related-cars__title{
		font-size:27px;
	}
}

/* ===============================
   Mobile
=============================== */

@media (max-width:767px){

	.cx-related-cars{
		margin-top:52px;
		padding-top:28px;
	}

	.cx-related-cars__header{
		align-items:flex-start;
		margin-bottom:18px;
	}

	.cx-related-cars__title{
		font-size:23px;
		line-height:1.25;
	}

	.cx-related-cars__description{
		margin-top:7px;
		font-size:13px;
	}

	.cx-related-cars__view-all{
		display:none;
	}

	.cx-related-cars__grid{
		display:flex;
		gap:12px;

		margin-right:-16px;
		padding-right:16px;
		padding-bottom:8px;

		overflow-x:auto;
		scroll-snap-type:x mandatory;
		scrollbar-width:none;
		-webkit-overflow-scrolling:touch;
	}

	.cx-related-cars__grid::-webkit-scrollbar{
		display:none;
	}

	.cx-related-cars__card{
		width:78vw;
		max-width:300px;
		min-width:250px;
		flex:0 0 auto;

		scroll-snap-align:start;
		border-radius:13px;
	}

	.cx-related-cars__card-content{
		padding:14px;
	}

	.cx-related-cars__card-title{
		min-height:41px;
		font-size:15px;
	}

	.cx-related-cars__price{
		font-size:19px;
	}

	.cx-related-cars__mobile-footer{
		display:block;
	}
}

/* ===============================
   Small Mobile
=============================== */

@media (max-width:420px){

	.cx-related-cars__card{
		width:82vw;
		min-width:235px;
	}

	.cx-related-cars__media{
		aspect-ratio:4 / 3;
	}

	.cx-related-cars__badge{
		top:10px;
		left:10px;
		padding:6px 9px;
		font-size:10px;
	}
}