/* ==========================================================================
   Component: Testimonials
   Mobile-first. All values use design tokens — no hardcoded colors or sizes.
   ========================================================================== */

/* Section wrapper */
.testimonials {
	background-color: var(--color-surface-secondary);
	padding-block: var(--space-8);
}

/* Section header */
.testimonials__header {
	text-align: center;
	max-width: var(--max-width-narrow);
	margin-inline: auto;
	margin-bottom: var(--space-7);
}

.testimonials__headline {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-3);
}

.testimonials__subheadline {
	font-family: var(--font-family-body);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-normal);
	color: var(--color-text-secondary);
	margin: 0;
}

/* Grid — single column on mobile */
.testimonials__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

/* Two columns at medium breakpoint */
@media (min-width: 640px) {
	.testimonials__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Three columns at large breakpoint */
@media (min-width: 1024px) {
	.testimonials__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Individual card */
.testimonials__card {
	background-color: var(--color-surface-primary);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.testimonials__card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

/* Star rating */
.testimonials__rating {
	display: flex;
	gap: var(--space-1);
}

.testimonials__star {
	font-size: var(--font-size-lg);
	line-height: 1;
}

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

.testimonials__star--empty {
	color: var(--color-border-default);
}

/* Quote */
.testimonials__quote {
	margin: 0;
	flex: 1; /* pushes author to the bottom of the card */
}

.testimonials__quote p {
	font-family: var(--font-family-body);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-loose);
	color: var(--color-text-primary);
	margin: 0;
}

/* Author row */
.testimonials__author {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-subtle);
}

/* Avatar — real image */
.testimonials__avatar {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	object-fit: cover;
	flex-shrink: 0;
}

/* Avatar — placeholder initials */
.testimonials__avatar--placeholder {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	background-color: var(--color-brand-primary);
	color: var(--color-text-inverse);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	/* Override <img> object-fit rule when used as a div */
	object-fit: unset;
}

/* Author text stack */
.testimonials__author-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0; /* allow text truncation */
}

.testimonials__author-name {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.testimonials__author-title {
	font-family: var(--font-family-body);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-normal);
	color: var(--color-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}