/*
   SLP Laufband
   ---------------------------------------------------------------
   Die Gestaltung übernimmt die Tokens des Themes „SLP Hütte“. Jeder
   Wert trägt einen Rückfallwert, damit das Band auch unter einem
   anderen Theme lesbar bleibt statt in Systemfarben zu zerfallen.

   Bildidee: ein Förderband im Werk. Die Projekte fahren auf Platten
   vorbei, zwischen ihnen die Fugen der Bandglieder, und an beiden
   Seiten verschwinden sie im Dunkeln des Werkstors.
   --------------------------------------------------------------- */

/* Ohne das rechnet der Kopf seinen Innenabstand auf die volle Breite
   drauf und schiebt die Seite auf schmalen Geräten quer heraus. */
.slp-band,
.slp-band *::before,
.slp-band *::after,
.slp-band * {
	box-sizing: border-box;
}

.slp-band {
	--band-eisen: var(--slp-eisen, #191f25);
	--band-eisen-hell: var(--slp-eisen-hell, #222b33);
	--band-stahl: var(--slp-stahl, #8794a0);
	--band-kalk: var(--slp-kalk, #edeae4);
	--band-glut: var(--slp-glut, #ff5a1f);
	--band-messing: var(--slp-messing, #e5a93c);
	--band-linie: var(--slp-linie, rgba(135, 148, 160, 0.22));
	--band-radius: var(--slp-radius, 3px);

	/* Wird vom Shortcode je nach Anzahl der Projekte gesetzt. */
	--band-dauer: 60s;

	/*
	 * Wie viele Felder gleichzeitig ins Fenster passen. Alle Felder sind
	 * gleich breit, egal wie lang der Name ist - sonst ruckelte das Band
	 * optisch, weil mal ein breites und mal ein schmales Stück vorbeikommt.
	 *
	 * Auf schmalen Geräten laufen weniger Felder, sonst bliebe von jedem
	 * nur ein Streifen übrig.
	 */
	--band-sichtbar: 3;

	--band-platte: clamp(3.25rem, 6vw, 4.5rem);
}

@media (max-width: 900px) {
	.slp-band {
		--band-sichtbar: 2;
	}
}

@media (max-width: 560px) {
	.slp-band {
		--band-sichtbar: 1;
	}
}

/* --- Kopf ------------------------------------------------------ */

/*
 * Die eigene Satzbahn. Sie ahmt die Bahn des Themes nach, damit Kopf und
 * Band bündig unter den übrigen Abschnitten der Seite stehen - und zwar
 * auch dann, wenn das Plugin unter einem anderen Theme läuft.
 */
.slp-band__bahn {
	width: 100%;
	max-width: var(--slp-bahn, 1320px);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.slp-band__kopf {
	padding-bottom: 0.9rem;
	margin-bottom: 1.75rem;
}

.slp-band__label {
	margin: 0 0 0.5rem;
}

/* Falls das Theme .slp-daten nicht mitbringt, steht die Auszeichnung
   trotzdem: Kleinschrift, gesperrt, Monospace. */
.slp-band .slp-daten {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--band-stahl);
}

.slp-band__titel {
	font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	letter-spacing: -0.02em;
	line-height: 1;
	text-transform: uppercase;
	margin: 0;
	color: var(--band-kalk);
}

/* --- Das Band -------------------------------------------------- */

/*
 * Das Fenster ist der Kasten, in dem das Band läuft: so breit wie der
 * Abschnitt, nicht wie die Seite. Es ist zugleich das Maß für die
 * Feldbreite - 100vw wäre falsch, weil darin die Bildlaufleiste steckt.
 */
.slp-band__fenster {
	position: relative;
	overflow: hidden;
	container-type: inline-size;
	border: 1px solid var(--band-linie);
	border-radius: var(--band-radius);
	background: var(--band-eisen);
}

/*
 * Am Werkstor: die Stücke tauchen aus dem Dunkel auf und wieder ab.
 *
 * Bei drei Projekten auf drei Feldern liegt jede Wiederholung genau eine
 * Fensterbreite hinter dem Original - eine Naht ist deshalb immer im
 * Bild. Was links hinausfährt und rechts wieder hereinkommt, ist zusammen
 * aber nie mehr als ein Feld breit: ist das eine Stück groß, ist das
 * andere fast weg. Die Abblendung ist so gewählt, dass immer das kleinere
 * der beiden im Dunkeln liegt.
 */
.slp-band__lauf {
	mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 17%,
		#000 83%,
		transparent 100%
	);
}

.slp-band__spur {
	display: flex;
	align-items: center;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: slp-band-fahrt var(--band-dauer) linear infinite;
}

/*
 * Die Spur enthält jede Runde doppelt. Um genau die Hälfte nach links
 * gewandert steht wieder der Anfang an derselben Stelle - deshalb ist
 * der Sprung zurück auf 0 nicht zu sehen.
 */
@keyframes slp-band-fahrt {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* Wer mit der Maus darauf zeigt oder mit der Tastatur hineinspringt,
   will etwas anklicken - dann hält das Band an. */
.slp-band__fenster:hover .slp-band__spur,
.slp-band__spur:focus-within {
	animation-play-state: paused;
}

.slp-band__stueck {
	flex: 0 0 calc(100cqw / var(--band-sichtbar));

	/* Die Fuge zwischen zwei Bandgliedern. */
	border-right: 1px solid var(--band-linie);
}

.slp-band__weg {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, 1.5vw, 1.1rem);
	padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
	text-decoration: none;
	color: inherit;
}

/* Ein langer Name darf das Feld nicht sprengen - alle sind gleich breit. */
.slp-band__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- Die Platte, auf der ein Logo mitfährt --------------------- */

/*
 * Die Logos kommen aus drei verschiedenen Projekten: zwei bringen ihren
 * eigenen dunklen Grund mit, eines ist freigestellt. Die Platte gibt
 * allen dasselbe Maß und denselben Rahmen, sonst führe ein Flickenteppich
 * vorbei.
 */
.slp-band__platte {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--band-platte);
	height: var(--band-platte);
	overflow: hidden;
	background: var(--band-eisen-hell);
	border: 1px solid var(--band-linie);
	border-radius: var(--band-radius);
	transition: border-color 200ms ease;
}

/*
 * contain statt cover: die Vorlagen sind quadratisch wie die Platte, die
 * beiden Logos mit eigenem Grund füllen sie deshalb randlos aus - und der
 * freigestellte Pfeil von ZonePilot wird nicht an den Seiten beschnitten.
 */
.slp-band__platte img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	filter: saturate(0.9);
	transition: filter 260ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.slp-band__ersatz {
	font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--band-stahl);
}

.slp-band__name {
	font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--band-kalk);
	transition: color 200ms ease;
}

a.slp-band__weg:hover .slp-band__platte,
a.slp-band__weg:focus-visible .slp-band__platte {
	border-color: var(--band-messing);
}

a.slp-band__weg:hover .slp-band__platte img,
a.slp-band__weg:focus-visible .slp-band__platte img {
	filter: saturate(1.1);
	transform: scale(1.06);
}

a.slp-band__weg:hover .slp-band__name,
a.slp-band__weg:focus-visible .slp-band__name {
	color: var(--band-messing);
}

/* Sichtbarer Tastaturfokus, auch ohne die Regel des Themes. */
.slp-band__weg:focus-visible {
	outline: 2px solid var(--band-messing);
	outline-offset: -4px;
}

.slp-band-leer {
	color: var(--band-stahl);
	border: 1px dashed var(--band-linie);
	border-radius: var(--band-radius);
	padding: 2rem;
	text-align: center;
}

/* ---------------------------------------------------------------
   Rücksicht auf Bewegungsempfindlichkeit

   Ein endlos laufendes Band ist genau die Bewegung, die hier stört.
   Es steht dann still, die Wiederholungen entfallen, und die Projekte
   stehen als ruhige Reihe da - ohne Inhalt zu verlieren.
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.slp-band__lauf {
		mask-image: none;
	}

	.slp-band__spur {
		animation: none;
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
	}

	.slp-band__stueck[aria-hidden="true"] {
		display: none;
	}

	.slp-band__stueck:last-of-type {
		border-right: 0;
	}
}