/**
 * HLC Logo Carousel — frontend (prefixed, scoped)
 */

.hlc-carousel {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--hlc-max-width, 100%);
	padding: var(--hlc-padding, 16px);
	overflow: hidden;
}

.hlc-carousel--h-left {
	margin-left: 0;
	margin-right: auto;
}

.hlc-carousel--h-center {
	margin-left: auto;
	margin-right: auto;
}

.hlc-carousel--h-right {
	margin-left: auto;
	margin-right: 0;
}

.hlc-carousel *,
.hlc-carousel *::before,
.hlc-carousel *::after {
	box-sizing: border-box;
}

.hlc-carousel__viewport {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.hlc-carousel__track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
	animation-name: hlc-marquee;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: var(--hlc-duration, 30s);
}

.hlc-carousel--dir-right .hlc-carousel__track {
	animation-direction: reverse;
}

.hlc-carousel--pause-hover:hover .hlc-carousel__track {
	animation-play-state: paused;
}

@keyframes hlc-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

.hlc-carousel__segment {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: var(--hlc-align-items, center);
	flex-shrink: 0;
	gap: var(--hlc-gap, 40px);
	padding-right: var(--hlc-gap, 40px);
}

.hlc-carousel__item {
	flex: 0 0 auto;
	display: flex;
	align-items: var(--hlc-align-items, center);
	justify-content: center;
	height: var(--hlc-height, 80px);
	max-width: var(--hlc-logo-max-width, calc(var(--hlc-height, 80px) * 2.5));
	min-width: 0;
}

.hlc-carousel__link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-decoration: none;
	outline-offset: 2px;
}

.hlc-carousel__img {
	display: block;
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Grayscale */
.hlc-carousel--grayscale .hlc-carousel__img {
	filter: grayscale(1);
	transition: filter 0.25s ease;
}

.hlc-carousel--grayscale-hover .hlc-carousel__item:hover .hlc-carousel__img {
	filter: grayscale(0);
}

/* Visibility */
@media (max-width: 767px) {
	.hlc-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.hlc-hide-tablet {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.hlc-hide-desktop {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hlc-carousel.hlc-respect-prm .hlc-carousel__track {
		animation: none;
		transform: none;
		width: 100%;
		max-width: 100%;
		flex-wrap: wrap;
		justify-content: var(--hlc-justify, center);
		row-gap: var(--hlc-gap, 40px);
		column-gap: var(--hlc-gap, 40px);
	}

	.hlc-carousel.hlc-respect-prm .hlc-carousel__segment {
		flex-wrap: wrap;
		justify-content: var(--hlc-justify, center);
		width: 100%;
	}

	.hlc-carousel.hlc-respect-prm .hlc-carousel__segment + .hlc-carousel__segment {
		display: none;
	}
}