/* =============================================================
   MARQUEE (.mbw-marquee) — przesuwający się pas elementów (render: inc/mbw-marquee.php).
   Wzór: magicui.design marquee, w wersji CSS-only.

   Pętla: .mbw-marquee__track = 2 identyczne grupy obok siebie; przesuwamy ją o -50%.
   Odstęp między grupami = padding-right grupy (= --gap), więc szew jest niewidoczny.

   Pokrętła: --mbw-marquee-*.
   ============================================================= */

.mbw-marquee {
	--mbw-marquee-czas: 45s;      /* jeden obieg rzędu (więcej = wolniej); nadpisywany z PHP */
	--mbw-marquee-gap:  1.5rem;   /* odstęp między elementami */
	--mbw-marquee-fade: 8%;       /* szerokość wygaszenia krawędzi */

	display: flex;
	flex-direction: column;
	gap: var(--mbw-marquee-gap);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--mbw-marquee-fade), #000 calc(100% - var(--mbw-marquee-fade)), transparent);
	        mask-image: linear-gradient(to right, transparent, #000 var(--mbw-marquee-fade), #000 calc(100% - var(--mbw-marquee-fade)), transparent);
}

.mbw-marquee__row { display: flex; }
.mbw-marquee__track {
	display: flex;
	width: max-content;
	animation: mbw-marquee var(--mbw-marquee-czas) linear infinite;
}
.mbw-marquee__row--wstecz .mbw-marquee__track { animation-direction: reverse; }

/* Pauza, gdy ktoś najedzie albo przejdzie klawiaturą — da się spokojnie kliknąć. */
.mbw-marquee:hover .mbw-marquee__track,
.mbw-marquee:focus-within .mbw-marquee__track { animation-play-state: paused; }

.mbw-marquee__group {
	display: flex;
	gap: var(--mbw-marquee-gap);
	padding: 0 var(--mbw-marquee-gap) 0 0 !important;
	margin: 0 !important;
	list-style: none;
}
.mbw-marquee__item { margin: 0; flex: 0 0 auto; }

@keyframes mbw-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Bez ruchu: zwykły pas przewijany w poziomie, bez kopii. */
@media (prefers-reduced-motion: reduce) {
	.mbw-marquee { -webkit-mask-image: none; mask-image: none; }
	.mbw-marquee__row { overflow-x: auto; }
	.mbw-marquee__track { animation: none; }
	.mbw-marquee__group[aria-hidden="true"] { display: none; }
}