/**
 * YouthMonk – mobile sliders.
 *
 * Any Elementor container, grid or Loop Grid with the CSS class "ym-m-slider"
 * (Advanced → CSS Classes) stays a grid on desktop/tablet and becomes a
 * swipeable, snap-scrolling slider on phones (≤ 767px).
 *
 * Modifiers:
 *   ym-m-slider--narrow  smaller slides (steps, icon items)
 *   ym-m-slider--auto    slides size to their content (pills / chips)
 */

@media (max-width: 767px) {
	/* The scrolling track: the container itself, or the Loop Grid's inner list. */
	.e-con.ym-m-slider,
	.elementor-widget-loop-grid.ym-m-slider .elementor-loop-container {
		--ym-slide: 82%;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 14px !important;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 16px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 4px 16px 10px !important;
		margin-inline: -16px !important;
		/* Full bleed to the screen edges (sections have 16px side padding on phones). */
		box-sizing: border-box !important;
		width: calc(100% + 32px) !important;
		max-width: calc(100% + 32px) !important;
		min-width: 0 !important;
		align-self: stretch !important;
	}

	/* The Loop Grid widget wrapper must not grow to its content width. */
	.elementor-widget-loop-grid.ym-m-slider,
	.elementor-widget-loop-grid.ym-m-slider > .elementor-widget-container {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		align-self: stretch !important;
	}

	.e-con.ym-m-slider::-webkit-scrollbar,
	.elementor-widget-loop-grid.ym-m-slider .elementor-loop-container::-webkit-scrollbar {
		display: none;
	}

	.e-con.ym-m-slider--narrow { --ym-slide: 56%; }

	/* Slides. */
	.e-con.ym-m-slider > .e-con,
	.e-con.ym-m-slider > .elementor-element,
	.elementor-widget-loop-grid.ym-m-slider .elementor-loop-container > .e-loop-item {
		flex: 0 0 var(--ym-slide) !important;
		width: var(--ym-slide) !important;
		max-width: none !important;
		min-width: 0;
		margin: 0 !important;
		scroll-snap-align: start;
	}

	.e-con.ym-m-slider--auto > .e-con,
	.e-con.ym-m-slider--auto > .elementor-element {
		flex: 0 0 auto !important;
		width: auto !important;
		white-space: nowrap;
	}

	/* Hidden-on-mobile children (e.g. step connector lines) must not take a slot. */
	.e-con.ym-m-slider > .elementor-hidden-mobile {
		display: none !important;
	}

	/* Dots added by youthmonk-sliders.js. */
	.ym-slider-dots {
		display: flex;
		justify-content: center;
		gap: 6px;
		margin-top: 6px;
		width: 100%;
	}

	.ym-slider-dots button {
		width: 8px;
		height: 8px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: #DCD3FB;
		cursor: pointer;
		transition: width 0.2s ease, background-color 0.2s ease;
	}

	.ym-slider-dots button.is-active {
		width: 22px;
		background: #5B3FD9;
	}

	.ym-slider-dots button:focus-visible {
		outline: 2px solid #5B3FD9;
		outline-offset: 2px;
	}
}

@media (min-width: 768px) {
	.ym-slider-dots {
		display: none;
	}
}