/* Liam's Loop Carousel — free-scroll carousel */

.llc-carousel {
	--llc-per-view: 3.5;
	--llc-gap: 24px;
	--llc-bleed: 0px;
	--llc-bleed-start: 0px;
	--llc-bleed-end: 0px;
	--llc-pad-block-start: 0px;
	--llc-pad-block-end: 0px;
	--llc-pad-inline-extra-start: 0px;
	--llc-pad-inline-extra-end: 0px;
	--llc-hover-scale: 1.04;
	--llc-hover-lift: -8px;
	--llc-hover-transition: 320ms;
	--llc-arrow-size: 48px;
	--llc-arrow-icon: 18px;
	--llc-arrow-offset: 12px;
	--llc-arrow-color: #101010;
	--llc-arrow-bg: #ffffff;
	--llc-arrow-color-hover: #ffffff;
	--llc-arrow-bg-hover: #101010;
	--llc-arrow-radius: 50%;
	--llc-progress-width: 100%;
	--llc-progress-height: 3px;
	--llc-progress-track: rgba(0, 0, 0, 0.12);
	--llc-progress-bar: currentColor;
	--llc-progress-radius: 99px;
	--llc-progress-gap: 24px;
	position: relative;
}

.llc-carousel__track {
	display: flex;
	gap: var(--llc-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: none;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	padding-block: var(--llc-pad-block-start) var(--llc-pad-block-end);
	padding-inline:
		calc(var(--llc-bleed-start) + var(--llc-pad-inline-extra-start))
		calc(var(--llc-bleed-end) + var(--llc-pad-inline-extra-end));
	margin-inline: calc(-1 * var(--llc-bleed-start)) calc(-1 * var(--llc-bleed-end));
}

[data-scrollbar="no"] .llc-carousel__track {
	scrollbar-width: none;
}

[data-scrollbar="no"] .llc-carousel__track::-webkit-scrollbar {
	display: none;
}

.llc-carousel__track:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* grab cursor only when dragging is actually enabled */
.llc-carousel.llc-draggable .llc-carousel__track {
	cursor: grab;
}

.llc-carousel.is-dragging .llc-carousel__track {
	cursor: grabbing;
	scroll-behavior: auto;
}

.llc-carousel.is-dragging .llc-item {
	user-select: none;
}

.llc-item {
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: 0;
	width: calc((100% - (var(--llc-per-view) - 1) * var(--llc-gap)) / var(--llc-per-view));
	transition: transform var(--llc-hover-transition) cubic-bezier(0.22, 1, 0.36, 1),
		opacity var(--llc-hover-transition) ease;
}

[data-stretch="yes"] .llc-item,
[data-stretch="yes"] .llc-item > * {
	height: 100%;
}

[data-hover="zoom"] .llc-item:hover {
	transform: scale(var(--llc-hover-scale));
}

[data-hover="lift"] .llc-item:hover {
	transform: translateY(var(--llc-hover-lift));
}

[data-hover="dim"] .llc-carousel__track:hover .llc-item:not(:hover) {
	opacity: 0.45;
}

/* arrows */
.llc-arrows {
	display: flex;
	gap: 8px;
	pointer-events: none;
}

.llc-arrow {
	display: grid;
	place-items: center;
	width: var(--llc-arrow-size);
	height: var(--llc-arrow-size);
	padding: 0;
	border: 0;
	border-radius: var(--llc-arrow-radius);
	background: var(--llc-arrow-bg);
	color: var(--llc-arrow-color);
	cursor: pointer;
	pointer-events: auto;
	transition: background 200ms ease, color 200ms ease, opacity 200ms ease;
}

.llc-arrow svg {
	width: var(--llc-arrow-icon);
	height: var(--llc-arrow-icon);
}

.llc-arrow:hover,
.llc-arrow:focus-visible {
	background: var(--llc-arrow-bg-hover);
	color: var(--llc-arrow-color-hover);
}

.llc-arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

[data-arrows="inside"] .llc-arrows,
[data-arrows="outside"] .llc-arrows {
	position: absolute;
	inset-block-start: 50%;
	inset-inline: 0;
	transform: translateY(-50%);
	justify-content: space-between;
}

[data-arrows="inside"] .llc-arrow--prev {
	margin-inline-start: var(--llc-arrow-offset);
}

[data-arrows="inside"] .llc-arrow--next {
	margin-inline-end: var(--llc-arrow-offset);
}

[data-arrows="outside"] .llc-arrow--prev {
	margin-inline-start: calc(-1 * (var(--llc-arrow-size) + var(--llc-arrow-offset)));
}

[data-arrows="outside"] .llc-arrow--next {
	margin-inline-end: calc(-1 * (var(--llc-arrow-size) + var(--llc-arrow-offset)));
}

[data-arrows="top"] {
	display: flex;
	flex-direction: column;
}

[data-arrows="top"] .llc-arrows,
[data-arrows="bottom"] .llc-arrows {
	justify-content: flex-end;
}

[data-arrows="top"] .llc-arrows {
	order: -1;
	margin-block-end: var(--llc-arrow-offset);
}

[data-arrows="bottom"] .llc-arrows {
	margin-block-start: var(--llc-arrow-offset);
}

/* progress */
.llc-progress {
	width: var(--llc-progress-width);
	height: var(--llc-progress-height);
	margin-block-start: var(--llc-progress-gap);
	border-radius: var(--llc-progress-radius);
	background: var(--llc-progress-track);
	overflow: hidden;
}

.llc-progress__bar {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--llc-progress-bar);
}

.llc-notice {
	padding: 24px;
	border: 1px dashed rgba(0, 0, 0, 0.25);
	border-radius: 8px;
	font: 14px/1.5 system-ui, sans-serif;
	color: rgba(0, 0, 0, 0.6);
	text-align: center;
}

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