/* MF Slider — lightweight hero slider
   All colors via CSS variables so it adapts to any brand/theme. */

.mf-slider {
	--mfs-h: 560px;
	--mfs-h-sm: 360px;
	--mfs-radius: 18px;
	--mfs-accent: #1f6feb;          /* brand accent — override per project */
	--mfs-accent-ink: #ffffff;
	--mfs-text: #ffffff;
	--mfs-control-bg: rgba(255,255,255,.16);
	--mfs-control-bg-hover: rgba(255,255,255,.32);
	--mfs-ease: cubic-bezier(.22,.61,.36,1);

	position: relative;
	width: 100%;
	height: var(--mfs-h);
	border-radius: var(--mfs-radius);
	overflow: hidden;
	background: #0c0e12;
	isolation: isolate;
	font-family: inherit;            /* matches your theme's typography */
}

/* --- Full-width: break out of the theme content container -------- */
.mf-slider--fullwidth {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
}

/* --- Full-height: fill the viewport (svh avoids mobile bar jump) -- */
.mf-slider--fullheight {
	height: 100vh;       /* fallback for old browsers */
	height: 100svh;
	border-radius: 0;
}
@media (max-width: 768px) {
	.mf-slider--fullheight { height: 100vh; height: 100svh; }
}

.mf-slider__track {
	position: absolute;
	inset: 0;
}

/* --- Slides ------------------------------------------------------ */
.mf-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.mf-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Fade transition (default) — softer cross-fade */
.mf-slider--fade .mf-slide {
	transition: opacity 1.1s ease, visibility 1.1s ease;
}

/* Slide transition */
.mf-slider--slide .mf-slide {
	transform: translateX(30px);
	transition: opacity .8s var(--mfs-ease), transform .8s var(--mfs-ease), visibility .8s var(--mfs-ease);
}
.mf-slider--slide .mf-slide.is-active {
	transform: translateX(0);
}

.mf-slide__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	will-change: transform;
}

/* Ken Burns — transition-based so the leaving image eases back instead of
   snapping. Active slide slowly zooms in; inactive eases to rest smoothly. */
.mf-slider--kb .mf-slide__bg {
	transform: scale(1);
	transition: transform 8s ease-out;
}
.mf-slider--kb .mf-slide.is-active .mf-slide__bg {
	transform: scale(1.09);
}

/* Gradient scrim keeps captions legible over any image */
.mf-slide__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(8,10,14,.82) 0%, rgba(8,10,14,.45) 38%, rgba(8,10,14,.05) 72%, rgba(8,10,14,0) 100%),
		linear-gradient(0deg, rgba(8,10,14,.6) 0%, rgba(8,10,14,0) 45%);
}

/* --- Caption ----------------------------------------------------- */
.mf-slider .mf-slide__caption {
	position: absolute;
	z-index: 6;
	bottom: clamp(36px, 9vh, 96px);
	max-width: min(640px, 86%);
	color: var(--mfs-text);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.mf-slide__caption--left   { left: clamp(28px, 6vw, 88px); text-align: left; align-items: flex-start; }
.mf-slide__caption--right  { right: clamp(28px, 6vw, 88px); text-align: right; align-items: flex-end; }
.mf-slide__caption--center { left: 50%; transform: translateX(-50%); text-align: center; align-items: center; }

.mf-slide__count {
	font-size: clamp(.95rem, 1.4vw, 1.15rem);
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--mfs-text);
	opacity: .95;
	font-variant-numeric: tabular-nums;
}
.mf-slide__count i {
	font-style: normal;
	opacity: .55;
	margin-left: 3px;
	font-size: .82em;
}

.mf-slider .mf-slide__title {
	margin: 0;
	padding: 0;
	color: var(--mfs-text) !important;   /* defeat theme heading colors */
	/* font-family intentionally NOT set — inherits the theme's heading (h2) font.
	   To force a specific font: .mf-slider .mf-slide__title { font-family: ...; } */
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	line-height: 1.06;
	font-weight: 600;
	letter-spacing: normal;
	text-wrap: balance;
	text-shadow: 0 2px 26px rgba(0,0,0,.4);
}
.mf-slider .mf-slide__sub {
	margin: 0;
	color: var(--mfs-text) !important;
	font-size: clamp(1rem, 1.6vw, 1.18rem);
	line-height: 1.6;
	opacity: .92;
	font-weight: 400;
	max-width: 50ch;
	text-shadow: 0 1px 16px rgba(0,0,0,.35);
}

.mf-slide__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 6px;
	flex-wrap: wrap;
}
.mf-slide__caption--right .mf-slide__actions  { justify-content: flex-end; }
.mf-slide__caption--center .mf-slide__actions { justify-content: center; }

.mf-slide__btn {
	display: inline-block;
	padding: 14px 30px;
	background: var(--mfs-accent);
	color: var(--mfs-accent-ink) !important;
	font-size: .98rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 999px;
	transition: transform .25s var(--mfs-ease), box-shadow .25s var(--mfs-ease), filter .25s var(--mfs-ease);
	box-shadow: 0 10px 26px -10px rgba(0,0,0,.55);
}
.mf-slide__btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 16px 32px -12px rgba(0,0,0,.6);
}

/* Circular prev/next, grouped next to the button (reference style) */
.mf-slide__arrows { display: flex; gap: 12px; }
.mf-slider__nav {
	width: 48px; height: 48px;
	display: grid;
	place-items: center;
	border: 1.5px solid rgba(255,255,255,.45);
	border-radius: 50%;
	color: #fff;
	background: transparent;
	cursor: pointer;
	transition: background .25s var(--mfs-ease), border-color .25s, transform .25s var(--mfs-ease);
}
.mf-slider__nav:hover {
	background: rgba(255,255,255,.16);
	border-color: rgba(255,255,255,.85);
}
.mf-slider__nav:active { transform: scale(.92); }

/* Staggered reveal for the active slide */
.mf-slide.is-active .mf-slide__count,
.mf-slide.is-active .mf-slide__title,
.mf-slide.is-active .mf-slide__sub,
.mf-slide.is-active .mf-slide__actions {
	animation: mfs-rise .7s var(--mfs-ease) both;
}
.mf-slide.is-active .mf-slide__title   { animation-delay: .08s; }
.mf-slide.is-active .mf-slide__sub     { animation-delay: .16s; }
.mf-slide.is-active .mf-slide__actions { animation-delay: .26s; }
@keyframes mfs-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- Video play button + iframe ---------------------------------- */
.mf-slide__playbtn {
	position: absolute;
	z-index: 4;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 84px; height: 84px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: #fff;
	background: rgba(0,0,0,.42);
	backdrop-filter: blur(2px);
	box-shadow: 0 0 0 0 rgba(255,255,255,.5);
	transition: transform .3s var(--mfs-ease), background .3s var(--mfs-ease);
	padding-left: 4px;
}
.mf-slide__playbtn::before {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,.55);
	animation: mfs-pulse 2.4s ease-out infinite;
}
.mf-slide__playbtn:hover {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--mfs-accent);
}
@keyframes mfs-pulse {
	0%   { transform: scale(.9); opacity: .8; }
	70%  { transform: scale(1.25); opacity: 0; }
	100% { opacity: 0; }
}
.mf-slide__video,
.mf-slide iframe {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

/* --- Top fade (helps a transparent header / white logo stay legible) --- */
.mf-slider__topfade {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: var(--mfs-topfade-h, 160px);
	z-index: 7;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(0,0,0, var(--mfs-topfade-strength, .55)) 0%,
		rgba(0,0,0, calc(var(--mfs-topfade-strength, .55) * .45)) 45%,
		rgba(0,0,0, 0) 100%
	);
}

/* Cover mode: video fills the slide (16:9 assumed), no side/letterbox gaps */
.mf-slide--cover .mf-slide__video,
.mf-slide--cover iframe {
	inset: auto !important;
	top: 50% !important;
	left: 50% !important;
	width: auto !important;
	height: auto !important;
	min-width: 100% !important;
	min-height: 100% !important;
	aspect-ratio: 16 / 9;
	transform: translate(-50%, -50%) !important;
}

/* --- Responsive -------------------------------------------------- */
@media (max-width: 768px) {
	.mf-slider { height: var(--mfs-h-sm); border-radius: calc(var(--mfs-radius) * .66); }
	.mf-slider .mf-slide__caption {
		bottom: clamp(18px, 4.5vw, 32px);   /* hug the bottom on mobile */
		gap: 12px;
		max-width: 92%;
	}
	.mf-slide__caption--right,
	.mf-slide__caption--center { left: clamp(20px,5vw,40px); right: auto; transform: none; text-align: left; align-items: flex-start; }
	.mf-slide__caption--right .mf-slide__actions,
	.mf-slide__caption--center .mf-slide__actions { justify-content: flex-start; }
	.mf-slide__title { font-size: clamp(1.7rem, 8vw, 2.4rem); }
	.mf-slider__nav { width: 42px; height: 42px; }
	.mf-slide__playbtn { width: 66px; height: 66px; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	.mf-slider--kb .mf-slide__bg,
	.mf-slider--kb .mf-slide.is-active .mf-slide__bg { transition: none; transform: none; }
	.mf-slide.is-active .mf-slide__count,
	.mf-slide.is-active .mf-slide__title,
	.mf-slide.is-active .mf-slide__sub,
	.mf-slide.is-active .mf-slide__actions { animation: none; }
	.mf-slide__playbtn::before { animation: none; }
}