/* ==========================================================================
   Cacao Boys homepage reviews marquee (cb-reviews)
   Compact Google social-proof strip: one inline badge row + a continuously
   auto-scrolling, seamlessly looping card strip. The track carries two copies
   of the card set and drifts left via a pure-CSS translateX animation, so when
   the first set has fully left the viewport the clone is in perfect register
   and the wrap is invisible. No JS needed: it pauses on hover / focus-within
   and, under prefers-reduced-motion, falls back to a static scrollable row.
   Built from tokens.css only. See inc/reviews.php for markup.
   ========================================================================== */

.cb-reviews {
	padding-block: clamp(2rem, 4vw, 3rem);
	background: var(--cb-surface-alt);
	/* Loop length. Roughly 60px/sec across ~18 cards reads as a calm drift. */
	--cb-marquee-duration: 100s;
}

/* --- Compact header bar: badge on the left ------------------------------- */
.cb-reviews__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.cb-reviews__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.cb-reviews__title {
	margin: 0;
	font-size: var(--cb-text-xl);
	font-weight: var(--cb-weight-heading);
	line-height: var(--cb-leading-heading);
	color: var(--cb-text);
}

.cb-reviews__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.cb-reviews__score {
	font-size: var(--cb-text-xl);
	font-weight: var(--cb-weight-black);
	line-height: 1;
	color: var(--cb-text);
}

.cb-reviews__stars {
	color: var(--cb-caramel);
	font-size: var(--cb-text-lg);
	letter-spacing: 0.06em;
	line-height: 1;
	white-space: nowrap;
}

.cb-reviews__count {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--cb-text-sm);
	color: var(--cb-text-muted);
	white-space: nowrap;
}

.cb-reviews__g {
	flex: none;
	display: inline-block;
	vertical-align: middle;
}

.cb-reviews__link {
	font-size: var(--cb-text-sm);
	font-weight: var(--cb-weight-medium);
	color: var(--cb-accent-text);
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

.cb-reviews__link:hover,
.cb-reviews__link:focus-visible {
	color: var(--cb-accent-2);
}

/* --- Marquee viewport: clips the moving track --------------------------- */
.cb-reviews__viewport {
	overflow: hidden;
	/* Room for the cards' soft shadow, which the horizontal clip would
	   otherwise shave off top and bottom. */
	padding-block: 0.5rem;
}

/* --- The moving track: two card sets side by side, drifting left -------- */
.cb-reviews__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: cb-reviews-marquee var(--cb-marquee-duration, 100s) linear infinite;
}

/* Pause the drift while a visitor is reading or tabbing through. */
.cb-reviews:hover .cb-reviews__track,
.cb-reviews:focus-within .cb-reviews__track {
	animation-play-state: paused;
}

/* Each set is one full copy of the cards. Translating the track by exactly
   half its width (one set) lands the clone where the original began, so the
   loop is seamless. Every card carries its own trailing gap (margin), so a
   single set's width is a whole number of card+gap units with no odd
   between-set gap to throw the -50% register off. */
.cb-reviews__set {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex: none;
}

@keyframes cb-reviews-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* --- Cards: fixed width, equal height, compact -------------------------- */
.cb-review {
	flex: 0 0 auto;
	width: min(80vw, 20rem);
	margin-inline-end: clamp(0.85rem, 1.6vw, 1.25rem);
	display: flex;
	flex-direction: column;
	padding: clamp(1rem, 2vw, 1.35rem);
	background: var(--cb-surface);
	border: var(--cb-border-width) solid var(--cb-border);
	border-radius: var(--cb-radius-md);
	box-shadow: var(--cb-shadow-soft);
}

.cb-review__text {
	margin: 0.6rem 0 1rem;
	color: var(--cb-text);
	font-size: var(--cb-text-sm);
	line-height: var(--cb-leading-body);
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cb-review__text::before {
	content: "\201C";
}

.cb-review__text::after {
	content: "\201D";
}

/* --- Card footer (pinned to the bottom for a tidy strip) ---------------- */
.cb-review__meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: auto;
}

.cb-review__avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--cb-radius-pill);
	background: var(--cb-caramel);
	color: var(--cb-cocoa-dark);
	font-weight: var(--cb-weight-heading);
	font-size: var(--cb-text-sm);
	line-height: 1;
}

.cb-review__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin-right: auto;
}

.cb-review__author {
	font-weight: var(--cb-weight-medium);
	color: var(--cb-text);
	font-size: var(--cb-text-sm);
}

.cb-review__date {
	color: var(--cb-text-muted);
	font-size: var(--cb-text-xs);
}

.cb-review__meta .cb-reviews__g {
	width: 15px;
	height: 15px;
	opacity: 0.9;
}

/* Visually-hidden label helper (matches WP core's screen-reader-text). */
.cb-reviews .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Reduced motion: no drift, a static row the visitor scrolls by hand -*/
@media (prefers-reduced-motion: reduce) {
	.cb-reviews__viewport {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: var(--cb-border-strong) transparent;
	}

	.cb-reviews__track {
		animation: none;
		transform: none;
		will-change: auto;
	}

	/* The clone only exists to feed the loop. With no loop, hide it so the
	   same reviews are not shown twice in the scrollable row. */
	.cb-reviews__set[aria-hidden="true"] {
		display: none;
	}
}