/**
 * Element: mfy_slider — crossfading background images with an overlay text box.
 *
 * No global design-system file exists in this theme (boilerplate not installed),
 * so the tokens this element needs are defined locally on the block. Colors follow
 * the RGB-triplet rule and are consumed via rgba() so the transparency stays flexible.
 */

.mfy-slider {
	/* --- local tokens --- */
	--mfy-slider-space: 12px; /* spacing base (only place a raw px value is allowed) */
	--mfy-slider-box-color: 0, 110, 125; /* #006e7d as R, G, B */
	--mfy-slider-box-alpha: 0.85;
	--mfy-slider-text-color: 255, 255, 255;
	--mfy-slider-fade: 1.2s;
	--mfy-slider-min-height: clamp(20rem, 42vw, 44rem);
	--mfy-slider-max: 125rem; /* 2000px @16px root — cap on ultra-wide screens */
	--mfy-slider-box-max: 26rem;
	--mfy-slider-pad: calc(var(--mfy-slider-space) * 3);

	/* Type scale (bigger than the theme defaults). */
	--mfy-slider-title-size: clamp(2rem, 3vw, 3rem);
	--mfy-slider-copy-size: clamp(1.0625rem, 1.4vw, 1.25rem);

	/* Align inner content with the Uncode grid (row.limit-width):
	   1200px content container, centered, 36px side padding (single-h-padding). */
	--mfy-slider-content-max: 75rem; /* 1200px @16px root */
	--mfy-slider-content-gutter: calc(var(--mfy-slider-space) * 3); /* 36px */

	position: relative;
	display: flex;
	align-items: center;
	max-width: var(--mfy-slider-max);
	margin-inline: auto;
	min-height: var(--mfy-slider-min-height);
	padding-block: calc(var(--mfy-slider-space) * 2);
	overflow: hidden;
}

/* --- inner container: matches the page content column so the box has no offset --- */
.mfy-slider__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--mfy-slider-content-max);
	margin-inline: auto;
	padding-inline: var(--mfy-slider-content-gutter);
}

/* --- background layers --- */
.mfy-slider__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.mfy-slider__slide {
	position: absolute;
	inset: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0;
	transition: opacity var(--mfy-slider-fade) ease-in-out;
	will-change: opacity;
}

.mfy-slider__slide--active {
	opacity: 1;
}

/* --- overlay text box (left-aligned within the content column) --- */
.mfy-slider__box {
	width: 100%;
	max-width: var(--mfy-slider-box-max);
	padding: var(--mfy-slider-pad);
	background-color: rgba(var(--mfy-slider-box-color), var(--mfy-slider-box-alpha));
	color: rgba(var(--mfy-slider-text-color), 1);
}

.mfy-slider__title {
	margin-top: 0;
	margin-bottom: calc(var(--mfy-slider-space) * 1.5);
}

/* Color + type size on the tinted box — higher specificity beats Uncode's
   default heading/paragraph styles (no !important, per the CSS rules). */
.mfy-slider .mfy-slider__box .mfy-slider__title,
.mfy-slider .mfy-slider__box .mfy-slider__text {
	color: rgba(var(--mfy-slider-text-color), 1);
}

.mfy-slider .mfy-slider__box .mfy-slider__title {
	font-size: var(--mfy-slider-title-size);
	line-height: 1.15;
}

.mfy-slider .mfy-slider__box .mfy-slider__text,
.mfy-slider .mfy-slider__box .mfy-slider__text p {
	font-size: var(--mfy-slider-copy-size);
	line-height: 1.5;
}

.mfy-slider__text > *:last-child {
	margin-bottom: 0;
}

.mfy-slider__text a {
	color: inherit;
	text-decoration: underline;
}

/* --- keyboard focus --- */
.mfy-slider:focus-visible {
	outline: 2px solid rgba(var(--mfy-slider-text-color), 1);
	outline-offset: 2px;
}

/* --- respect reduced motion: no crossfade, first image stays --- */
@media (prefers-reduced-motion: reduce) {
	.mfy-slider__slide {
		transition: none;
	}
}

/* --- desktop: a touch more breathing room for the box --- */
@media (min-width: 960px) {
	.mfy-slider {
		--mfy-slider-pad: calc(var(--mfy-slider-space) * 4);
	}
}