/*
 * Google Reviews — Carousel
 * Marquee mechanics ported from 21st.dev "marquee-01"; card layout follows the
 * Google review card in the reference screenshot.
 */

.cw-grev {
	--cw-bg: #ffffff;
	--cw-fg: #18181b;
	--cw-muted: #71717a;

	--cw-star: #fbbc04;
	--cw-star-empty: rgba(0, 0, 0, 0.15);
	--cw-star-size: 16px;
	--cw-verified: #1a73e8;

	--cw-card-bg: #ffffff;
	--cw-card-border: rgba(0, 0, 0, 0.08);
	--cw-card-radius: 1rem;
	--cw-card-padding: 1.25rem;
	--cw-card-width: 290px;
	--cw-card-gap: 1rem;
	--cw-card-lines: 3;
	--cw-avatar: 44px;

	--cw-summary-width: 260px;
	--cw-columns-gap: 2.5rem;
	--cw-duration: 40s;
	--cw-shift: -50%;
	--cw-fade: 12%;

	position: relative;
	width: 100%;
	background-color: transparent;
	color: var(--cw-fg);
}

.cw-grev[data-cw-theme='dark'] {
	--cw-fg: #fafafa;
	--cw-muted: #a1a1aa;
	--cw-star-empty: rgba(255, 255, 255, 0.2);
	--cw-card-bg: rgba(255, 255, 255, 0.05);
	--cw-card-border: rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------- Title block */

.cw-grev__header {
	margin-bottom: 2.5rem;
	margin-inline: auto;
	text-align: center;
}

.cw-grev__eyebrow {
	display: block;
	margin-bottom: 0.75rem;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	color: #2f5fbf;
}

.cw-grev__heading {
	display: block;
}

.cw-grev__title {
	display: block;
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--cw-fg);
	text-wrap: balance;
}

.cw-grev__subtitle {
	/* inline-block so a max-width box follows the header's text-align
	   instead of staying pinned to the left. */
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--cw-muted);
	text-wrap: pretty;
}

/* --------------------------------------------------------------------- Two columns */

.cw-grev__inner {
	display: flex;
	align-items: center;
	gap: var(--cw-columns-gap);
	min-width: 0;
}

.cw-grev--summary-right .cw-grev__inner {
	flex-direction: row-reverse;
}

.cw-grev__summary {
	/* Summary stars are larger than the card stars; the control overrides this. */
	--cw-star-size: 34px;

	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: var(--cw-summary-width);
	text-align: center;
}

a.cw-grev__summary {
	transition: opacity 200ms ease;
}

a.cw-grev__summary:hover {
	opacity: 0.85;
}

/* The carousel takes the remaining width. min-width:0 lets it shrink inside flex
   instead of pushing the summary off-screen. */
.cw-grev__carousel {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cw-card-gap);
	overflow: hidden;
}

/* ------------------------------------------------------------------------ Summary */

.cw-grev__summary-heading {
	display: block;
}

.cw-grev__summary-title {
	display: block;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--cw-fg);
}

.cw-grev__summary-sub {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--cw-fg);
}

.cw-grev__summary-count {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cw-grev__summary-logo {
	width: 130px;
	height: auto;
	max-width: 100%;
}

/* -------------------------------------------------------------------------- Stars */

.cw-grev__stars {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

.cw-grev__stars-base,
.cw-grev__stars-fill {
	display: flex;
	gap: 2px;
}

.cw-grev__stars-base {
	color: var(--cw-star-empty);
}

/* Clipped overlay renders half stars without a second icon set. */
.cw-grev__stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: var(--cw-stars-fill, 100%);
	color: var(--cw-star);
}

.cw-grev__stars .cw-icon {
	width: var(--cw-star-size);
	height: var(--cw-star-size);
}

/* ------------------------------------------------------------------------ Marquee */

.cw-grev__row {
	display: flex;
	overflow: hidden;
	min-width: 0;
}

.cw-grev__track {
	display: flex;
	width: max-content;
	animation: cw-grev-scroll var(--cw-duration) linear infinite;
}

.cw-grev__track.is-reverse {
	animation-direction: reverse;
}

/* Trailing padding makes one group exactly one loop step wide, so translating by
   -100/copies% lands seamlessly on the next copy. */
.cw-grev__group {
	display: flex;
	align-items: stretch;
	gap: var(--cw-card-gap);
	padding-right: var(--cw-card-gap);
}

.cw-grev--pause .cw-grev__row:hover .cw-grev__track {
	animation-play-state: paused;
}

@keyframes cw-grev-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(var(--cw-shift));
	}
}

/* Edge fades sit above the rows; the colour has to match the section behind. */
.cw-grev__fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--cw-fade);
	pointer-events: none;
	z-index: 2;
}

.cw-grev__fade--start {
	left: 0;
	background-image: linear-gradient(to right, var(--cw-bg), transparent);
}

.cw-grev__fade--end {
	right: 0;
	background-image: linear-gradient(to left, var(--cw-bg), transparent);
}

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

.cw-grev__card {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 0.625rem;
	width: var(--cw-card-width);
	padding: var(--cw-card-padding);
	border-width: 1px;
	border-color: var(--cw-card-border);
	border-radius: var(--cw-card-radius);
	background-color: var(--cw-card-bg);
	white-space: normal;
	text-align: left;
}

.cw-grev--shadow .cw-grev__card {
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
}

a.cw-grev__card {
	transition: transform 200ms ease, box-shadow 200ms ease;
}

a.cw-grev__card:hover {
	transform: translateY(-2px);
}

.cw-grev--shadow a.cw-grev__card:hover {
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.cw-grev__card-head {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.cw-grev .cw-grev__avatar {
	width: var(--cw-avatar);
	height: var(--cw-avatar);
	flex: 0 0 auto;
	border-radius: 9999px;
	object-fit: cover;
}

.cw-grev__avatar--initial {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--cw-avatar) * 0.45);
	font-weight: 600;
	line-height: 1;
	color: #ffffff;
}

.cw-grev__card-id {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.cw-grev__card-name {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--cw-fg);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cw-grev__card-date {
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--cw-muted);
}

.cw-grev__card-mark {
	width: 22px;
	height: auto;
	margin-left: auto;
	flex: 0 0 auto;
	align-self: flex-start;
}

.cw-grev__card-rating {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.cw-grev__verified {
	display: inline-flex;
	color: var(--cw-verified);
}

.cw-grev__verified .cw-icon {
	width: calc(var(--cw-star-size) * 0.95);
	height: calc(var(--cw-star-size) * 0.95);
}

.cw-grev__card-text {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--cw-fg);
}

.cw-grev--clamp .cw-grev__card-text {
	display: -webkit-box;
	-webkit-line-clamp: var(--cw-card-lines, 3);
	line-clamp: var(--cw-card-lines, 3);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ------------------------------------------------------------------------ Stacking */

/* column-reverse keeps the summary first in the DOM (it reads as the section's lead-in
   for screen readers) while showing it under the carousel visually. */

@media (max-width: 1024px) {
	.cw-grev--stack-tablet .cw-grev__inner,
	.cw-grev--stack-tablet.cw-grev--summary-right .cw-grev__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.cw-grev--stack-tablet.cw-grev--stacked-below .cw-grev__inner,
	.cw-grev--stack-tablet.cw-grev--stacked-below.cw-grev--summary-right .cw-grev__inner {
		flex-direction: column-reverse;
	}

	.cw-grev--stack-tablet .cw-grev__summary {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.cw-grev--stack-mobile .cw-grev__inner,
	.cw-grev--stack-mobile.cw-grev--summary-right .cw-grev__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.cw-grev--stack-mobile.cw-grev--stacked-below .cw-grev__inner,
	.cw-grev--stack-mobile.cw-grev--stacked-below.cw-grev--summary-right .cw-grev__inner {
		flex-direction: column-reverse;
	}

	.cw-grev--stack-mobile .cw-grev__summary {
		width: 100%;
	}

	.cw-grev {
		--cw-card-width: 260px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cw-grev__track {
		animation: none;
	}

	/* Without the animation the track would sit flush left; centre it instead so the
	   row reads as a static, scrollable strip. */
	.cw-grev__row {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.cw-grev__row::-webkit-scrollbar {
		display: none;
	}
}