/* =========================================================
   SECTION: HOME TESTIMONIALS
   Premium testimonials & trust signals — Apple / Tesla /
   Ather inspired. Reuses the eyebrow/card/hover language
   already established elsewhere on the homepage. Uses CSS
   variables from style.css only — no variables redefined.
   Transitions only — no keyframes.
========================================================= */


/* ---------------------------------------------------------
   Section Container
--------------------------------------------------------- */
.home-testimonials {
	width: 100%;
	background-color: var(--color-background);
	padding-block: var(--space-3xl);
}


/* ---------------------------------------------------------
   2. Large Centered Intro
--------------------------------------------------------- */
.home-testimonials__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	max-width: var(--container-md);
	margin-inline: auto;
	margin-bottom: var(--space-2xl);
	padding-inline: var(--container-padding-inline);
	text-align: center;
}

.home-testimonials__eyebrow {
	display: inline-flex;
	align-items: center;
	padding: var(--space-xxs) var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.home-testimonials__heading {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.home-testimonials__description {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-secondary);
	max-width: var(--container-sm);
}


/* ---------------------------------------------------------
   3. Responsive Testimonial Grid
--------------------------------------------------------- */
.home-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xl);
	max-width: var(--container-lg);
	margin-inline: auto;
	padding-inline: var(--container-padding-inline);
	align-items: stretch;
}


/* ---------------------------------------------------------
   4. Premium Testimonial Cards
--------------------------------------------------------- */
.home-testimonials__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
	padding: var(--space-xl);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background-color: var(--color-background);
	transition: border-color var(--transition-slow),
		box-shadow var(--transition-slow),
		transform var(--transition-slow),
		opacity var(--transition-slow);
}


/* ---------------------------------------------------------
   5. Dynamic Star Rating
--------------------------------------------------------- */
.home-testimonials__rating {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xxs);
}

.home-testimonials__star {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: var(--color-border);
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-base);
}

.home-testimonials__star--filled {
	background-color: var(--color-accent);
}


/* ---------------------------------------------------------
   7. Quote Styling
--------------------------------------------------------- */
.home-testimonials__quote {
	margin: 0;
	flex: 1 0 auto;
}

.home-testimonials__quote-text {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-primary);
}


/* ---------------------------------------------------------
   6 & 8. Customer Photo / Author Information
--------------------------------------------------------- */
.home-testimonials__author {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
}

.home-testimonials__author-photo {
	display: inline-flex;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	overflow: hidden;
}

.home-testimonials__author-photo-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.home-testimonials__author-details {
	display: flex;
	flex-direction: column;
	gap: var(--space-xxs);
}

.home-testimonials__author-name {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
}

.home-testimonials__author-meta {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-muted);
}


/* ---------------------------------------------------------
   10. Elegant Hover Interaction
--------------------------------------------------------- */
.home-testimonials__card:hover,
.home-testimonials__card:focus-within,
.home-testimonials__card.is-active,
.home-testimonials__card.is-touched {
	border-color: transparent;
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}


/* ---------------------------------------------------------
   9. Trust Logo Strip
--------------------------------------------------------- */
.home-testimonials__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xl);
	max-width: var(--container-lg);
	margin-inline: auto;
	margin-top: var(--space-3xl);
	padding-inline: var(--container-padding-inline);
	padding-top: var(--space-2xl);
	border-top: 1px solid var(--color-border);
}

.home-testimonials__logo {
	display: inline-flex;
	align-items: center;
	opacity: 0.6;
	transition: opacity var(--transition-base);
}

.home-testimonials__logo:hover,
.home-testimonials__logo:focus-within {
	opacity: 1;
}

.home-testimonials__logo-link {
	display: inline-flex;
	align-items: center;
}

.home-testimonials__logo-image {
	width: auto;
	height: 32px;
	object-fit: contain;
}


/* ---------------------------------------------------------
   11. Desktop (default — refinement past 1280px)
--------------------------------------------------------- */
@media (min-width: 1280px) {

	.home-testimonials {
		padding-block: var(--space-4xl);
	}

	.home-testimonials__card {
		padding: var(--space-2xl);
	}
}


/* ---------------------------------------------------------
   12. Responsive — Tablet
--------------------------------------------------------- */
@media (max-width: 1024px) {

	.home-testimonials__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-lg);
	}

	.home-testimonials__heading {
		font-size: var(--font-size-3xl);
	}

	.home-testimonials__logos {
		gap: var(--space-xl);
	}
}


/* ---------------------------------------------------------
   13. Responsive — Mobile
--------------------------------------------------------- */
@media (max-width: 576px) {

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

	.home-testimonials__intro {
		margin-bottom: var(--space-xl);
	}

	.home-testimonials__heading {
		font-size: var(--font-size-2xl);
	}

	.home-testimonials__description {
		font-size: var(--font-size-sm);
	}

	.home-testimonials__grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.home-testimonials__card {
		padding: var(--space-lg);
	}

	.home-testimonials__logos {
		gap: var(--space-lg);
		margin-top: var(--space-2xl);
		padding-top: var(--space-xl);
	}

	.home-testimonials__logo-image {
		height: 24px;
	}
}


/* ---------------------------------------------------------
   JS State Class Support
   Added for assets/js/home-testimonials.js. Opacity and
   transform only — no layout-affecting properties, no
   keyframe animations, transitions only.
--------------------------------------------------------- */

/* .is-revealed — progressive enhancement via the CSS `scripting`
   media feature, matching the strategy established for Featured
   Models, Feature Pillars, Comparison Teaser and Dual CTA: the
   pre-reveal hidden state only ever applies in browsers that report
   scripting as enabled. If JavaScript is disabled (or the browser
   doesn't support this media feature), this block is skipped
   entirely and cards stay in their normal, fully-visible state —
   content is never blocked on scroll.

   No separate ".is-revealed" override rule is defined: once the
   class is added, the ":not(.is-revealed)" selector below simply
   stops matching, and the card falls back to its normal (visible,
   no transform) state — which also means this can never conflict
   with the existing hover-lift transform on .home-testimonials__card
   above. */


/* .is-active / .is-touched — desktop hover-parity (keyboard focus,
   via focusin/focusout) and mobile tap feedback are defined above,
   appended to the existing :hover / :focus-within rule so all
   states always stay visually identical. */

/* =========================================================
   PREMIUM TESTIMONIAL EXPERIENCE
   GPIPL EV Mobility — Agency Level
========================================================= */


/* ---------------------------------------------------------
   Section
--------------------------------------------------------- */

.home-testimonials {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(
			circle at 15% 20%,
			rgba(0, 184, 148, 0.045),
			transparent 32%
		),
		radial-gradient(
			circle at 85% 80%,
			rgba(0, 184, 148, 0.035),
			transparent 30%
		),
		var(--color-background);

	padding-block: clamp(80px, 9vw, 130px);
}


/* ---------------------------------------------------------
   Intro
--------------------------------------------------------- */

.home-testimonials__intro {
	position: relative;
	z-index: 2;

	max-width: 820px;

	margin-bottom: 64px;
}


/* Eyebrow */

.home-testimonials__eyebrow {
	position: relative;

	padding: 7px 15px;

	border: 1px solid rgba(0, 184, 148, 0.22);

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

	color: var(--color-accent);

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

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

	box-shadow:
		0 8px 24px rgba(0, 184, 148, 0.04);
}


/* Green indicator */

.home-testimonials__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-testimonials__heading {
	margin-top: 6px;

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

	font-weight: 700;

	line-height: 1.05;

	letter-spacing: -0.055em;
}


/* Description */

.home-testimonials__description {
	max-width: 650px;

	margin-top: 5px;

	font-size: 16px;

	line-height: 1.75;

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


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

.home-testimonials__grid {
	position: relative;
	z-index: 2;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 24px;

	perspective: 1400px;
}


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

.home-testimonials__card {
	position: relative;

	min-height: 330px;

	padding: 32px;

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

	border-radius: 24px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.98),
			rgba(248, 249, 249, 0.96)
		);

	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.045),
		0 2px 5px rgba(0, 0, 0, 0.025);

	transform-style: preserve-3d;

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


/* ---------------------------------------------------------
   Accent top line
--------------------------------------------------------- */

.home-testimonials__card::before {
	content: "";

	position: absolute;

	top: 0;
	left: 28px;
	right: 28px;

	height: 2px;

	border-radius: 0 0 10px 10px;

	background:
		linear-gradient(
			90deg,
			transparent,
			var(--color-accent),
			transparent
		);

	opacity: 0;

	transform: scaleX(0.4);

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


/* ---------------------------------------------------------
   Ambient glow
--------------------------------------------------------- */

.home-testimonials__card::after {
	content: "";

	position: absolute;

	width: 180px;
	height: 180px;

	right: -90px;
	top: -90px;

	border-radius: 50%;

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

	filter: blur(35px);

	opacity: 0;

	pointer-events: none;

	transition: opacity 500ms ease;
}


/* ---------------------------------------------------------
   Hover — 3D depth
--------------------------------------------------------- */

.home-testimonials__card:hover,
.home-testimonials__card:focus-within,
.home-testimonials__card.is-active,
.home-testimonials__card.is-touched {
	border-color: rgba(0, 184, 148, 0.20);

	box-shadow:
		0 28px 65px rgba(0, 0, 0, 0.10),
		0 8px 20px rgba(0, 184, 148, 0.055);

	transform:
		translateY(-10px)
		rotateX(1.5deg)
		rotateY(-1.5deg);
}


.home-testimonials__card:hover::before,
.home-testimonials__card:focus-within::before,
.home-testimonials__card.is-active::before,
.home-testimonials__card.is-touched::before {
	opacity: 1;
	transform: scaleX(1);
}


.home-testimonials__card:hover::after,
.home-testimonials__card:focus-within::after,
.home-testimonials__card.is-active::after,
.home-testimonials__card.is-touched::after {
	opacity: 1;
}


/* ---------------------------------------------------------
   Quote mark
--------------------------------------------------------- */

.home-testimonials__card .home-testimonials__quote::before {
	content: "“";

	display: block;

	height: 52px;

	font-family: Georgia, serif;

	font-size: 72px;

	font-weight: 700;

	line-height: 0.85;

	color: rgba(0, 184, 148, 0.16);

	transform: translateZ(18px);

	transition:
		color 400ms ease,
		transform 400ms ease;
}


.home-testimonials__card:hover
.home-testimonials__quote::before {
	color: rgba(0, 184, 148, 0.34);

	transform:
		translateZ(28px)
		translateX(3px);
}


/* ---------------------------------------------------------
   Rating
--------------------------------------------------------- */

.home-testimonials__rating {
	position: relative;
	z-index: 2;

	gap: 4px;

	transform: translateZ(20px);
}


/* Remove old square-star appearance */

.home-testimonials__star {
	width: auto;
	height: auto;

	background: none !important;

	border-radius: 0;

	font-size: 16px;

	line-height: 1;

	transition:
		transform 300ms ease,
		opacity 300ms ease;
}


.home-testimonials__star::before {
	content: "★";

	color: #d8d8d8;
}


.home-testimonials__star--filled::before {
	color: var(--color-accent);
}


/* Tiny star interaction */

.home-testimonials__card:hover
.home-testimonials__star--filled {
	transform: translateY(-2px);
}


/* ---------------------------------------------------------
   Quote
--------------------------------------------------------- */

.home-testimonials__quote {
	position: relative;
	z-index: 2;

	margin-top: 4px;

	transform: translateZ(15px);
}


.home-testimonials__quote-text {
	font-size: 16px;

	line-height: 1.8;

	color: #292929;
}


/* ---------------------------------------------------------
   Author
--------------------------------------------------------- */

.home-testimonials__author {
	position: relative;
	z-index: 2;

	margin-top: auto;

	padding-top: 20px;

	border-top: 1px solid rgba(0, 0, 0, 0.075);

	transform: translateZ(18px);
}


/* Photo */

.home-testimonials__author-photo {
	width: 48px;
	height: 48px;

	border: 2px solid rgba(0, 184, 148, 0.12);

	box-shadow:
		0 5px 15px rgba(0, 0, 0, 0.08);

	transition:
		transform 400ms ease,
		border-color 400ms ease;
}


.home-testimonials__card:hover
.home-testimonials__author-photo {
	transform: scale(1.06);

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


/* Name */

.home-testimonials__author-name {
	font-size: 14px;

	font-weight: 700;

	letter-spacing: -0.01em;
}


/* Meta */

.home-testimonials__author-meta {
	font-size: 12px;

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


/* ---------------------------------------------------------
   Trust logos
--------------------------------------------------------- */

.home-testimonials__logos {
	position: relative;
	z-index: 2;

	margin-top: 80px;

	padding-top: 30px;

	border-top: 1px solid rgba(0, 0, 0, 0.07);

	opacity: 0.75;
}


/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media (max-width: 1024px) {

	.home-testimonials__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}


@media (max-width: 576px) {

	.home-testimonials {
		padding-block: 70px;
	}

	.home-testimonials__intro {
		margin-bottom: 42px;
	}

	.home-testimonials__heading {
		font-size: 38px;
	}

	.home-testimonials__description {
		font-size: 14px;
	}

	.home-testimonials__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.home-testimonials__card {
		min-height: auto;

		padding: 26px;

		border-radius: 20px;
	}

	.home-testimonials__card:hover,
	.home-testimonials__card:focus-within,
	.home-testimonials__card.is-active,
	.home-testimonials__card.is-touched {
		transform: translateY(-5px);
	}

}