/* blocks/google-reviews-section
 *
 * Two rendering paths share this file:
 *   .google-reviews-widget — wrapper around the plugin shortcode output
 *   everything else        — the static design used until a shortcode is set
 *
 * Cards scroll-snap horizontally like the category slider, so the same arrow
 * behaviour in assets/custom.js can be pointed at .reviews-slider later.
 */

.section-google-reviews {
	--cards-visible: 3;
	--card-gap: 24px;
	--google-blue: #4285F4;
	--google-red: #EA4335;
	--google-yellow: #FBBC05;
	--google-green: #34A853;
	--star-color: #F5A623;
	text-align: center;
}

.section-google-reviews .section-head {
	margin-bottom: 20px;
}

.section-google-reviews .section-title {
	text-transform: uppercase;
}

/* --- Google verified badge ---------------------------------------------- */

.section-google-reviews .google-reviews-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin-bottom: 34px;
}

.section-google-reviews .google-wordmark {
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 30px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.5px;
}

.section-google-reviews .google-wordmark .c-blue   { color: var(--google-blue); }
.section-google-reviews .google-wordmark .c-red    { color: var(--google-red); }
.section-google-reviews .google-wordmark .c-yellow { color: var(--google-yellow); }
.section-google-reviews .google-wordmark .c-green  { color: var(--google-green); }

.section-google-reviews .badge-label {
	font-size: 15px;
	line-height: 1.3;
}

.section-google-reviews .badge-stars {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.section-google-reviews .badge-check {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
}

.section-google-reviews .badge-stars .stars {
	color: var(--star-color);
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 1;
}

/* --- Cards --------------------------------------------------------------- */

.section-google-reviews .reviews-slider {
	position: relative;
}

.section-google-reviews .reviews-track {
	display: flex;
	gap: var(--card-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 4px;
}

.section-google-reviews .reviews-track::-webkit-scrollbar { display: none; }

.section-google-reviews .review-card {
	flex: 0 0 calc(
		(100% - (var(--cards-visible) - 1) * var(--card-gap)) / var(--cards-visible)
	);
	scroll-snap-align: start;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
	padding: 22px;
	text-align: left;
}

.section-google-reviews .review-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.section-google-reviews .review-avatar {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	background: #e4e4e4;
	color: #555;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
	overflow: hidden;
}

.section-google-reviews .review-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section-google-reviews .review-name {
	font-size: 15px;
	font-weight: 500;
}

/* Pushes the Google mark to the far right of the card header. */
.section-google-reviews .review-head .g-mark {
	width: 26px;
	height: 26px;
	margin-left: auto;
	flex: 0 0 26px;
}

.section-google-reviews .review-stars {
	margin-bottom: 12px;
	line-height: 1;
}

.section-google-reviews .review-stars .star {
	color: #d5d5d5;
	font-size: 16px;
	letter-spacing: 3px;
}

.section-google-reviews .review-stars .star.is-filled {
	color: var(--star-color);
}

.section-google-reviews .review-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

/* --- Arrows -------------------------------------------------------------- */

.section-google-reviews .reviews-arrows {
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 50%;
	left: -46px;
	right: -46px;
	transform: translateY(-50%);
	pointer-events: none;
}

.section-google-reviews .reviews-arrows button {
	pointer-events: auto;
	width: 26px;
	height: 26px;
	border: 1px solid #d9d9d9;
	border-radius: 50%;
	background: #fff;
	color: #333;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 0;
}

.section-google-reviews .reviews-arrows button[disabled] {
	opacity: .35;
	cursor: default;
}

/* --- Footer -------------------------------------------------------------- */

.section-google-reviews .reviews-score {
	margin: 34px 0 0;
	font-size: 16px;
}

.section-google-reviews .btn-group {
	margin-top: 22px;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1200px) {
	.section-google-reviews .reviews-arrows { left: -10px; right: -10px; }
}

@media (max-width: 1024px) {
	.section-google-reviews { --cards-visible: 2; }
}

@media (max-width: 767px) {
	.section-google-reviews { --cards-visible: 1; }
	.section-google-reviews .reviews-arrows { display: none; }
}