.bdheg {
	--bdheg-height: 180px;
	--bdheg-gap: 10px;
	--bdheg-collapsed-grow: 1;
	--bdheg-expanded-grow: 4;
	--bdheg-min-width: 55px;
	--bdheg-duration: 350ms;
	--bdheg-easing: ease;
	--bdheg-fit: cover;
	--bdheg-pos-x: 50%;
	--bdheg-pos-y: 50%;
	--bdheg-collapsed-opacity: 1;
	--bdheg-hover-zoom: 1;
	--bdheg-items-visible: 3;
	--bdheg-carousel-collapsed-width: var(--bdheg-min-width);
	--bdheg-carousel-expanded-width: calc(var(--bdheg-min-width) * 4);

	display: flex;
	align-items: stretch;
	gap: var(--bdheg-gap);
	width: 100%;
	height: var(--bdheg-height);
	min-width: 0;
}

/*
 * Every item uses the gallery height as its visual frame. The source image's
 * natural aspect ratio never controls the card height, so portrait, landscape
 * and square images all behave like the same accordion-style gallery cards.
 */
.bdheg__item {
	position: relative;
	align-self: stretch;
	flex: var(--bdheg-collapsed-grow) 1 var(--bdheg-min-width);
	min-width: var(--bdheg-min-width);
	height: 100% !important;
	min-height: 0;
	overflow: hidden;
	opacity: var(--bdheg-collapsed-opacity);
	transition:
		flex-grow var(--bdheg-duration) var(--bdheg-easing),
		flex-basis var(--bdheg-duration) var(--bdheg-easing),
		transform var(--bdheg-duration) var(--bdheg-easing),
		opacity var(--bdheg-duration) var(--bdheg-easing),
		box-shadow var(--bdheg-duration) var(--bdheg-easing),
		border-color var(--bdheg-duration) var(--bdheg-easing);
}

.bdheg__item--default,
.bdheg--carousel .bdheg__item--active {
	flex-grow: var(--bdheg-expanded-grow);
	opacity: 1;
}

/*
 * Absolutely filling the frame prevents Hello Elementor / Elementor's global
 * img { height:auto } rules from reintroducing the original image ratio.
 */
.bdheg .bdheg__link {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.bdheg .bdheg__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	object-fit: var(--bdheg-fit) !important;
	object-position: var(--bdheg-pos-x) var(--bdheg-pos-y) !important;
	transform: scale(1);
	transition: transform var(--bdheg-duration) var(--bdheg-easing);
	-webkit-user-drag: none;
	user-select: none;
}

/*
 * Original hover-expand behaviour. Carousel mode opts out of this block so
 * autoplay, drag/swipe and hover preview do not fight the CSS-only hover state.
 */
@media (hover: hover) and (pointer: fine) {
	.bdheg:not(.bdheg--carousel):hover .bdheg__item,
	.bdheg:not(.bdheg--carousel):focus-within .bdheg__item {
		flex-grow: var(--bdheg-collapsed-grow);
		opacity: var(--bdheg-collapsed-opacity);
	}

	.bdheg:not(.bdheg--carousel):hover .bdheg__item:hover,
	.bdheg:not(.bdheg--carousel):focus-within .bdheg__item:focus-within {
		flex-grow: var(--bdheg-expanded-grow);
		opacity: 1;
	}

	.bdheg:not(.bdheg--carousel) .bdheg__item:hover .bdheg__image,
	.bdheg:not(.bdheg--carousel) .bdheg__item:focus-within .bdheg__image {
		transform: scale(var(--bdheg-hover-zoom));
	}
}

/* Carousel state. The first DOM item is the current featured image. */
.bdheg--carousel {
	overflow: hidden;
}

/*
 * Carousel Mode uses fixed calculated flex-basis widths instead of allowing all
 * gallery items to shrink into the available row. JavaScript calculates these
 * two widths from Items Visible + the expanded/collapsed ratios, so only the
 * requested number of cards fit inside the viewport while the remaining cards
 * sit just off-canvas ready to rotate in.
 */
.bdheg--carousel .bdheg__item {
	flex: 0 0 var(--bdheg-carousel-collapsed-width);
	min-width: 0;
	max-width: none;
	transform: translate3d(var(--bdheg-item-shift, 0px), 0, 0);
}

/*
 * JS briefly disables transitions while recycling an off-canvas item from one
 * end of the infinite loop to the other. Because the recycle happens only after
 * the outgoing card has already left the viewport, the user sees one continuous
 * directional motion instead of a card flying across to the opposite side.
 */
.bdheg--carousel.bdheg--settling .bdheg__item {
	transition: none !important;
}

.bdheg--carousel .bdheg__item--active {
	flex-basis: var(--bdheg-carousel-expanded-width);
	opacity: 1;
}

.bdheg--carousel .bdheg__item--active .bdheg__image {
	transform: scale(var(--bdheg-hover-zoom));
}

/* Desktop hover preview: temporarily expand a non-active image. */
.bdheg--carousel.bdheg--previewing .bdheg__item {
	flex-basis: var(--bdheg-carousel-collapsed-width);
	opacity: var(--bdheg-collapsed-opacity);
}

.bdheg--carousel.bdheg--previewing .bdheg__item--preview {
	flex-basis: var(--bdheg-carousel-expanded-width);
	opacity: 1;
}

.bdheg--carousel.bdheg--previewing .bdheg__item--preview .bdheg__image {
	transform: scale(var(--bdheg-hover-zoom));
}

.bdheg--carousel.bdheg--dragging,
.bdheg--carousel.bdheg--dragging .bdheg__link {
	cursor: grabbing !important;
}

/* Elementor prefix_class is applied on the widget wrapper. Carousel mode keeps
 * its featured image on touch devices regardless of the old mobile setting. */
.bdheg-mobile-equal .bdheg:not(.bdheg--carousel) .bdheg__item,
.bdheg-mobile-equal .bdheg:not(.bdheg--carousel) .bdheg__item--default {
	flex-grow: var(--bdheg-collapsed-grow);
}

.bdheg__empty {
	padding: 18px;
	border: 1px dashed #c8c8c8;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.bdheg__item,
	.bdheg__image {
		transition-duration: 0.01ms !important;
	}
}