/*!
 * Lightweight Loop for Elementor
 *
 * One rule set serves both layouts. Grid and carousel differ only in the value
 * of a handful of custom properties, which Elementor sets per breakpoint from
 * the Layout Mode control. There are no media queries in this file, so custom
 * Elementor breakpoints are respected automatically.
 *
 * No !important, no generic class names, no framework.
 */

.lw-loop {
	position: relative;

	/* Defaults. Elementor's generated rules have higher specificity and win. */
	--lw-mode: grid;
	--lw-display: grid;
	--lw-overflow: visible;
	--lw-snap: none;
	--lw-basis: auto;
	--lw-snap-align: none;
	--lw-nav-display: none;
	--lw-pag-display: none;
	--lw-cols: 1;
	--lw-spv: 1;
	--lw-gap-col: 24px;
	--lw-gap-row: 24px;
	--lw-edge: 0px;
	--lw-pad-block: 0px;

	/*
	 * Width of one slide for a given slides-per-view, accounting for the gaps
	 * between them. Substituted where it is used, so the percentage resolves
	 * against the scroll container. Fractional values such as 1.15 work, which
	 * is how a sliver of the next card is revealed.
	 */
	--lw-slide-basis: calc((100% - (var(--lw-spv) - 1) * var(--lw-gap-col)) / var(--lw-spv));
}

.lw-loop__items {
	display: var(--lw-display);
	grid-template-columns: repeat(var(--lw-cols), minmax(0, 1fr));
	gap: var(--lw-gap-row) var(--lw-gap-col);
	align-items: var(--lw-align, stretch);
	overflow: var(--lw-overflow);
	scroll-snap-type: var(--lw-snap);
	scroll-behavior: smooth;
	padding-inline: var(--lw-edge);
	padding-block: var(--lw-pad-block);
	scroll-padding-inline: var(--lw-edge);
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.lw-loop__items::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.lw-loop__items:focus-visible {
	outline: var(--lw-focus, 2px solid currentColor);
	outline-offset: 2px;
}

.lw-loop__item {
	flex: 0 0 var(--lw-basis);
	min-width: 0;
	scroll-snap-align: var(--lw-snap-align);
}

/* Mouse dragging: snapping fights the drag, so it is suspended for the duration. */
.lw-loop.lw-loop--dragging .lw-loop__items {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
	user-select: none;
}

.lw-loop__nav {
	display: var(--lw-nav-display);
	position: absolute;
	top: var(--lw-nav-y, 50%);
	z-index: 2;
	align-items: center;
	justify-content: center;
	width: var(--lw-nav-size, 40px);
	height: var(--lw-nav-size, 40px);
	padding: 0;
	border: 0;
	border-radius: var(--lw-nav-radius, 50%);
	background: var(--lw-nav-bg, #fff);
	color: var(--lw-nav-color, #111);
	box-shadow: var(--lw-nav-shadow, 0 1px 4px rgba(0, 0, 0, 0.18));
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.15s linear, background-color 0.15s linear, color 0.15s linear;
}

.lw-loop__nav:hover {
	background: var(--lw-nav-bg-hover, var(--lw-nav-bg, #fff));
	color: var(--lw-nav-color-hover, var(--lw-nav-color, #111));
}

.lw-loop__nav:focus-visible {
	outline: var(--lw-focus, 2px solid currentColor);
	outline-offset: 2px;
}

.lw-loop__nav[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.lw-loop__nav svg {
	width: var(--lw-nav-icon, 18px);
	height: var(--lw-nav-icon, 18px);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lw-loop__prev {
	inset-inline-start: var(--lw-nav-offset, -8px);
}

.lw-loop__next {
	inset-inline-end: var(--lw-nav-offset, -8px);
}

.lw-loop__pagination {
	display: var(--lw-pag-display);
	flex-wrap: wrap;
	justify-content: var(--lw-pag-align, center);
	gap: var(--lw-dot-gap, 8px);
	margin-block-start: var(--lw-pag-space, 16px);
}

.lw-loop__dot {
	width: var(--lw-dot-size, 8px);
	height: var(--lw-dot-size, 8px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--lw-dot-bg, rgba(0, 0, 0, 0.25));
	cursor: pointer;
}

.lw-loop__dot[aria-current="true"] {
	background: var(--lw-dot-bg-active, currentColor);
}

.lw-loop__dot:focus-visible {
	outline: var(--lw-focus, 2px solid currentColor);
	outline-offset: 3px;
}

.lw-loop__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

.lw-loop__empty {
	margin: 0;
}

/* Fallback card, used only when Elementor Pro or a template is unavailable. */
.lw-loop__fallback {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.lw-loop__fallback img {
	display: block;
	width: 100%;
	height: auto;
}

.lw-loop__fallback-title {
	margin: 0;
	font-size: 1.1em;
	line-height: 1.3;
}

.lw-loop__fallback-excerpt {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.lw-loop__items {
		scroll-behavior: auto;
	}

	.lw-loop__nav {
		transition: none;
	}
}