/**
 * "Carousel" style.
 *
 * Built on native horizontal scrolling, so a finger swipe, a trackpad
 * gesture and the keyboard all work without any script. The buttons only
 * add a convenience on top of behaviour the browser already provides,
 * which is why the carousel still works if the script fails to load.
 *
 * Scroll snapping is switched on by the script at the visitor's first
 * gesture on the carousel (0.12.1), never at page load. A snap at load
 * moves the track by itself, and recent versions of Chrome count that
 * movement as a visitor scroll: they stop measuring the Largest
 * Contentful Paint, and the page ends up with no LCP at all. Without
 * the script, the track scrolls natively, only the snapping is missing.
 */

.mgst-reviews--carrousel {
	align-items: center;
	display: flex;
	gap: 0.5em;
	position: relative;
}

.mgst-carrousel__track {
	display: flex;
	/* 0.16.0: the containing block of the screen reader texts of the slides
	   ("Rated 5 out of 5", position: absolute). Without it, the texts of the
	   slides scrolled out of view stuck out of the page on the right and
	   made the whole page scroll sideways (a phone then zooms out). */
	position: relative;
	gap: 1em;
	overflow-x: auto;
	padding: 0.25em 0.25em 1em;
	scroll-behavior: smooth;
	/* Same value as the side padding: the first slide's snap position is
	   then exactly the starting position, so turning snapping on never
	   moves the track by itself. */
	scroll-padding-inline: 0.25em;
	scroll-snap-type: none;
	scrollbar-width: thin;
}

/* Added by style-carrousel.js at the visitor's first gesture. */
.mgst-reviews--carrousel.mgst-snap-on .mgst-carrousel__track {
	scroll-snap-type: x mandatory;
}

.mgst-carrousel__track:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.mgst-carrousel__slide {
	flex: 0 0 min(360px, 82%);
	scroll-snap-align: start;
}

.mgst-carrousel__slide .mgst-review {
	height: 100%;
}

/* 0.16.0: colours follow the theme like the cards, and the selectors
   outrank a theme rule styling every button (see reviews.css).
   0.17.0: sized from the text around the carousel, never under 40px (a
   comfortable target for a finger or a mouse), whatever the root size. */
.mgst-reviews .mgst-carrousel__arrow:not(#mgst-guard),
.mgst-reviews .mgst-carrousel__arrow:not(#mgst-guard):focus,
.mgst-reviews .mgst-carrousel__arrow:not(#mgst-guard):active {
	align-items: center;
	background: var(--mgst-card);
	border: 1px solid var(--mgst-border);
	border-radius: 50%;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex: none;
	font-family: inherit;
	font-size: 1.5em;
	font-weight: normal;
	height: max(40px, 1.67em);
	justify-content: center;
	letter-spacing: normal;
	line-height: 1;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 0;
	text-shadow: none;
	text-transform: none;
	width: max(40px, 1.67em);
}

.mgst-reviews .mgst-carrousel__arrow:not(#mgst-guard):hover {
	background: var(--mgst-hover);
	border-color: var(--mgst-border);
	box-shadow: none;
	color: inherit;
}

/* "White" card background: white arrows with a dark sign, whatever the
   colour of the text around them. */
.mgst-reviews.mgst-cards-white .mgst-carrousel__arrow:not(#mgst-guard),
.mgst-reviews.mgst-cards-white .mgst-carrousel__arrow:not(#mgst-guard):hover,
.mgst-reviews.mgst-cards-white .mgst-carrousel__arrow:not(#mgst-guard):focus,
.mgst-reviews.mgst-cards-white .mgst-carrousel__arrow:not(#mgst-guard):active {
	color: #222;
}

.mgst-reviews.mgst-cards-white .mgst-carrousel__arrow:not(#mgst-guard):hover {
	background: #f2f2f2;
}

.mgst-reviews .mgst-carrousel__arrow:not(#mgst-guard):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mgst-reviews .mgst-carrousel__arrow:not(#mgst-guard)[disabled] {
	cursor: default;
	opacity: 0.35;
}

/* Readers who ask for less motion get an instant jump instead of a glide. */
@media (prefers-reduced-motion: reduce) {
	.mgst-carrousel__track {
		scroll-behavior: auto;
	}
}

/* On a phone the arrows take room the thumb does not need: swiping is enough. */
@media (max-width: 640px) {
	.mgst-reviews .mgst-carrousel__arrow:not(#mgst-guard),
	.mgst-reviews .mgst-carrousel__arrow:not(#mgst-guard):focus,
	.mgst-reviews .mgst-carrousel__arrow:not(#mgst-guard):active {
		display: none;
	}

	.mgst-carrousel__slide {
		flex-basis: 88%;
	}
}