/**
 * Testimonials Panel
 * ============================================================================
 * Customer testimonial carousel with author images and quotes.
 *
 * Load order: After base.css, before page-specific styles
 * Dependencies: 00-tokens.css (design tokens), swiper.css (for carousel)
 * ============================================================================
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */

.testimonials-panel {
	background-color: var(--cream);
	position: relative;
}

.testimonials-panel .spacer {
	height: 80px;
}

.testimonials-panel .content {
	max-width: 1280px;
	padding-top: var(--space-5);
	padding-bottom: 30px;
}

.testimonials-panel .content h3 {
	color: var(--brand-main);
	font-size: 42px;
	letter-spacing: -1.5px;
	line-height: 46px;
}

.testimonials-panel .content .testimonials-container {
	/* padding: 0 120px; - commented out in original */
}

.testimonials-panel .content .testimonials-container .testimonial.swiper-slide {
	box-shadow: none;
	display: flex;
	align-items: flex-start;
	gap: 4%;
}

.testimonials-panel .content .testimonials-container .author-image {
	display: inline-block;
	position: relative;
	flex: 0 0 26%;
}

.testimonials-panel .content .testimonials-container .author-image .quotes {
	left: var(--space-0);
	position: absolute;
	top: var(--space-0);
	border-top-left-radius: var(--radius-none);
	border-top-right-radius: var(--radius-none);
	width: fit-content;
}

.testimonials-panel .content .testimonials-container .author-image .blank {
	display: inline-block;
	height: 100%;
	width: 100%;
}

.testimonials-panel .content .testimonials-container .testimonial-text {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.testimonials-panel .content .testimonials-container .testimonial-text p {
	color: var(--brand-main);
	display: inline-block;

	/* font-family handled by utility class */
	font-size: 28px;
	font-weight: 700;
	line-height: 36px;
	margin-bottom: 28px;
}

.testimonials-panel .content .testimonials-container .author-position {
	font-family: Poppins, sans-serif;
}

.testimonials-panel .content .testimonials-container .testimonial .logo {
	align-self: flex-end;
	margin-top: auto;
	width: fit-content;
}

/* ==========================================================================
   Responsive: Desktop (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
	.testimonials-panel .content .testimonials-container {
		padding: var(--space-0);
	}
}

/* ==========================================================================
   Responsive: Tablet (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
	.testimonials-panel .content .testimonials-container .testimonial.swiper-slide {
		flex-direction: column;
		align-items: center;
	}

	.testimonials-panel .content .testimonials-container .author-image {
		flex: 0 0 auto;
		margin-bottom: 50px;
		margin-right: 15%;
		margin-left: 15%;
		width: 70%;
	}

	.testimonials-panel .content .testimonials-container .testimonial-text {
		width: 100%;
	}

	.testimonials-panel .content .testimonials-container .testimonial-text p {
		font-size: 22px;
		line-height: 32px;
	}

	.testimonials-panel .content .testimonials-container .testimonial-text .author-position {
		margin-bottom: var(--space-5);
		width: 100%;
	}
}

/* ==========================================================================
   Responsive: Mobile (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
	.testimonials-panel .content h3 {
		font-size: 34px;
		line-height: 42px;
	}
}