/**
 * ELSL Logo Slider Light - Stylesheet
 *
 * Dieses CSS definiert nur die technische Basis für den Slider.
 * Kein visuelles Theme-Styling - der Nutzer kann alles per CSS überschreiben.
 *
 * Die Animation funktioniert über CSS Keyframes:
 * - Der Track wird gleichmäßig nach links bewegt
 * - Zwei identische Gruppen im Markup sorgen für eine nahtlose Schleife
 * - Durch die Verdopplung der Logos im HTML entsteht ein nahtloser Endlosschleife-Effekt
 */

/* ==========================================================================
   Grundstruktur
   ========================================================================== */

/**
 * Wrapper für den gesamten Slider
 * - Overflow hidden verhindert, dass die animierten Logos herausschauen
 * - Relative Position für die absolute Positionierung des Tracks
 */
.elsl-logo-slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* Keine feste Höhe - wird durch den Inhalt bestimmt */

	/* CSS Custom Property für die Animationsgeschwindigkeit in Millisekunden */
	--elsl-animation-duration: 20000ms;
	--elsl-logo-filter: none;
	--elsl-visible-count: 5;
	--elsl-logo-width: 120px;
	--elsl-item-width: 220px;
	--elsl-logo-gap: 15px;
}

/**
 * Placeholder wenn keine Logos vorhanden
 */
.elsl-slider-placeholder {
	padding: 20px;
	text-align: center;
	color: #666;
	font-size: 14px;
	background: #f5f5f5;
	border: 1px dashed #ddd;
}

/* ==========================================================================
   Track (die animierte Ebene)
   ========================================================================== */

/**
 * Der Track enthält alle Logo-Items und bewegt sich horizontal.
 *
 * Flexbox für horizontale Anordnung:
 * - nowrap verhindert Zeilenumbrüche
 * - width: max-content sorgt dafür, dass sich die Breite aus beiden Gruppen ergibt
 */
.elsl-slider-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	min-width: 100%;
	animation: elsl-slide var(--elsl-animation-duration) linear infinite;
	will-change: transform;
}

/**
 * Jede Gruppe enthält ein vollständiges Set von Logos.
 * Zwei identische Gruppen erlauben eine saubere Verschiebung um genau 50%.
 */
.elsl-slider-group {
	display: flex;
	flex-wrap: nowrap;
	flex-shrink: 0;
	align-items: center;
}

/**
 * CSS Keyframe Animation für den Endlosschleife-Effekt
 *
 * 0%   = Startposition (linker Rand)
 * 100% = genau eine Gruppengröße nach links
 *
 * Weil die zweite Gruppe identisch zur ersten ist, ist der Zustand bei -50%
 * visuell identisch zum Startzustand. Der Loop bleibt dadurch ohne sichtbaren Sprung.
 */
@keyframes elsl-slide {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* ==========================================================================
   Einzelne Logo-Items
   ========================================================================== */

/**
 * Container für ein einzelnes Logo
 * - Flexbox für Zentrierung (Bild kann kleiner sein als Container)
 * - Feste Breite für gleichmäßige Verteilung
 */
.elsl-slider-item {
	flex: 0 0 var(--elsl-item-width);
	width: var(--elsl-item-width);
	flex-shrink: 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--elsl-logo-gap);
	box-sizing: border-box;
}

/**
 * Ein optionaler Link soll die komplette verfügbare Breite des Slots nutzen,
 * damit das enthaltene Logo sauber mitskalieren kann.
 */
.elsl-slider-item > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

/**
 * Das Logo-Bild selbst
 * - Max-Breite: 100% des Containers (verhindert Überlauf)
 * - Max-Höhe: Limitiert für konsistentes Aussehen
 * - Object-fit für proportionale Skalierung
 */
.elsl-logo-image {
	width: 100%;
	max-width: var(--elsl-logo-width);
	height: auto;
	object-fit: contain;
	display: block;

	/* Filter wird dynamisch via Inline-Style gesetzt (Graustufen ein/aus) */
	filter: var(--elsl-logo-filter);
	transition: filter 0.3s ease;
}

/**
 * Editor-Platzhalter ohne externen Request
 */
.elsl-editor-placeholder {
	display: block;
	width: 100%;
	max-width: var(--elsl-logo-width);
	height: 80px;
	border-radius: 4px;
	background: linear-gradient(135deg, #efefef 0%, #d8d8d8 100%);
}

/**
 * Optionaler Hover-Effekt (Farbe wiederherstellen wenn Graustufen aktiviert)
 * Funktioniert nur wenn der Filter via Inline-Style auf grayscale(30%) gesetzt ist
 */
.elsl-slider-item:hover .elsl-logo-image {
	filter: none;
}

/* ==========================================================================
   Responsive / Mobile Optimierung
   ========================================================================== */

/**
 * Auf mobilen Geräten:
 * - Kleinere Logos
 * - Angepasste Abstände
 * - Bewusst die Animation beibehalten (nicht deaktivieren)
 */
@media ( max-width: 768px ) {
	.elsl-slider-item {
		padding: 0 var(--elsl-logo-gap);
	}
}

@media ( max-width: 480px ) {
	.elsl-slider-item {
		padding: 0 var(--elsl-logo-gap);
	}
}

/* ==========================================================================
   Barrierefreiheit
   ========================================================================== */

/**
 * Reduzierte Bewegung für Benutzer, die das bevorzugen
 */
@media ( prefers-reduced-motion: reduce ) {
	.elsl-slider-track {
		animation: none;
		/* Auf mobilen Geräten mit reduced-motion: Slider statisch anzeigen */
	}

	/* Für präferierte-reduced-motion: Keine Animation, einfache Scroll-Anzeige */
}

/* ==========================================================================
   Nützliche CSS-Klassen für Benutzer-Anpassungen
   ========================================================================== */

/*
 * Der Nutzer kann folgende Klassen überschreiben, um das Styling anzupassen:
 *
 * .elsl-logo-slider          - Gesamter Slider Wrapper
 * .elsl-slider-track         - Animierter Track
 * .elsl-slider-item          - Einzelnes Logo-Item
 * .elsl-logo-image           - Das Logo-Bild selbst
 *
 * Beispiel-CSS für Anpassungen:
 *
 * /* Logo-Größe ändern * /
 * .elsl-logo-image {
 *     max-width: 200px;
 *     max-height: 120px;
 * }
 *
 * /* Abstände zwischen Logos ändern * /
 * .elsl-slider-item {
 *     padding: 0 30px;
 * }
 *
 * /* Keine Graustufen * /
 * .elsl-logo-image {
 *     filter: none;
 * }
 *
 * /* Geschwindigkeit ändern (Dauer in Millisekunden) * /
 * .elsl-logo-slider {
 *     --elsl-animation-duration: 30000ms;
 * }
 *
 * /* Mehr oder weniger Logos gleichzeitig anzeigen * /
 * .elsl-logo-slider {
 *     --elsl-visible-count: 4;
 * }
 *
 * /* Abstand zwischen Logos ändern * /
 * .elsl-logo-slider {
 *     --elsl-logo-gap: 24px;
 * }
 */