/**
 * Lišta důležitých sdělení.
 *
 * Barvy se berou z globálních barev GeneratePressu, pokud je motiv
 * definuje; hodnoty za čárkou jsou záloha, aby plugin fungoval i jinde.
 */

.ds-lista {
	--ds-pozadi: var(--spot, #c0392b);
	--ds-text: #fff;

	background-color: var(--ds-pozadi);
	color: var(--ds-text);
	font-size: var(--ds-velikost, 0.875rem);
	line-height: 1.4;
}

.ds-lista__vnitrek {
	display: flex;
	align-items: stretch;
	max-width: var(--shs-sirka, 1240px);
	margin: 0 auto;
	padding: 0 20px;
	gap: 1rem;
}

.ds-lista__stitek {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
	padding: 0.6rem 0;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ds-lista__stitek svg {
	display: block;
}

/* Okno ořezává pás se zprávami; bez něj by přetékal ven ze stránky. */
.ds-lista__okno {
	flex: 1;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-width: 0;
}

.ds-lista__pas {
	display: flex;
	align-items: center;
}

.ds-lista__sada {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	padding-right: 2.5rem;
	white-space: nowrap;
}

.ds-zprava {
	color: var(--ds-text);
	text-decoration: none;
	padding: 0.6rem 0;
}

a.ds-zprava:hover,
a.ds-zprava:focus-visible {
	text-decoration: underline;
}


/* ---------------------------------------------------------------------------
 * Posuv
 *
 * Posouvá se vždy, když se obsah do lišty nevejde — ať už jde o víc zpráv,
 * nebo o jednu dlouhou. Rozhoduje o tom skript třídou `ds-lista--posuv`.
 *
 * Pás obsahuje obsah dvakrát, animace ho posune přesně o jednu sadu
 * (-50 %) a začne znovu — přechod je proto plynulý, bez viditelného skoku.
 * Trvání dopočítává skript podle skutečné šířky, aby dlouhé zprávy
 * neujížděly rychleji než krátké.
 * ------------------------------------------------------------------------- */

/* Druhá sada existuje jen kvůli plynulé smyčce. Mimo posuv by se zprávy
   jen zbytečně opakovaly, takže se skrývá. */
.ds-lista__sada[aria-hidden="true"] {
	display: none;
}

.ds-lista--posuv .ds-lista__sada[aria-hidden="true"] {
	display: flex;
}

.ds-lista--posuv .ds-lista__pas {
	animation: ds-posuv var(--ds-trvani, 30s) linear infinite;
	will-change: transform;
}

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

/* Zastavení, aby si šlo zprávu v klidu přečíst. */
.ds-lista--posuv:hover .ds-lista__pas,
.ds-lista--posuv:focus-within .ds-lista__pas {
	animation-play-state: paused;
}


/* ---------------------------------------------------------------------------
 * Bez pohybu
 *
 * Pohybující se text je pro část lidí nečitelný a může vyvolat nevolnost.
 * Při nastavení „omezit pohyb" se proto zprávy jen vypíšou pod sebe —
 * druhá (duplicitní) sada se skryje, aby se neopakovaly.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ds-lista--posuv .ds-lista__pas {
		animation: none;
		flex-direction: column;
		align-items: flex-start;
	}

	.ds-lista--posuv .ds-lista__sada[aria-hidden="true"] {
		display: none;
	}

	.ds-lista--posuv .ds-lista__sada {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
		padding: 0.4rem 0;
		white-space: normal;
	}

	.ds-lista--posuv .ds-lista__okno {
		overflow: visible;
	}

	.ds-lista--posuv .ds-zprava {
		padding: 0.1rem 0;
	}
}


@media (max-width: 700px) {
	.ds-lista__vnitrek {
		gap: 0.75rem;
	}

	.ds-lista__stitek span {
		display: none;
	}
}