/**
 * ML Slider – widget styles.
 *
 * No media queries: every responsive value comes from Elementor's own
 * responsive controls, which write CSS custom properties per breakpoint.
 * Media queries here would lose to Elementor's generated desktop CSS, because
 * that CSS has far higher specificity and media queries add none.
 *
 * Layout per slide: a text panel and an image side by side, where the image is
 * pulled left over the panel by the Overlap value and then fills whatever width
 * is left, so it always reaches the right edge. Stacked, the image goes on top
 * and the panel is pulled up over it by the same Overlap value.
 */

.mlsl {
	/* Layout (set by the Layout control) */
	--mlsl-flex-dir: row;
	--mlsl-align: center;
	--mlsl-media-order: 0;
	--mlsl-panel-w-used: var(--mlsl-panel-w);
	--mlsl-media-ol: calc(-1 * var(--mlsl-overlap));
	--mlsl-panel-ol: 0px;
	--mlsl-minh-used: var(--mlsl-minh);
	--mlsl-panel-z: 1;
	--mlsl-media-z: 2;
	--mlsl-nav-pos: absolute;
	--mlsl-nav-mt: 0px;

	/* Raw values from the style controls */
	--mlsl-panel-w: 50%;
	--mlsl-overlap: 130px;
	--mlsl-minh: 520px;

	/* Panel */
	--mlsl-panel-bg: #eaeaea;
	--mlsl-panel-justify: flex-start;

	/* Image */
	--mlsl-ratio: 16 / 9;
	--mlsl-image-fit: cover;

	/* Type */
	--mlsl-label-color: #333333;
	--mlsl-heading-color: #3f8220;
	--mlsl-text-color: #333333;

	/* Arrows */
	--mlsl-arrow-size: 48px;
	--mlsl-arrow-gap: 14px;
	--mlsl-arrow-icon-size: 16px;
	--mlsl-arrow-color: #333333;
	--mlsl-arrow-bg: transparent;
	--mlsl-arrow-border: #b5b5b5;
	--mlsl-arrow-color-hover: #ffffff;
	--mlsl-arrow-bg-hover: #3f8220;
	--mlsl-arrow-border-hover: #3f8220;
	--mlsl-arrow-radius: 999px;
	--mlsl-nav-bottom: 0px;
	--mlsl-nav-right: 60px;

	--mlsl-transition: 250ms;

	position: relative;
	box-sizing: border-box;
	width: 100%;
}

.mlsl *,
.mlsl *::before,
.mlsl *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   VIEWPORT
   ========================================================================== */

/* Swiper's own CSS sets height:100% on slides. Auto lets every slide take the
   height of the tallest one through the wrapper's default align-items:stretch,
   which is what keeps the arrows from jumping between slides. */
.mlsl .swiper-slide {
	height: auto;
}

/* Until the script runs, only the first slide should be visible – otherwise all
   slides are stacked in the flex wrapper for a moment on a slow connection. */
.mlsl:not(.mlsl--ready) .mlsl__slide:not(:first-child) {
	display: none;
}

/* ==========================================================================
   SLIDE
   ========================================================================== */

.mlsl__slide {
	display: flex;
	flex-direction: var(--mlsl-flex-dir);
	align-items: var(--mlsl-align);
	min-height: var(--mlsl-minh-used);
}

/* ==========================================================================
   PANEL
   ========================================================================== */

/* align-self:stretch, so the panel runs the full height of the slide while the
   image stays vertically centred in what is left. That is what gives the image
   its inset top and bottom without any hard-coded offsets. */
.mlsl__panel {
	position: relative;
	z-index: var(--mlsl-panel-z);
	flex: 0 0 auto;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: var(--mlsl-panel-justify);
	width: var(--mlsl-panel-w-used);
	margin-block-start: var(--mlsl-panel-ol);
	padding: 60px;
	background-color: var(--mlsl-panel-bg);
}

.mlsl .mlsl__label {
	display: block;
	margin: 0 0 24px 0;
	padding: 0;
	color: var(--mlsl-label-color);
	font-size: 17px;
	line-height: 1.4;
}

.mlsl .mlsl__heading {
	margin: 0 0 28px 0;
	padding: 0;
	color: var(--mlsl-heading-color);
	font-size: 54px;
	font-weight: 700;
	line-height: 1.05;
	overflow-wrap: break-word;
}

.mlsl .mlsl__text {
	color: var(--mlsl-text-color);
	font-size: 17px;
	line-height: 1.6;
}

.mlsl .mlsl__text p {
	margin: 0 0 1.2em 0;
}

.mlsl .mlsl__text p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   MEDIA
   ========================================================================== */

/* flex:1 rather than a width of its own: the image then fills whatever the
   panel leaves plus the overlap, so its right edge always meets the widget's. */
.mlsl__media {
	position: relative;
	z-index: var(--mlsl-media-z);
	order: var(--mlsl-media-order);
	flex: 1 1 0%;
	min-width: 0;
	margin-inline-start: var(--mlsl-media-ol);
}

.mlsl .mlsl__image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: var(--mlsl-ratio);
	object-fit: var(--mlsl-image-fit);
}

/* ==========================================================================
   ARROWS
   ========================================================================== */

.mlsl__nav {
	position: var(--mlsl-nav-pos);
	inset-block-end: var(--mlsl-nav-bottom);
	inset-inline-end: var(--mlsl-nav-right);
	z-index: 3;
	display: flex;
	justify-content: flex-end;
	gap: var(--mlsl-arrow-gap);
	margin-block-start: var(--mlsl-nav-mt);
}

.mlsl .mlsl__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--mlsl-arrow-size);
	height: var(--mlsl-arrow-size);
	padding: 0;
	border: 1px solid var(--mlsl-arrow-border);
	border-radius: var(--mlsl-arrow-radius);
	background-color: var(--mlsl-arrow-bg);
	color: var(--mlsl-arrow-color);
	font-size: var(--mlsl-arrow-icon-size);
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		background-color var(--mlsl-transition) ease,
		border-color var(--mlsl-transition) ease,
		color var(--mlsl-transition) ease;
}

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

.mlsl .mlsl__arrow:focus-visible {
	outline: 2px solid var(--mlsl-arrow-bg-hover);
	outline-offset: 3px;
}

.mlsl__arrow-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	pointer-events: none;
}

.mlsl__arrow-icon i {
	display: block;
	line-height: 1;
}

.mlsl__arrow-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* A single slide has nothing to navigate to. */
.mlsl--single .mlsl__nav {
	display: none;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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