/**
 * Client review carousel — front-end styles.
 *
 * Colours and type come from the site's own design system (body copy in Poppins
 * #303030, the blue used for accent text, Raleway for emphasis), so the carousel
 * sits in the page rather than looking like a bolted-on widget.
 *
 * Progressive enhancement: with no JavaScript the reviews render as a readable
 * stack. The script adds `.is-ready`, which switches the track to the carousel
 * layout and reveals the arrows and dots.
 */

.jme-reviews {
	--jme-accent: #566d8f;
	--jme-text: #303030;
	--jme-muted: #898989;

	position: relative;
	width: 100%;
	box-sizing: border-box;
	color: var(--jme-text);
}

.jme-reviews__viewport {
	overflow: hidden;
}

.jme-reviews__track {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jme-reviews__slide {
	box-sizing: border-box;
	padding: 5% 0;
	margin: 0;
	list-style: none;
}

.jme-review {
	margin: 0;
	/* Slides in one row must not stretch each other's star image layout. */
	display: block;
}

/* Stars sit above the quote, the quote below them, the name below that —
   the order the client asked for and the order the old cards read in. */
.jme-review__stars {
	display: block;
	width: 128px;
	height: 38px;
	max-width: 40%;
	margin: 0 0 16px;
	object-fit: contain;
}

.jme-review__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--jme-text);
}

.jme-review__byline {
	margin: 14px 0 0;
	padding: 0;
	font-family: 'Raleway', 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--jme-accent);
}

.jme-review__link {
	color: inherit;
	text-decoration: none;
}

.jme-review__link:hover,
.jme-review__link:focus {
	text-decoration: underline;
}

.jme-review__source {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: var(--jme-muted);
}

/* Arrows and dots exist only for the scripted carousel. */
.jme-reviews__nav,
.jme-reviews__dots {
	display: none;
}

/* ---- the carousel, once the script has taken over ------------------ */

.jme-reviews.is-ready {
	/* Room beside the cards for the arrows, as the original had. */
	padding: 0 34px;
}

.jme-reviews.is-ready .jme-reviews__track {
	display: flex;
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.jme-reviews.is-ready .jme-reviews__slide {
	flex: 0 0 auto;
	padding: 5% 5%;
}

.jme-reviews.is-ready .jme-reviews__nav {
	display: block;
}

.jme-reviews.is-ready .jme-reviews__dots {
	display: flex;
}

.jme-reviews__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--jme-accent);
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.jme-reviews__arrow:hover,
.jme-reviews__arrow:focus-visible {
	opacity: 1;
}

.jme-reviews__arrow svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.jme-reviews__arrow--prev {
	left: 0;
}

.jme-reviews__arrow--next {
	right: 0;
}

.jme-reviews__dots {
	justify-content: center;
	gap: 10px;
	margin: 10px 0 0;
}

.jme-reviews__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid var(--jme-accent);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.jme-reviews__dot.is-active {
	background: var(--jme-accent);
}

/* ---- responsive: 1 card below 980px, 2 above, as the original had ---- */

@media (max-width: 979px) {
	.jme-reviews.is-ready {
		padding: 0;
	}

	.jme-reviews.is-ready .jme-reviews__slide {
		padding: 5% 0;
	}

	.jme-reviews.is-ready .jme-reviews__nav {
		display: flex;
		justify-content: center;
		gap: 16px;
		margin-top: 8px;
	}

	.jme-reviews__arrow {
		position: static;
		transform: none;
		width: 34px;
		height: 34px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jme-reviews.is-ready .jme-reviews__track {
		transition: none;
	}
}