/* =========================================================================
   Modern Slideshow — Frontend
   Allt är scopat under .msl-slideshow för att inte krocka med Divi.
   ========================================================================= */

.msl-slideshow {
	--msl-height: 80vh;
	--msl-text-color: #ffffff;
	--msl-accent: #ffffff;
	--msl-title-size: 4.5rem;
	--msl-excerpt-size: 1.375rem;
	--msl-cta-bg: #ffffff;
	--msl-cta-color: #111111;
	--msl-content-width: 760px;
	--msl-pad-x: clamp(1.25rem, 6vw, 6rem);
	--msl-radius: 14px;
	--msl-ease: cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
	width: 100%;
	height: var(--msl-height);
	min-height: 360px;
	overflow: hidden;
	isolation: isolate;
	background: #0a0a0a;
	font-family: inherit; /* ärver Divi-temats typsnitt */
	-webkit-tap-highlight-color: transparent;
}

/* ---------- Track & slides ---------- */
.msl-track {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.msl-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	pointer-events: none;
}

/* ---- FADE-övergång (default) ---- */
.msl-transition-fade .msl-slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s var(--msl-ease), visibility 0s linear 0.9s;
}
.msl-transition-fade .msl-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.9s var(--msl-ease);
	z-index: 2;
}

/* ---- SLIDE-övergång ---- */
.msl-transition-slide .msl-slide {
	transform: translateX(100%);
	opacity: 0;
	transition: transform 0.8s var(--msl-ease), opacity 0.8s var(--msl-ease);
}
.msl-transition-slide .msl-slide.is-active {
	transform: translateX(0);
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
}
.msl-transition-slide .msl-slide.is-prev {
	transform: translateX(-100%);
	opacity: 0;
	z-index: 1;
}

/* ---------- Media / bakgrundsbild ---------- */
.msl-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.msl-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	will-change: transform;
	transform: scale(1.02); /* undvik kantglapp vid blur */
}

.msl-image--placeholder {
	background:
		radial-gradient(120% 120% at 20% 10%, #2a2a32 0%, transparent 60%),
		linear-gradient(135deg, #16161c 0%, #0a0a0a 100%);
}

/* Ken Burns: långsam zoom på den aktiva sliden */
.msl-kenburns .msl-slide.is-active .msl-image {
	animation: mslKenburns 9s ease-out forwards;
}
@keyframes mslKenburns {
	from { transform: scale(1.02); }
	to   { transform: scale(1.14); }
}

.msl-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* ---------- Innehåll ---------- */
.msl-content {
	position: relative;
	z-index: 3;
	display: flex;
	width: 100%;
	height: 100%;
	padding: clamp(2rem, 7vh, 6rem) var(--msl-pad-x);
	color: var(--msl-text-color);
	pointer-events: none;
}
.msl-content-inner {
	pointer-events: auto;
	max-width: min(var(--msl-content-width), 92%);
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 2vw, 1.5rem);
}

/* Positionering 3x3 */
.msl-pos-top-left      { align-items: flex-start;  justify-content: flex-start; text-align: left;   }
.msl-pos-top-center    { align-items: center;      justify-content: flex-start; text-align: center; }
.msl-pos-top-right     { align-items: flex-end;    justify-content: flex-start; text-align: right;  }
.msl-pos-center-left   { align-items: flex-start;  justify-content: center;     text-align: left;   }
.msl-pos-center-center { align-items: center;      justify-content: center;     text-align: center; }
.msl-pos-center-right  { align-items: flex-end;    justify-content: center;     text-align: right;  }
.msl-pos-bottom-left   { align-items: flex-start;  justify-content: flex-end;   text-align: left;   }
.msl-pos-bottom-center { align-items: center;      justify-content: flex-end;   text-align: center; }
.msl-pos-bottom-right  { align-items: flex-end;    justify-content: flex-end;   text-align: right;  }

.msl-content[class*="-center"] .msl-content-inner { align-items: center; }
.msl-content[class*="-right"]  .msl-content-inner { align-items: flex-end; }

/* ---------- Typografi ---------- */
.msl-title {
	margin: 0;
	font-size: clamp(calc(var(--msl-title-size) * 0.48), 7vw, var(--msl-title-size));
	line-height: 1.04;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: inherit;
}
.msl-excerpt {
	margin: 0;
	font-size: clamp(calc(var(--msl-excerpt-size) * 0.85), 1.7vw, var(--msl-excerpt-size));
	line-height: 1.55;
	font-weight: 400;
	max-width: 52ch;
	opacity: 0.94;
	color: inherit;
}

/* ---------- Textskugga (valbar per slide) ---------- */
.msl-shadow-none .msl-title,
.msl-shadow-none .msl-excerpt {
	text-shadow: none;
}
.msl-shadow-soft .msl-title {
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.msl-shadow-soft .msl-excerpt {
	text-shadow: 0 1px 18px rgba(0, 0, 0, 0.3);
}
.msl-shadow-strong .msl-title {
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 6px 40px rgba(0, 0, 0, 0.55);
}
.msl-shadow-strong .msl-excerpt {
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5), 0 4px 24px rgba(0, 0, 0, 0.45);
}

/* ---------- CTA ---------- */
.msl-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.4rem;
	padding: 0.95em 1.7em;
	border-radius: 999px;
	font-size: clamp(0.95rem, 1.3vw, 1.05rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	color: var(--msl-cta-color);
	background: var(--msl-cta-bg);
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.45);
	transition: transform 0.35s var(--msl-ease), box-shadow 0.35s var(--msl-ease), background 0.35s var(--msl-ease);
	overflow: hidden;
	cursor: pointer;
}
.msl-cta:hover,
.msl-cta:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.55);
}
.msl-cta-arrow {
	transition: transform 0.35s var(--msl-ease);
}
.msl-cta:hover .msl-cta-arrow,
.msl-cta:focus-visible .msl-cta-arrow {
	transform: translateX(4px);
}

/* ---------- Entré-animation för aktiv slide ---------- */
.msl-slide.is-active .msl-title,
.msl-slide.is-active .msl-excerpt,
.msl-slide.is-active .msl-cta {
	animation: mslRise 0.8s var(--msl-ease) both;
}
.msl-slide.is-active .msl-excerpt { animation-delay: 0.12s; }
.msl-slide.is-active .msl-cta     { animation-delay: 0.24s; }

@keyframes mslRise {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Pilar ---------- */
.msl-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: grid;
	place-items: center;
	width: clamp(42px, 5vw, 56px);
	height: clamp(42px, 5vw, 56px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	background: rgba(18, 18, 22, 0.35);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s var(--msl-ease), border-color 0.3s ease;
}
.msl-arrow:hover,
.msl-arrow:focus-visible {
	background: rgba(255, 255, 255, 0.95);
	color: #111;
	border-color: transparent;
}
.msl-arrow--prev { left: clamp(0.75rem, 2vw, 1.75rem); }
.msl-arrow--next { right: clamp(0.75rem, 2vw, 1.75rem); }
.msl-arrow:hover { transform: translateY(-50%) scale(1.06); }

/* ---------- Punkter ---------- */
.msl-dots {
	position: absolute;
	bottom: clamp(1rem, 3vh, 2rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: 0.6rem;
	padding: 0.5rem 0.75rem;
	border-radius: 999px;
	background: rgba(18, 18, 22, 0.28);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.msl-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: background 0.3s ease, width 0.4s var(--msl-ease);
}
.msl-dot:hover { background: rgba(255, 255, 255, 0.75); }
.msl-dot.is-active {
	width: 28px;
	background: #fff;
}

/* ---------- Progressbar (autoplay) ---------- */
.msl-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 5;
	width: 100%;
	height: 3px;
	background: rgba(255, 255, 255, 0.15);
}
.msl-progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--msl-accent);
	transform-origin: left center;
}
.msl-progress-bar.is-running {
	animation: mslProgress linear forwards;
}
@keyframes mslProgress {
	from { width: 0; }
	to   { width: 100%; }
}

/* ---------- Fokus-stilar (a11y) ---------- */
.msl-slideshow :focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* ---------- Tom-läge i admin ---------- */
.msl-empty {
	padding: 2rem;
	border: 2px dashed #c9c9c9;
	border-radius: 12px;
	text-align: center;
	color: #555;
	background: #fafafa;
}

/* ---------- Responsivt ---------- */
@media (max-width: 980px) {
	.msl-slideshow { --msl-height: 70vh; }
}
@media (max-width: 768px) {
	.msl-slideshow {
		--msl-height: 64vh;
		min-height: 440px;
	}
	/* På mobil centreras innehållet nedtill för bäst läsbarhet */
	.msl-content {
		align-items: center !important;
		justify-content: flex-end !important;
		text-align: center !important;
		padding-bottom: clamp(3.5rem, 12vh, 5rem);
	}
	.msl-content-inner {
		align-items: center !important;
		max-width: 100%;
	}
	.msl-arrow { display: none; } /* swipe används istället */
	.msl-excerpt { -webkit-line-clamp: 3; }
}
@media (max-width: 480px) {
	.msl-slideshow { --msl-height: 78vh; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.msl-kenburns .msl-slide.is-active .msl-image { animation: none; }
	.msl-slide.is-active .msl-title,
	.msl-slide.is-active .msl-excerpt,
	.msl-slide.is-active .msl-cta { animation: none; }
	.msl-transition-fade .msl-slide,
	.msl-transition-slide .msl-slide { transition-duration: 0.25s; }
	.msl-progress-bar.is-running { animation: none; width: 100%; }
}