/**
 * Section: Testimonial Wall Component Styles
 * Figma reference: Desktop (1:2421) and Mobile (1:2155)
 */

.section-testimonial-wall {
	width: 100%;
	background-color: #E3E4FE; /* Light purple/blue background from Figma */
	padding: 0;
	margin: 0;
}

.section-testimonial-wall__container {
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
	padding: 0;
	position: relative;
}

/* ========================================
   DESKTOP VERSION (1024px+)
   ======================================== */
@media (min-width: 1024px) {
	.section-testimonial-wall {
		min-height: 643px; /* Minimum height, but can expand for taller cards */
	}

	.section-testimonial-wall__container {
		padding: 122.89px 93px 100px 93px; /* Top padding, left/right padding, and bottom padding */
	}

	.section-testimonial-wall__headline {
		text-align: center;
		margin-bottom: 95px; /* Space to position content below */
	}

	.section-testimonial-wall__title {
		/* Typography handled by .typog-h2 */
		/* Figma: 52px, Bricolage Grotesque, letter-spacing -5%, centered */
		color: var(--color-primary-text);
		margin: 0 auto;
		max-width: 850px;
	}

	/* Flex container for header and cards */
	.section-testimonial-wall__content {
		display: flex;
		align-items: flex-start;
		gap: 20px; /* Gap between header and cards (343px - 93px - 263px = -13px, so use 20px for spacing) */
	}

	.section-testimonial-wall__header {
		width: 263px;
		flex-shrink: 0;
	}

	.section-testimonial-wall__intro {
		/* Typography handled by .typog-h3 */
		margin: 0 0 16px 0;
	}

	.section-testimonial-wall__cards {
		flex: 1;
		display: flex;
		align-items: flex-start;
		gap: 12px; /* Gap between cards */
		min-width: 0;
	}

	.testimonial-card {
		background-color: var(--color-white);
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 13.790926933288574px; /* Exact from Figma */
		padding: 27.58185386657715px; /* Exact from Figma */
		padding-bottom: 26px !important; /* Allow flexible height with 26px bottom padding */
		height: auto; /* Override shared testimonial card height */
		box-shadow: 0px 5.171597480773926px 10.343194961547852px 0px rgba(0, 0, 0, 0.03), 0px 3.4477317333221436px 6.895463466644287px 0px rgba(0, 0, 0, 0.02);
		display: flex;
		flex-direction: column;
		gap: 27.58185386657715px; /* Gap between author and text */
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
	}

	.section-testimonial-wall .testimonial-card,
	.section-testimonial-wall .testimonial-card:nth-child(3) {
		box-sizing: border-box;
		height: auto;
		padding-bottom: 26px !important;
	}

	.testimonial-card__author {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 13.790926933288574px; /* Gap between image and text */
		width: 100%;
	}

	.testimonial-card__image-wrapper {
		width: 41.37px; /* Exact from Figma */
		height: 41.37px;
		flex-shrink: 0;
		border-radius: 6.895463466644287px; /* Exact from Figma */
		overflow: hidden;
	}

	.testimonial-card__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.testimonial-card__author-info {
		display: flex;
		flex-direction: column;
		gap: 1.7238658666610718px; /* Gap between name and stars */
		flex: 1;
	}

	.testimonial-card__name {
		font-family: 'Bricolage Grotesque', sans-serif;
		font-weight: 700;
		font-size: 15px;
		line-height: 1.6099999745686848em;
		letter-spacing: -0.005em; /* -0.5% */
		color: var(--color-primary-text);
		margin: 0;
	}

	.testimonial-card__stars {
		font-family: 'Inter', sans-serif;
		font-weight: 500;
		font-size: 16px;
		line-height: 1.399999976158142em;
		letter-spacing: -0.005em; /* -0.5% */
		color: var(--color-primary-text);
		margin: 0;
	}

	.testimonial-card__text {
		font-family: 'Bricolage Grotesque', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: 1.4500000817435128em;
		letter-spacing: -0.005em; /* -0.5% */
		color: var(--color-primary-text);
		margin: 0;
	}
}

/* ========================================
   MOBILE VERSION (below 1024px)
   ======================================== */
@media (max-width: 1023px) {
	.section-testimonial-wall {
		min-height: 918px; /* Exact height from Figma */
	}

	.section-testimonial-wall__container {
		padding: 0 24px;
		position: relative;
	}

	.section-testimonial-wall__headline {
		text-align: center;
		padding: 75px 0 0 0;
		margin-bottom: 0;
	}

	.section-testimonial-wall__title {
		/* Typography handled by .typog-h2 */
		/* Figma: 32px, Bricolage Grotesque, letter-spacing -5%, centered */
		color: var(--color-primary-text);
		margin: 0 auto;
		max-width: 327px;
		font-size: 32px;
		line-height: 1.09375em;
	}

	.section-testimonial-wall__header {
		text-align: center;
		padding: 23px 0 0 0;
		margin-bottom: 0;
		width: 100%;
	}

	.section-testimonial-wall__intro {
		/* Typography handled by .typog-h3 */
		margin: 0;
	}

	.section-testimonial-wall__cards {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 19px; /* Gap between cards from Figma */
		padding: 0;
		margin-top: 40px; /* Space after header */
		width: 100%;
		max-width: 327px;
		margin-left: auto;
		margin-right: auto;
	}

	.testimonial-card {
		background-color: var(--color-white);
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 16px; /* Exact from Figma */
		padding: 32px; /* Exact from Figma */
		padding-bottom: 26px !important; /* Allow flexible height with 26px bottom padding */
		height: auto; /* Override shared testimonial card height */
		box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.03), 0px 4px 8px 0px rgba(0, 0, 0, 0.02);
		display: flex;
		flex-direction: column;
		gap: 19px; /* Gap between author and text */
		width: 100%;
		max-width: 327px; /* Exact width from Figma */
	}

	.section-testimonial-wall .testimonial-card,
	.section-testimonial-wall .testimonial-card:nth-child(3) {
		box-sizing: border-box;
		height: auto;
		padding-bottom: 26px !important;
	}

	.testimonial-card__author {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 16px; /* Gap between image and text */
		width: 100%;
	}

	.testimonial-card__image-wrapper {
		width: 48px; /* Exact from Figma */
		height: 48px;
		flex-shrink: 0;
		border-radius: 8px; /* Exact from Figma */
		overflow: hidden;
	}

	.testimonial-card__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.testimonial-card__author-info {
		display: flex;
		flex-direction: column;
		gap: 2px; /* Gap between name and stars */
		flex: 1;
	}

	.testimonial-card__name {
		font-family: 'Bricolage Grotesque', sans-serif;
		font-weight: 700;
		font-size: 15px;
		line-height: 1.45em;
		letter-spacing: -0.005em; /* -0.5% */
		color: var(--color-primary-text);
		margin: 0;
	}

	.testimonial-card__stars {
		font-family: 'Inter', sans-serif;
		font-weight: 500;
		font-size: 16px;
		line-height: 1.399999976158142em;
		letter-spacing: -0.005em; /* -0.5% */
		color: var(--color-primary-text);
		margin: 0;
	}

	.testimonial-card__text {
		font-family: 'Bricolage Grotesque', sans-serif;
		font-weight: 400;
		font-size: 13px; /* Smaller on mobile */
		line-height: 1.5400000352125902em;
		letter-spacing: -0.005em; /* -0.5% */
		color: var(--color-primary-text);
		margin: 0;
	}
}