/*
 * Carousel base, used by Slider, Image carousel, Logo carousel and Testimonial carousel.
 * The slides are a row that scrolls and snaps (so a swipe or a trackpad works with no script);
 * view.js adds the arrows, the dots and autoplay.
 */
.mosaic-carousel {
	--mosaic-cs-gap: 1rem;
}

/* How many slides show: phones first, then tablets, then large screens. The media rules come after the base. */
.mosaic-carousel__frame {
	--mosaic-cs-per: var(--mosaic-cs-m, 1);
	position: relative;
}

@media (min-width: 768px) {
	.mosaic-carousel__frame { --mosaic-cs-per: var(--mosaic-cs-t, 2); }
}

@media (min-width: 1024px) {
	.mosaic-carousel__frame { --mosaic-cs-per: var(--mosaic-cs-d, 3); }
}

.mosaic-carousel__track {
	display: flex;
	gap: var(--mosaic-cs-gap, 1rem);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.mosaic-carousel.is-ready .mosaic-carousel__track {
	scrollbar-width: none;
}

.mosaic-carousel.is-ready .mosaic-carousel__track::-webkit-scrollbar {
	display: none;
}

.mosaic-carousel__track:focus-visible {
	outline: var(--mosaic-focus-width, 3px) solid var(--mosaic-color-focus, currentColor);
	outline-offset: 2px;
}

.mosaic-carousel__slide {
	flex: 0 0 calc((100% - (var(--mosaic-cs-per) - 1) * var(--mosaic-cs-gap, 1rem)) / var(--mosaic-cs-per));
	min-inline-size: 0;
	scroll-snap-align: start;
}

/* Controls (made by view.js). */
.mosaic-carousel__arrow {
	position: absolute;
	inset-block-start: 50%;
	z-index: 2;
	display: inline-grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	margin-block-start: -1.25rem;
	padding: 0;
	color: var(--mosaic-cs-arrow-color, #1d2330);
	font-size: 1.25rem;
	background: var(--mosaic-cs-arrow-bg, #fff);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.mosaic-carousel__arrow--prev { inset-inline-start: 0.5rem; }
.mosaic-carousel__arrow--next { inset-inline-end: 0.5rem; }

.mosaic-carousel__arrow[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
}

.mosaic-carousel__arrow:focus-visible,
.mosaic-carousel__dot:focus-visible,
.mosaic-carousel__pause:focus-visible {
	outline: var(--mosaic-focus-width, 3px) solid var(--mosaic-color-focus, #2b4acb);
	outline-offset: 2px;
}

.mosaic-carousel__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-block-start: 1rem;
}

.mosaic-carousel__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

/* The dot is small to look at, but its button is large enough to press. */
.mosaic-carousel__dot {
	position: relative;
	inline-size: 0.75rem;
	block-size: 0.75rem;
	padding: 0;
	background: var(--mosaic-cs-dot, #c3c8d4);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.mosaic-carousel__dot::before {
	content: "";
	position: absolute;
	inset: -0.75rem;
}

.mosaic-carousel__dot[aria-current="true"] {
	background: var(--mosaic-cs-dot-active, var(--mosaic-color-primary, #2b4acb));
	transform: scale(1.25);
}

.mosaic-carousel__pause {
	display: inline-grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	padding: 0;
	color: inherit;
	background: none;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: 0.7;
	cursor: pointer;
}

.mosaic-carousel__pause:hover {
	opacity: 1;
}

/* Cards used by the Slider and the Image carousel. */
.mosaic-cs-card {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	overflow: hidden;
	background: var(--mosaic-color-surface, #f5f6fa);
	border-radius: 0.75rem;
}

.mosaic-cs-card__media {
	display: block;
	overflow: hidden;
}

.mosaic-cs-card__media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: cover;
}

.mosaic-cs-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 1.25rem 1.25rem;
}

.mosaic-cs-card__title {
	margin: 0;
	color: var(--mosaic-color-headings, inherit);
	font-size: 1.125rem;
	line-height: 1.3;
}

.mosaic-cs-card__text {
	margin: 0;
}

.mosaic-cs-card__link {
	margin-block-start: auto;
	color: var(--mosaic-color-primary, #2b4acb);
	font-weight: 600;
	text-decoration: none;
}

.mosaic-cs-card__link:hover {
	text-decoration: underline;
}

.mosaic-cs-ratio-square img { aspect-ratio: 1 / 1; }
.mosaic-cs-ratio-4-3 img { aspect-ratio: 4 / 3; }
.mosaic-cs-ratio-3-2 img { aspect-ratio: 3 / 2; }
.mosaic-cs-ratio-16-9 img { aspect-ratio: 16 / 9; }

.mosaic-cs-caption {
	margin-block-start: 0.4rem;
	font-size: 0.875em;
}

@media (prefers-reduced-motion: reduce) {
	.mosaic-carousel__arrow {
		transition: none;
	}
}