/**
 * Portfolio Slider – dekorativ baggrundsanimation.
 * Alt styres via CSS-variabler, der sættes inline fra PHP.
 */

/*
 * VIGTIGT om lagene (prioritet, højeste først):
 *
 *   1. *-el    – sættes af Elementors kontroller (inkl. alle breakpoints:
 *                mobil, tablet, laptop, widescreen ...). Vinder altid.
 *   2. *-rsp   – pluginnets egne responsive defaults (media queries nedenfor).
 *   3. *-base  – sættes inline af PHP ud fra widget/shortcode/globale
 *                indstillinger.
 *   4. Værdien i var()-fallbacken.
 *
 * Grunden til lagene: PHP's inline style ville ellers slå ALLE
 * stylesheet-regler – også Elementors breakpoints – så responsive
 * indstillinger aldrig gik igennem.
 */
.rsps {
	--rsps-angle: var(--rsps-angle-el, var(--rsps-angle-rsp, var(--rsps-angle-base, -16deg)));
	--rsps-scale: var(--rsps-scale-el, var(--rsps-scale-rsp, var(--rsps-scale-base, 1.3)));
	--rsps-gap: var(--rsps-gap-el, var(--rsps-gap-rsp, var(--rsps-gap-base, 24px)));
	--rsps-card: var(--rsps-card-el, var(--rsps-card-rsp, var(--rsps-card-base, 300px)));
	--rsps-radius: var(--rsps-radius-el, var(--rsps-radius-base, 14px));
	--rsps-opacity: var(--rsps-opacity-el, var(--rsps-opacity-base, 1));
	--rsps-speed: var(--rsps-speed-el, var(--rsps-speed-base, 45s));
	--rsps-align: center;
	--rsps-offset-x: var(--rsps-offset-x-el, var(--rsps-offset-x-base, 0%));


	/* Ekstra højde over/under containeren, så roterede søjler altid
	   løber ud over kanten i stedet for at stoppe brat. */
	--rsps-overfill: 25%;

	position: relative;



	width: 100%;
	overflow: hidden;
	opacity: var(--rsps-opacity);
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Baggrundstilstand: fylder hele forælderen og lægger sig bagerst. */
.rsps--bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

/* Halvsides-placering, fx bag højre side af en hero. */
.rsps--pos-right {
	left: auto;
	right: 0;
	width: 55%;
}

.rsps--pos-left {
	right: auto;
	left: 0;
	width: 55%;
}

/* Stage roterer og zoomer hele collagen. */
.rsps__stage {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Bredde: kompensér for zoom, så højre-/venstrejusteret indhold ikke
	   skubbes uden for containerens overflow:hidden.
	   Højde: ekstra overfyld, så rotationen ikke efterlader hul i top/bund
	   (ellers stopper billedsøjlerne brat lige inde i billedet). */
	width: calc(100% / var(--rsps-scale));
	height: calc((100% + 2 * var(--rsps-overfill)) / var(--rsps-scale));
	transform: translate(calc(-50% + var(--rsps-offset-x)), -50%)

		rotate(var(--rsps-angle))
		scale(var(--rsps-scale));
	transform-origin: center center;
	will-change: transform;
}


.rsps__cols {
	display: flex;
	/* center | flex-start (venstre) | flex-end (højre) */
	justify-content: var(--rsps-align);
	align-items: flex-start;
	gap: var(--rsps-gap);
	width: 100%;
	height: 100%;
}

/* Justering af collagen inde i containeren.
   Variablen bruges til live-preview i Elementor-editoren. */
.rsps--align-left {
	--rsps-align: flex-start;
}

.rsps--align-center {
	--rsps-align: center;
}

.rsps--align-right {
	--rsps-align: flex-end;
}

/* Højere specificitet, så klassen ikke tabes til andre --rsps-align-regler
   (fx cachet Elementor-CSS på .elementor-element-xxx .rsps). */
.rsps.rsps--align-left > .rsps__stage > .rsps__cols {
	justify-content: flex-start;
}

.rsps.rsps--align-center > .rsps__stage > .rsps__cols {
	justify-content: center;
}

.rsps.rsps--align-right > .rsps__stage > .rsps__cols {
	justify-content: flex-end;
}



.rsps__col {
	--rsps-duration: var(--rsps-speed);
	flex: 0 0 var(--rsps-card);
	width: var(--rsps-card);
	height: 100%;
	overflow: hidden;
}

.rsps__track {
	display: flex;
	flex-direction: column;
	gap: var(--rsps-gap);
	will-change: transform;
	backface-visibility: hidden;
}

/* Sømløst loop: indholdet er dubleret, så -50% lander præcis på start. */
.rsps__col--up .rsps__track {
	animation: rsps-scroll-up var(--rsps-duration) linear infinite;
}

.rsps__col--down .rsps__track {
	animation: rsps-scroll-down var(--rsps-duration) linear infinite;
}

@keyframes rsps-scroll-up {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(0, -50%, 0);
	}
}

@keyframes rsps-scroll-down {
	from {
		transform: translate3d(0, -50%, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

.rsps__item {
	flex: 0 0 auto;
	border-radius: var(--rsps-radius);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
	box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45);
	line-height: 0;
}

.rsps__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: inherit;
}

/* Blød ud-fade i top og bund, så billederne "smelter" ind i baggrunden.
   Masken ligger på den YDRE wrapper (ikke på .rsps__cols inde i stagen),
   så den altid er vandret – uafhængigt af rotationen. */
.rsps--fade {
	--rsps-fade-start: 12%;
	--rsps-fade-end: 88%;

	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		#000 var(--rsps-fade-start),
		#000 var(--rsps-fade-end),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		#000 var(--rsps-fade-start),
		#000 var(--rsps-fade-end),
		transparent 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}


/* Hjælpeklasse: containere med .rsps-bg gøres klar til absolut placeret slider. */
.rsps-bg {
	position: relative;
	overflow: hidden;
}

/* Sørg for at almindeligt indhold i containeren ligger over slideren. */
.rsps-bg > *:not(.rsps) {
	position: relative;
	z-index: 1;
}

/* ---------- Responsivt ---------- */

/* Tablet.
   Sætter kun *-rsp-laget, så en evt. Elementor-værdi (*-el) altid vinder. */
@media (max-width: 1024px) {
	.rsps {
		--rsps-card-rsp: 240px;
	}



	.rsps--pos-right,
	.rsps--pos-left {
		width: 70%;
	}

	/* Antal kolonner på tablet.
	   nth-child kan ikke tage en CSS-variabel, så der er én regel pr. værdi.
	   Attributten sættes af PHP ud fra widgetens/shortcodens indstilling. */
	.rsps[data-rsps-cols-tablet="1"] .rsps__col:nth-child(n + 2),
	.rsps[data-rsps-cols-tablet="2"] .rsps__col:nth-child(n + 3),
	.rsps[data-rsps-cols-tablet="3"] .rsps__col:nth-child(n + 4),
	.rsps[data-rsps-cols-tablet="4"] .rsps__col:nth-child(n + 5),
	.rsps[data-rsps-cols-tablet="5"] .rsps__col:nth-child(n + 6),
	.rsps[data-rsps-cols-tablet="6"] .rsps__col:nth-child(n + 7) {
		display: none;
	}
}

/* Mobil */
@media (max-width: 767px) {
	.rsps {
		--rsps-card-rsp: 180px;
		--rsps-gap-rsp: 14px;
		/* Mindre zoom = mere roligt på lille skærm. */
		--rsps-scale-rsp: 1.15;
	}



	.rsps--bg {
		/* Dæmp baggrunden så tekst altid er læsbar på mobil. */
		opacity: calc(var(--rsps-opacity) * 0.55);
	}

	.rsps--pos-right,
	.rsps--pos-left {
		right: 0;
		left: 0;
		width: 100%;
	}

	/* Antal kolonner på mobil. */
	.rsps[data-rsps-cols-mobile="1"] .rsps__col:nth-child(n + 2),
	.rsps[data-rsps-cols-mobile="2"] .rsps__col:nth-child(n + 3),
	.rsps[data-rsps-cols-mobile="3"] .rsps__col:nth-child(n + 4),
	.rsps[data-rsps-cols-mobile="4"] .rsps__col:nth-child(n + 5),
	.rsps[data-rsps-cols-mobile="5"] .rsps__col:nth-child(n + 6),
	.rsps[data-rsps-cols-mobile="6"] .rsps__col:nth-child(n + 7) {
		display: none;
	}

	.rsps--hide-mobile {
		display: none;
	}
}


/* Respektér brugerens ønske om mindre bevægelse. */
@media (prefers-reduced-motion: reduce) {
	.rsps__track {
		animation: none !important;
		transform: translate3d(0, -12%, 0);
	}
}