/* =========================================================
   HOME FEATURED MODELS
   PREMIUM EV SHOWROOM EXPERIENCE
   4-CARD DESKTOP / 3D HOVER / FLOATING PRODUCT
========================================================= */

.home-featured-models {
	width: 100%;
	background:
		radial-gradient(
			circle at 50% 20%,
			rgba(0, 184, 148, 0.06),
			transparent 38%
		),
		var(--color-background-alt);
	padding-block: var(--space-4xl);
	overflow: hidden;
}


/* =========================================================
   GRID
========================================================= */

.home-featured-models__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: var(--container-padding-inline);
	perspective: 1600px;
}


/* =========================================================
   CARD
========================================================= */

.home-featured-models__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: 22px;
	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.05),
		0 2px 8px rgba(0, 0, 0, 0.03);
	overflow: visible;

	transform:
		perspective(1200px)
		rotateX(var(--card-rotate-x, 0deg))
		rotateY(var(--card-rotate-y, 0deg))
		translate3d(0, var(--card-lift, 0px), 0);

	transition:
		transform 500ms cubic-bezier(.2,.8,.2,1),
		box-shadow 500ms cubic-bezier(.2,.8,.2,1),
		opacity 350ms ease,
		border-color 350ms ease;

	transform-style: preserve-3d;
	will-change: transform;
}


/* Ambient glow behind card */

.home-featured-models__card::before {
	content: "";
	position: absolute;
	inset: 12%;
	z-index: -1;

	background:
		radial-gradient(
			circle,
			rgba(0, 184, 148, 0.22),
			transparent 68%
		);

	filter: blur(35px);
	opacity: 0;

	transition: opacity 500ms ease;
	pointer-events: none;
}


/* Premium hover */

.home-featured-models__card:hover,
.home-featured-models__card:focus-within,
.home-featured-models__card.is-active,
.home-featured-models__card.is-touched {

	--card-lift: -10px;

	border-color: rgba(0, 184, 148, 0.28);

	box-shadow:
		0 28px 70px rgba(0, 0, 0, 0.13),
		0 10px 25px rgba(0, 184, 148, 0.08);
}

.home-featured-models__card:hover::before,
.home-featured-models__card:focus-within::before,
.home-featured-models__card.is-active::before,
.home-featured-models__card.is-touched::before {
	opacity: 1;
}


/* =========================================================
   MEDIA / PRODUCT IMAGE
========================================================= */

.home-featured-models__media {
	position: relative;
	overflow: hidden;

	margin: 8px 8px 0;

	border-radius: 18px;

	background:
		radial-gradient(
			circle at 50% 55%,
			rgba(0, 184, 148, 0.08),
			transparent 60%
		),
		#f5f6f6;

	aspect-ratio: 1 / 0.88;

	transform-style: preserve-3d;
}


/* subtle inner light */

.home-featured-models__media::after {
	content: "";
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,0.45),
			transparent 35%,
			transparent 70%,
			rgba(0,184,148,0.05)
		);

	pointer-events: none;
}


/* Product */

.home-featured-models__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;
	object-position: center;

	padding: 8px;

	transform:
		translate3d(
			var(--image-x, 0px),
			var(--image-y, 0px),
			var(--image-z, 0px)
		)
		scale(var(--image-scale, 1));

	transform-origin: center center;

	transition:
		transform 700ms cubic-bezier(.16,1,.3,1),
		filter 500ms ease;

	will-change: transform;
}


/* Product floats forward */

.home-featured-models__card:hover .home-featured-models__image,
.home-featured-models__card:focus-within .home-featured-models__image,
.home-featured-models__card.is-active .home-featured-models__image,
.home-featured-models__card.is-touched .home-featured-models__image {

	--image-z: 22px;
	--image-y: -5px;
	--image-scale: 1.075;

	filter:
		drop-shadow(0 20px 18px rgba(0,0,0,0.14));
}


/* =========================================================
   BADGE
========================================================= */

.home-featured-models__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 5;

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

	padding: 7px 11px;

	border: 1px solid rgba(255,255,255,0.55);
	border-radius: 999px;

	background: rgba(255,255,255,0.82);

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;

	color: var(--color-text-primary);

	box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}


/* =========================================================
   STATUS
========================================================= */

.home-featured-models__status {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;

	display: inline-flex;
	align-items: center;
	gap: 6px;

	padding: 7px 11px;

	border: 1px solid rgba(0,184,148,0.18);
	border-radius: 999px;

	background: rgba(255,255,255,0.86);

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	font-size: 10px;
	font-weight: 600;

	color: #087e67;
}


/* green status dot */

.home-featured-models__status::before {
	content: "";
	width: 6px;
	height: 6px;

	border-radius: 50%;
	background: var(--color-accent);
}


/* =========================================================
   CONTENT PANEL
========================================================= */

.home-featured-models__content {
	position: relative;
	z-index: 6;

	display: flex;
	flex-direction: column;
	align-items: flex-start;

	gap: 9px;

	margin:
		-26px
		14px
		14px;

	padding: 20px;

	border:
		1px solid rgba(255,255,255,0.8);

	border-radius: 17px;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,0.98),
			rgba(250,250,250,0.94)
		);

	box-shadow:
		0 14px 30px rgba(0,0,0,0.08);

	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);

	transform: translateZ(28px);

	transition:
		transform 500ms cubic-bezier(.2,.8,.2,1),
		box-shadow 500ms ease;
}


.home-featured-models__card:hover .home-featured-models__content,
.home-featured-models__card:focus-within .home-featured-models__content,
.home-featured-models__card.is-active .home-featured-models__content,
.home-featured-models__card.is-touched .home-featured-models__content {
	transform: translate3d(0,-4px,32px);

	box-shadow:
		0 20px 40px rgba(0,0,0,0.11);
}


/* =========================================================
   CATEGORY
========================================================= */

.home-featured-models__category {
	font-size: 10px;
	font-weight: 700;

	letter-spacing: 0.1em;
	text-transform: uppercase;

	color: var(--color-accent);
}


/* =========================================================
   TITLE
========================================================= */

.home-featured-models__title {
	margin: 0;

	font-family: var(--font-family-heading);

	font-size: 24px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: -0.035em;

	color: var(--color-text-primary);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.home-featured-models__description {
	margin: 0;

	font-size: 13px;
	line-height: 1.55;

	color: var(--color-text-secondary);

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;

	min-height: 40px;
}


/* =========================================================
   SPECS
========================================================= */

.home-featured-models__specs {
	display: grid;
	grid-template-columns: 1fr 1fr;

	width: 100%;

	margin: 4px 0 2px;
	padding: 12px 0;

	border-block:
		1px solid rgba(0,0,0,0.08);

	list-style: none;
}


.home-featured-models__spec {
	display: flex;
	flex-direction: column;
	gap: 3px;
}


.home-featured-models__spec + .home-featured-models__spec {
	padding-left: 14px;
	border-left: 1px solid rgba(0,0,0,0.08);
}


.home-featured-models__spec-label {
	font-size: 9px;
	font-weight: 600;

	letter-spacing: 0.1em;
	text-transform: uppercase;

	color: var(--color-text-muted);
}


.home-featured-models__spec-value {
	font-size: 13px;
	font-weight: 700;

	color: var(--color-text-primary);
}


/* =========================================================
   CTA
========================================================= */

.home-featured-models__actions {
	display: flex;
	align-items: center;
	gap: 8px;

	width: 100%;
	margin-top: 4px;
}


.home-featured-models__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 40px;

	padding: 8px 15px;

	border-radius: 999px;

	font-size: 12px;
	font-weight: 700;

	text-decoration: none;

	transition:
		transform 250ms ease,
		background-color 250ms ease,
		border-color 250ms ease,
		color 250ms ease,
		box-shadow 250ms ease;
}


.home-featured-models__cta--primary {
	flex: 1;

	background: var(--color-primary);
	border: 1px solid var(--color-primary);

	color: var(--color-text-inverse);
}


.home-featured-models__cta--primary:hover,
.home-featured-models__cta--primary:focus-visible {
	background: var(--color-accent);
	border-color: var(--color-accent);

	transform: translateY(-2px);

	box-shadow:
		0 8px 20px rgba(0,184,148,0.22);
}


.home-featured-models__cta--secondary {
	background: transparent;

	border: 1px solid rgba(0,0,0,0.12);

	color: var(--color-text-primary);
}


.home-featured-models__cta--secondary:hover,
.home-featured-models__cta--secondary:focus-visible {
	background: rgba(0,184,148,0.07);

	border-color: var(--color-accent);

	color: var(--color-accent);
}


/* =========================================================
   WHEN ONE CARD IS HOVERED
========================================================= */

@media (hover: hover) and (pointer: fine) {

	.home-featured-models__grid:has(
		.home-featured-models__card:hover
	)
	.home-featured-models__card:not(:hover) {
		opacity: 0.88;
		transform: scale(0.985);
	}

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1280px) {

	.home-featured-models {
		padding-block: 90px;
	}

	.home-featured-models__grid {
		gap: 20px;
	}

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.home-featured-models__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

	.home-featured-models {
		padding-block: var(--space-2xl);
	}

	.home-featured-models__grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.home-featured-models__card {
		transform: none !important;
	}

	.home-featured-models__image {
		transform: scale(1) !important;
	}

	.home-featured-models__content {
		margin:
			-22px
			10px
			10px;

		padding: 18px;
	}

	.home-featured-models__title {
		font-size: 22px;
	}

	.home-featured-models__actions {
		flex-direction: row;
	}

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

	.home-featured-models__card,
	.home-featured-models__image,
	.home-featured-models__content,
	.home-featured-models__cta {
		transition: none !important;
		transform: none !important;
	}

}


/* =========================================================
   SCROLL REVEAL
   IMPORTANT: No blinking.
========================================================= */

@media (scripting: enabled) {

	.home-featured-models__card:not(.is-revealed) {
		opacity: 0;
		transform: translateY(18px);
	}

}
/* =========================================================
   FEATURED MODELS — PREMIUM INTRO
========================================================= */

.home-featured-models__intro {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;

	max-width: 760px;

	margin: 0 auto 58px;

	padding-inline: var(--container-padding-inline);

	text-align: center;
}


/* ---------------------------------------------------------
   Eyebrow
--------------------------------------------------------- */

.home-featured-models__eyebrow {
	position: relative;

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

	padding: 7px 14px;

	border: 1px solid rgba(0, 184, 148, 0.25);
	border-radius: 999px;

	background: rgba(0, 184, 148, 0.045);

	font-size: 10px;
	font-weight: 700;

	letter-spacing: 0.12em;
	text-transform: uppercase;

	color: var(--color-accent);

	box-shadow:
		0 6px 20px rgba(0, 184, 148, 0.05);
}


/* Small green indicator */

.home-featured-models__eyebrow::before {
	content: "";

	width: 6px;
	height: 6px;

	margin-right: 8px;

	border-radius: 50%;

	background: var(--color-accent);

	box-shadow:
		0 0 0 4px rgba(0, 184, 148, 0.08);
}


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

.home-featured-models__heading {
	margin: 20px 0 0;

	font-family: var(--font-family-heading);

	font-size: clamp(38px, 5vw, 64px);

	font-weight: 700;

	line-height: 1.05;

	letter-spacing: -0.055em;

	color: var(--color-text-primary);
}


/* Green gradient emphasis */

.home-featured-models__heading span {
	background:
		linear-gradient(
			100deg,
			var(--color-accent),
			#00a884
		);

	-webkit-background-clip: text;
	background-clip: text;

	-webkit-text-fill-color: transparent;
}


/* ---------------------------------------------------------
   Description
--------------------------------------------------------- */

.home-featured-models__intro .home-featured-models__description {
	max-width: 620px;

	margin: 18px auto 0;

	font-size: 16px;

	line-height: 1.7;

	color: var(--color-text-secondary);
}


/* ---------------------------------------------------------
   Premium Accent
--------------------------------------------------------- */

.home-featured-models__accent {
	display: flex;
	align-items: center;

	gap: 5px;

	margin-top: 25px;
}


.home-featured-models__accent span {
	display: block;

	height: 3px;

	border-radius: 999px;

	background: var(--color-accent);

	transition:
		width 400ms cubic-bezier(.2,.8,.2,1),
		opacity 400ms ease;
}


/* Different widths */

.home-featured-models__accent span:nth-child(1) {
	width: 34px;
}

.home-featured-models__accent span:nth-child(2) {
	width: 10px;
	opacity: 0.45;
}

.home-featured-models__accent span:nth-child(3) {
	width: 5px;
	opacity: 0.2;
}


/* Subtle interaction */

.home-featured-models__intro:hover
.home-featured-models__accent span:nth-child(1) {
	width: 55px;
}

.home-featured-models__intro:hover
.home-featured-models__accent span:nth-child(2) {
	width: 18px;
	opacity: 0.65;
}

.home-featured-models__intro:hover
.home-featured-models__accent span:nth-child(3) {
	width: 8px;
	opacity: 0.35;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

	.home-featured-models__intro {
		margin-bottom: 38px;
	}

	.home-featured-models__heading {
		font-size: 38px;
	}

	.home-featured-models__intro
	.home-featured-models__description {
		font-size: 14px;
		line-height: 1.6;
	}

}