/* Component: Reviews — Figma "WhySapphire" (What Florida Homeowners Say) */

.spc-reviews__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 64px;
	align-items: start;
}

.spc-reviews__lead {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.spc-reviews__slider {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.spc-reviews__viewport {
	overflow: hidden;
	/* Height follows the active slide (set by script.js). */
	transition: height 0.5s var(--spc-ease);
}

.spc-reviews__track {
	display: flex;
	align-items: flex-start;
	transition: transform 0.5s var(--spc-ease);
	touch-action: pan-y;
	will-change: transform;
}

.spc-reviews__track.is-dragging {
	transition: none;
	user-select: none;
	cursor: grabbing;
}

.spc-reviews__item {
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
	margin: 0;
	transition: opacity 0.5s var(--spc-ease);
}

.spc-reviews__item:not(.is-active) {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.spc-reviews__viewport,
	.spc-reviews__track,
	.spc-reviews__item {
		transition: none;
	}
}

.spc-reviews__quote {
	position: relative;
	min-height: 125px;
}

.spc-reviews__quote blockquote {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}

.spc-reviews__quote-mark {
	position: absolute;
	top: 0;
	right: 0;
	width: 152px;
	height: 125px;
	color: var(--sp-gold);
}

.spc-reviews__author {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.spc-reviews__name {
	font: 700 24px/1.25 var(--sp-font-body);
	color: var(--sp-black);
}

.spc-reviews__place {
	font: 400 16px/1.5 var(--sp-font-body);
	color: var(--sp-muted);
}

.spc-reviews__nav {
	display: flex;
	gap: 16px;
}

/* 768: lead and review side by side in equal columns. */
@media (max-width: 1023px) {
	.spc-reviews__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}

	.spc-reviews__slider {
		grid-column: auto;
	}

	.spc-reviews__quote blockquote {
		font: 400 16px/1.5 var(--sp-font-body);
	}
}

/* 360: one column. */
@media (max-width: 767px) {
	.spc-reviews__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}