/* Page Sections — Quote / Testimonial */

.ps-quote { /* uses .section spacing from theme */ }

.ps-quote--light {
	background: var(--cream);
	color: var(--teal);
}

.ps-quote--dark {
	background: var(--plum);
	color: #fff;
}

.ps-quote__figure {
	margin: 0 auto;
	max-width: 720px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.ps-quote__mark {
	font-family: var(--font-heading);
	font-size: clamp(72px, 12vw, 120px);
	line-height: 0.8;
	display: block;
	color: var(--sand);
	margin-bottom: -8px;
	user-select: none;
}

.ps-quote--dark .ps-quote__mark {
	color: var(--sand);
	opacity: 0.9;
}

.ps-quote__text {
	font-family: var(--font-heading);
	font-size: clamp(20px, 2.4vw, 34px);
	line-height: 1.4;
	margin: 0;
	padding: 0;
	border: 0;
	color: inherit;
	font-weight: 400;
	letter-spacing: 0.005em;
}

.ps-quote--light .ps-quote__text {
	color: var(--teal);
}

.ps-quote--dark .ps-quote__text {
	color: #fff;
}

.ps-quote__cite {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-style: normal;
}

.ps-quote__avatar {
	display: inline-block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 6px;
	box-shadow: var(--shadow-card);
	background: var(--grey-200, #e6e6e6);
}

.ps-quote__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ps-quote__author {
	font-family: var(--font);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.01em;
}

.ps-quote--light .ps-quote__author {
	color: var(--teal);
}

.ps-quote--dark .ps-quote__author {
	color: #fff;
}

.ps-quote__role {
	font-family: var(--font);
	font-size: 14px;
	opacity: 0.75;
}

.ps-quote--light .ps-quote__role {
	color: var(--teal);
}

.ps-quote--dark .ps-quote__role {
	color: var(--sand);
	opacity: 1;
}

/* Desktop — wider quote container, more breathing room */
@media (min-width: 1024px) {
	.ps-quote__figure { max-width: 760px; gap: 24px; }
	.ps-quote__avatar { width: 68px; height: 68px; }
	.ps-quote__author { font-size: 16px; }
	.ps-quote__role { font-size: 14px; }
}

@media (min-width: 1280px) {
	.ps-quote__figure { max-width: 820px; gap: 26px; }
}

/* Responsive — tighten up at small widths */
@media (max-width: 767px) {
	.ps-quote__figure {
		gap: 18px;
	}
	.ps-quote__mark {
		font-size: clamp(60px, 18vw, 88px);
	}
	.ps-quote__text {
		/* Cap at 20px — the base rule renders 20px at 768px, so a 22px cap
		   made the quote grow when the viewport shrank past the breakpoint. */
		font-size: clamp(18px, 5vw, 20px);
	}
}

@media (max-width: 479px) {
	.ps-quote__avatar {
		width: 56px;
		height: 56px;
	}
}