/* Bitpro Logo-karusell – front-end stiler */

.blc-carousel {
	--blc-logo-size: 48px;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

/* Standardvisning (før JS har startet, eller hvis JS er av): enkel linje som brytes fint */
.blc-track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 40px;
}

.blc-logo-item,
.blc-slide > * {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.blc-logo-item img,
.blc-slide img {
	display: block;
	max-height: var(--blc-logo-size, 48px);
	width: auto;
	height: auto;
}

/* Valgfrie gråtoner, fargelegges ved hover/fokus */
.blc-carousel.blc-grayscale .blc-logo-item img,
.blc-carousel.blc-grayscale .blc-slide img {
	filter: grayscale(100%);
	opacity: 0.6;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.blc-carousel.blc-grayscale .blc-logo-item:hover img,
.blc-carousel.blc-grayscale .blc-slide:hover img,
.blc-carousel.blc-grayscale .blc-logo-item:focus-within img,
.blc-carousel.blc-grayscale .blc-slide:focus-within img {
	filter: none;
	opacity: 1;
}

/* Når JavaScript har tatt over: skjuler overflow og ruller mellom grupper */
.blc-carousel.is-active .blc-viewport {
	overflow: hidden;
	width: 100%;
}

.blc-carousel.is-active .blc-track {
	flex-wrap: nowrap;
	transition: transform 0.5s ease;
	will-change: transform;
}

.blc-slide {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex: 0 0 auto;
	gap: 40px;
	padding: 0 8px;
	box-sizing: border-box;
}

@media (max-width: 991px) {
	.blc-track,
	.blc-slide {
		gap: 28px;
	}
}

@media (max-width: 575px) {
	.blc-track,
	.blc-slide {
		gap: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.blc-carousel.is-active .blc-track {
		transition: none !important;
	}
}