/**
 * SPD Testimonials — Homepage « Témoignages Clients Vérifiés »
 * =============================================================
 * Phase 3g component styles. Reproduces the React "Témoignages Clients
 * Vérifiés (Compact Review Cards)" section (HomePage.tsx, section 6.2)
 * using the centralized SPD design-system tokens for typography /
 * radius / shadow, with React-reference-exact brand colors scoped to
 * .spd-testimonials only (the global SPD tokens are untouched).
 *
 * The React site is the visual source of truth.
 *
 * Loaded after spd-about.css.
 */

.spd-testimonials {
	/* Section-scoped brand colors — React reference exact values.
	   Scoped to .spd-testimonials only; the global SPD tokens unchanged. */
	--spd-test-blue:       #0F5B94; /* eyebrow, "Voir tous les avis" link, verified pill */
	--spd-test-blue-soft:   #EBF3F9; /* verified pill background */
	--spd-test-gold:        #EAA21D; /* rating stars (React local gold variant) */

	/* Neutrals (Tailwind slate scale, raw values). */
	--spd-test-slate-50:   #F8FAFC;
	--spd-test-slate-100: #F1F5F9;
	--spd-test-slate-200: #E2E8F0;
	--spd-test-slate-400: #94A3B8;
	--spd-test-slate-500: #64748B;
	--spd-test-slate-700: #334155;
	--spd-test-slate-900: #0F172A;

	/* py-10 | bg-white | border-b border-slate-100 */
	padding-top: 40px;    /* py-10 → 2.5rem */
	padding-bottom: 40px;
	background-color: #FFFFFF;
	border-bottom: 1px solid var(--spd-test-slate-100);
}

/* React uses `max-w-7xl mx-auto px-4 sm:px-6` (24px from sm up). */
@media (min-width: 1024px) {
	.spd-testimonials .spd-container {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* ============================================================
   1. Header — flex items-end justify-between mb-6
   ============================================================ */
.spd-testimonials__header {
	display: flex;
	align-items: flex-end; /* items-end */
	justify-content: space-between; /* justify-between */
	gap: 16px;
	margin-bottom: 24px; /* mb-6 → 1.5rem */
}

.spd-testimonials__heading {
	display: flex;
	flex-direction: column;
}

/* Eyebrow — text-[11px] font-black uppercase tracking-wider text-[#0F5B94] block */
.spd-testimonials__eyebrow {
	display: block;
	font-size: 11px; /* text-[11px] */
	font-weight: var(--spd-font-weight-black); /* font-black → 900 */
	text-transform: uppercase;
	letter-spacing: 0.05em; /* tracking-wider */
	color: var(--spd-test-blue); /* text-[#0F5B94] */
}

/* Title — text-xl sm:text-2xl font-black text-slate-900 tracking-tight mt-0.5.
   Color set explicitly because Astra's global `h2` rule (element
   selector) would otherwise override the inherited color. */
.spd-testimonials__title {
	margin: 0;
	margin-top: 2px; /* mt-0.5 → 0.125rem */
	font-size: var(--spd-font-size-xl); /* text-xl → 1.25rem (20px) */
	font-weight: var(--spd-font-weight-black); /* font-black → 900 */
	line-height: 1.2;
	letter-spacing: var(--spd-tracking-tight); /* tracking-tight */
	color: var(--spd-test-slate-900); /* text-slate-900 */
}

@media (min-width: 640px) {
	.spd-testimonials__title {
		font-size: var(--spd-font-size-2xl); /* sm:text-2xl → 1.5rem (24px) */
	}
}

/* "Voir tous les avis" link — text-xs sm:text-sm font-bold text-[#0F5B94]
   hover:underline cursor-pointer hidden sm:inline-flex items-center gap-1.
   Hidden on mobile (hidden), shown from sm up (sm:inline-flex). */
.spd-testimonials__all {
	display: none; /* hidden */
	align-items: center;
	gap: 4px; /* gap-1 → 0.25rem */
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-xs); /* text-xs → 12px */
	font-weight: var(--spd-font-weight-bold); /* font-bold → 700 */
	line-height: 1.25;
	text-decoration: none;
	color: var(--spd-test-blue); /* text-[#0F5B94] */
	white-space: nowrap;
	transition: color var(--spd-transition-fast);
}

@media (min-width: 640px) {
	.spd-testimonials__all {
		display: inline-flex; /* sm:inline-flex */
		font-size: var(--spd-font-size-sm); /* sm:text-sm → 14px */
	}
}

.spd-testimonials__all:hover,
.spd-testimonials__all:focus {
	text-decoration: underline; /* hover:underline */
	color: var(--spd-test-blue);
}

.spd-testimonials__all .spd-icon {
	width: 14px; /* ArrowRight size={14} */
	height: 14px;
	flex-shrink: 0;
}

.spd-testimonials__all:focus-visible {
	outline: none;
	box-shadow: var(--spd-focus-ring);
	border-radius: var(--spd-radius-sm);
}

/* ============================================================
   2. Grid — grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6
   ============================================================ */
.spd-testimonials__grid {
	display: grid;
	grid-template-columns: 1fr; /* grid-cols-1 */
	gap: 16px; /* gap-4 → 1rem */
}

@media (min-width: 640px) {
	.spd-testimonials__grid {
		gap: 24px; /* sm:gap-6 → 1.5rem */
	}
}

@media (min-width: 768px) {
	.spd-testimonials__grid {
		grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
	}
}

/* ============================================================
   3. Card — bg-slate-50 rounded-2xl p-5 border border-slate-200/80
   flex flex-col justify-between
   ============================================================ */
.spd-testimonials__card {
	display: flex;
	flex-direction: column; /* flex flex-col */
	justify-content: space-between; /* justify-between */
	padding: 20px; /* p-5 → 1.25rem */
	background-color: var(--spd-test-slate-50); /* bg-slate-50 */
	border: 1px solid rgba(226, 232, 240, 0.80); /* border border-slate-200/80 */
	border-radius: var(--spd-radius-xl); /* rounded-2xl → 16px */
}

/* Card body — wraps stars+verified AND quote so justify-between pushes
   only the author row to the bottom (matches React structure). */
.spd-testimonials__card-body {
	display: flex;
	flex-direction: column;
}

/* ============================================================
   4. Card top — flex items-center justify-between mb-3
   ============================================================ */
.spd-testimonials__card-top {
	display: flex;
	align-items: center; /* items-center */
	justify-content: space-between; /* justify-between */
	gap: 8px;
	margin-bottom: 12px; /* mb-3 → 0.75rem */
}

/* Rating stars — flex items-center text-[#EAA21D].
   React renders only filled stars up to the rating (no empty stars). */
.spd-testimonials__rating {
	display: flex;
	align-items: center;
	gap: 2px; /* stars touch each other (no gap in React) */
	color: var(--spd-test-gold); /* text-[#EAA21D] */
}

.spd-testimonials__star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.spd-testimonials__star .spd-icon {
	width: 13px; /* Star size={13} */
	height: 13px;
	fill: currentColor; /* fill-current */
}

/* Verified pill — text-[10px] font-bold bg-[#EBF3F9] text-[#0F5B94]
   px-2 py-0.5 rounded-md flex items-center gap-1 */
.spd-testimonials__verified {
	display: inline-flex;
	align-items: center;
	gap: 4px; /* gap-1 → 0.25rem */
	padding: 2px 8px; /* py-0.5 px-2 */
	font-size: 10px; /* text-[10px] */
	font-weight: var(--spd-font-weight-bold); /* font-bold → 700 */
	line-height: 1.25;
	color: var(--spd-test-blue); /* text-[#0F5B94] */
	background-color: var(--spd-test-blue-soft); /* bg-[#EBF3F9] */
	border-radius: var(--spd-radius-sm); /* rounded-md → 6px */
	white-space: nowrap;
}

.spd-testimonials__verified .spd-icon {
	width: 11px; /* CheckCircle2 size={11} */
	height: 11px;
	flex-shrink: 0;
}

/* ============================================================
   5. Quote — text-xs sm:text-sm text-slate-700 leading-relaxed italic
   ============================================================ */
.spd-testimonials__quote {
	margin: 0;
	font-size: var(--spd-font-size-xs); /* text-xs → 12px */
	line-height: var(--spd-line-height-relaxed); /* leading-relaxed → 1.625 */
	font-style: italic; /* italic */
	color: var(--spd-test-slate-700); /* text-slate-700 */
}

@media (min-width: 640px) {
	.spd-testimonials__quote {
		font-size: var(--spd-font-size-sm); /* sm:text-sm → 14px */
	}
}

/* ============================================================
   6. Author — flex items-center gap-3 mt-4 pt-3 border-t
   border-slate-200/60
   ============================================================ */
.spd-testimonials__author {
	display: flex;
	align-items: center; /* items-center */
	gap: 12px; /* gap-3 → 0.75rem */
	margin-top: 16px; /* mt-4 → 1rem */
	padding-top: 12px; /* pt-3 → 0.75rem */
	border-top: 1px solid rgba(226, 232, 240, 0.60); /* border-t border-slate-200/60 */
}

/* Avatar — w-9 h-9 rounded-full object-cover border border-slate-200 */
.spd-testimonials__avatar {
	display: block;
	flex-shrink: 0;
	width: 36px;  /* w-9 → 2.25rem */
	height: 36px; /* h-9 */
	object-fit: cover; /* object-cover */
	object-position: center;
	border-radius: var(--spd-radius-full); /* rounded-full */
	border: 1px solid var(--spd-test-slate-200); /* border border-slate-200 */
	background-color: var(--spd-test-slate-100);
}

.spd-testimonials__author-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Name — text-xs font-bold text-slate-900 */
.spd-testimonials__name {
	margin: 0;
	font-size: var(--spd-font-size-xs); /* text-xs → 12px */
	font-weight: var(--spd-font-weight-bold); /* font-bold → 700 */
	line-height: 1.25;
	color: var(--spd-test-slate-900); /* text-slate-900 */
}

/* City / role — text-[11px] text-slate-500 */
.spd-testimonials__ville {
	display: block;
	margin-top: 1px;
	font-size: 11px; /* text-[11px] */
	line-height: 1.25;
	color: var(--spd-test-slate-500); /* text-slate-500 */
}

/* ============================================================
   7. Reduced motion (no animations in this section, kept for parity)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.spd-testimonials__all {
		transition: none;
	}
}