/* ============================================================
   Agru-Frank — Branże (pasek-ticker), strona O firmie.
   CSS-only marquee (zero JS): 2× lista w DOM, translateX(-50%) pętla bezszwowa,
   pauza na hover (animation-play-state), reduced-motion → natywny scroll poziomy.
   Wzorzec: Claude Design "Branże, które obsługujemy" wariant 6a.
   ============================================================ */

.industries-marquee__head {
	margin-bottom: var(--space-32);
}

.industries-marquee__bar {
	overflow: hidden;
	background: var(--blue);
	padding-block: var(--space-24);
}
@media (max-width: 767.98px) {
	.industries-marquee__bar--decor { padding-block: var(--space-16); }   /* mobile: ciaśniejszy pasek parametrów (user 2026-07-24) */
	.industries-marquee__item { margin-right: var(--space-16); }   /* 32->16 mobile (user 2026-07-24) */
	.industries-marquee__dot { margin-right: var(--space-16); }   /* 32->16 mobile (user 2026-07-24) */
}

.industries-marquee__track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: industries-marquee-scroll 42s linear infinite;
}

/* --decor: zestaw ×6 w PHP → połówka pętli 3× dłuższa; duration ×3 utrzymuje tę samą prędkość liniową */
.industries-marquee__bar--decor .industries-marquee__track {
	animation-duration: var(--marquee-decor-duration, 126s);   /* per-branża, industries-marquee-bar.php */
}
/* Pauza na hover tylko w wariancie z linkami (klikalność); --decor (parametry branży) leci non-stop */
.industries-marquee__bar:not(.industries-marquee__bar--decor):hover .industries-marquee__track {
	animation-play-state: paused;
}

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

.industries-marquee__item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	margin-right: var(--space-32);
	font-size: var(--text-h4);
	font-weight: 500;
	line-height: 1.2;
	color: var(--white);
	text-decoration: none;
}

a.industries-marquee__item:hover {
	text-decoration: underline;   /* tylko linki — wariant --decor (span) bez afordancji klikalności */
}

.industries-marquee__dot {
	margin-right: var(--space-32);
	font-size: var(--text-h4);
	line-height: 1;
	color: color-mix(in srgb, var(--white) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.industries-marquee__track {
		animation: none;
	}
	.industries-marquee__bar {
		overflow-x: auto;
	}
}