/* Sproochentest Pro — INLL sessions banner */
.stp-banner {
	--stp-bg: #0f2a4a;
	--stp-fg: #ffffff;
	--stp-muted: #b9c7d8;
	--stp-open: #2fbf71;
	--stp-closed: #8a97a8;
	--stp-full: #e0596b;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 12px;
	background: var(--stp-bg);
	color: var(--stp-fg);
	font-size: 14px;
	line-height: 1.4;
	position: relative;
	flex-wrap: wrap;
}

.stp-banner__label {
	font-weight: 700;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 12px;
}

.stp-banner__viewport {
	flex: 1 1 300px;
	overflow: hidden;
	min-width: 0;
	mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.stp-banner__viewport:focus-visible {
	outline: 2px solid var(--stp-open);
	outline-offset: 2px;
}

.stp-banner__track {
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: max-content;
}

.stp-banner.is-animated .stp-banner__track {
	animation: stp-scroll var(--stp-duration, 60s) linear infinite;
}

.stp-banner.is-paused .stp-banner__track,
.stp-banner.is-animated .stp-banner__viewport:hover .stp-banner__track,
.stp-banner.is-animated .stp-banner__viewport:focus-within .stp-banner__track {
	animation-play-state: paused;
}

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

.stp-banner__item {
	white-space: nowrap;
	margin: 0;
}

.stp-banner__item a {
	color: inherit;
	text-decoration: none;
}

.stp-banner__item a:hover,
.stp-banner__item a:focus-visible {
	text-decoration: underline;
}

.stp-banner__status {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: var(--stp-closed);
	color: #fff;
}

.stp-banner__status--open { background: var(--stp-open); color: #06301b; }
.stp-banner__status--full { background: var(--stp-full); }

.stp-banner__item--closed,
.stp-banner__item--full {
	color: var(--stp-muted);
}

.stp-banner__toggle {
	background: transparent;
	color: var(--stp-fg);
	border: 1px solid var(--stp-muted);
	border-radius: 6px;
	padding: 2px 10px;
	font-size: 12px;
	cursor: pointer;
}

.stp-banner__source {
	flex-basis: 100%;
	font-size: 11px;
	color: var(--stp-muted);
}

/* Phones: label and pause button on one line, the scrolling row below, the source last. */
@media (max-width: 899px) {
	.stp-banner { gap: 4px 12px; padding: 6px 12px 4px; }
	.stp-banner__label { order: 1; }
	.stp-banner__toggle { order: 2; margin-left: auto; }
	.stp-banner__viewport { order: 3; flex-basis: 100%; }
	.stp-banner__source { order: 4; font-size: 10px; }
}

@media (min-width: 900px) {
	.stp-banner { flex-wrap: nowrap; }
	.stp-banner__source { flex-basis: auto; white-space: nowrap; }
}

/* No motion: a scrollable row the visitor moves by hand. */
@media (prefers-reduced-motion: reduce) {
	.stp-banner__viewport { overflow-x: auto; scroll-snap-type: x proximity; }
	.stp-banner__item { scroll-snap-align: start; }
	.stp-banner__track { animation: none !important; }
	.stp-banner__toggle { display: none; }
}

/* Sessions table shortcode */
.stp-sessions-table { width: 100%; border-collapse: collapse; }
.stp-sessions-table th,
.stp-sessions-table td { padding: 8px; border-bottom: 1px solid #dde3ea; text-align: left; }
.stp-sessions-table .stp-banner__status { margin-left: 0; }
.stp-sessions-source { font-size: 12px; opacity: 0.8; }