/* ==========================================================================
   Slider wrapper & track
   ========================================================================== */

.gprs-carousel {
	max-inline-size: 100%;

	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--wp--style--block-gap) * 2)) / 3);
	gap: var(--wp--style--block-gap);

	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;

	&::-webkit-scrollbar {
		display: none;
	}
}

/* ==========================================================================
   Review card
   ========================================================================== */

.gprs-review-card {
	scroll-snap-align: start;
}

/* ==========================================================================
   Review header (avatar + meta)
   ========================================================================== */

.gprs-review-header {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.gprs-review-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.gprs-review-avatar--placeholder {
	display: inline-block;
	background: #ccc;
}

.gprs-review-meta {
	display: flex;
	flex-direction: column;
}

.gprs-review-author {
	font-weight: 600;
}

/* ==========================================================================
   Review text
   ========================================================================== */

.gprs-review-text {
	flex-grow: 1;
}

/* ==========================================================================
   Stars
   ========================================================================== */

.gprs-review-stars {
	margin-top: auto;
}

.gprs-star {
	letter-spacing: 1px;
}

.gprs-star--full {
	color: #ffcd00;
}

.gprs-star--half {
	color: #ffcd00;
}

.gprs-star--empty {
	color: #e16f00;
}

/* ==========================================================================
   Navigation Dots
   ========================================================================== */

.gprs-carousel-dots {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: calc(var(--wp--style--block-gap, 1.5rem) * 2);
}

.gprs-carousel-dot {
	padding: 0;
	width: 10px;
	height: 10px;
	border: none;
	border-radius: 50%;
	background-color: #ccc;
	cursor: pointer;
}

.gprs-carousel-dot:hover,
.gprs-carousel-dot:focus-visible {
	background-color: #000;
	outline: none;
}

.gprs-carousel-dot.is-active {
	background-color: #000;
}