/*
 * Horizontal Gallery widget.
 *
 * The gallery never scrolls by itself. Inside a container with the Horizontal
 * Scroll effect active (.ehs-active ancestor) it becomes a single row with
 * width: max-content, widening the track so the container's pinned scroll
 * moves it. Anywhere else (mobile fallback, effect disabled, no-JS) it wraps
 * into rows like a regular gallery.
 */

.ehs-gallery {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.ehs-gallery__item {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	margin: 0;
}

.ehs-gallery__link {
	display: block;
	line-height: 0;
}

/* Clipping frame used by Image Parallax (the lightbox anchor doubles as the
   frame; a plain span fills in when images are not linked). */
.ehs-gallery__frame {
	display: block;
	line-height: 0;
}

.ehs-gallery__img {
	display: block;
	width: auto;
	height: 400px;
	max-width: none;
	object-fit: cover;
}

.ehs-gallery__caption {
	margin-top: 8px;
}

.ehs-gallery__empty {
	padding: 24px;
	border: 1px dashed rgba(0, 0, 0, 0.3);
	background: rgba(0, 0, 0, 0.04);
	font-size: 14px;
	text-align: center;
}

/* Inside an active horizontal scroll container: one endless row that extends
   the track. The widget wrapper must be allowed to grow past its parent. */
.ehs-wrapper.ehs-active .ehs-gallery {
	flex-wrap: nowrap;
	width: -moz-max-content;
	width: max-content;
}

.ehs-wrapper.ehs-active .elementor-widget-ehs-gallery,
.ehs-wrapper.ehs-active .elementor-widget-ehs-alternate {
	--container-widget-width: auto;
	--container-widget-flex-grow: 0;
	width: auto;
	max-width: none !important;
}

/* Crop parallax: the frame clips while the script scales the image up
   (--ehs-fx-scale) and slides it inside. Gated on .ehs-active so the editor
   and the mobile fallback keep the normal layout, with no cropping. */
.ehs-wrapper.ehs-active .ehs-gallery--parallax .ehs-gallery__frame {
	overflow: hidden;
}

/*
 * Vertical Layout On (widget option): the stacking media queries depend on
 * the breakpoints configured in Elementor, so EHS_Plugin::get_stack_css()
 * prints them inline after this file (.ehs-gallery--stack-<breakpoint>).
 */