/**
 * Proč míň – jezdící texty
 */

.pm-texty {
	--pm-text-size: 18px;
	--pm-gap: 12px;
	--pm-box-bg: #f4f4f2;
	--pm-text-color: #111111;
	--pm-accent: #ffd200;
	--pm-accent-size: 4px;
	--pm-section-bg: transparent;
	--pm-padding-y: 0px;

	position: relative;
	display: block;
	overflow: hidden;
	background: var(--pm-section-bg);
	padding-top: var(--pm-padding-y);
	padding-bottom: var(--pm-padding-y);
}

/* Od kraje ke kraji i uvnitř úzkého kontejneru šablony. */
.pm-texty--bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.pm-texty__rows {
	display: flex;
	flex-direction: column;
	gap: var(--pm-gap);
	overflow: hidden;
}

.pm-texty__row {
	display: flex;
	width: max-content;
	gap: var(--pm-gap);
	will-change: transform;
	animation-duration: 60s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
}

.pm-texty__row--left {
	animation-name: pm-texty-left;
}

.pm-texty__row--right {
	animation-name: pm-texty-right;
}

.pm-texty__group {
	display: flex;
	flex: 0 0 auto;
	gap: var(--pm-gap);
}

.pm-texty__item {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.9em 1em;
	background: var(--pm-box-bg);
	color: var(--pm-text-color);
	border-bottom: var(--pm-accent-size) solid var(--pm-accent);
	font-size: min(var(--pm-text-size), calc(var(--pm-text-size) * 0.75 + 0.6vw));
	line-height: 1.4;
	white-space: nowrap;
	text-wrap: nowrap;
}

/*
 * Posun o jednu kopii obsahu. JavaScript nastaví --pm-shift v pixelech;
 * bez JS se použije záloha „polovina řádku“, která odpovídá dvěma kopiím.
 */
@keyframes pm-texty-left {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-1 * var(--pm-shift, calc(50% + var(--pm-gap) / 2))));
	}
}

@keyframes pm-texty-right {
	from {
		transform: translateX(calc(-1 * var(--pm-shift, calc(50% + var(--pm-gap) / 2))));
	}

	to {
		transform: translateX(0);
	}
}

.pm-texty--pause:hover .pm-texty__row,
.pm-texty--pause:focus-within .pm-texty__row {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.pm-texty__row {
		animation: none;
		transform: none;
	}

	.pm-texty__rows {
		overflow-x: auto;
	}

	.pm-texty__group[aria-hidden="true"] {
		display: none;
	}
}