/*
 * Juni Seminarier — Marquee shortcode CSS
 *
 * Editorial infinite scroll som matchar Juni Strategis ljusa, luftiga stil.
 * Prefix: .js-sem-marquee
 */

.js-sem-marquee {
	--js-marquee-speed:  70s;
	--js-marquee-accent: #01ffc8;
	--js-marquee-bg:     #faf9f6;
	--js-marquee-text:   #0c1210;
	--js-marquee-muted:  #5a6360;
	--js-marquee-border: rgba(12, 18, 16, 0.08);
	--js-marquee-height: 72px;

	position: relative;
	width: 100%;
	background: var(--js-marquee-bg);
	color: var(--js-marquee-text);
	font-family: "Degular", system-ui, sans-serif;
	overflow: hidden;
	display: flex;
	align-items: stretch;
	border-top: 1px solid var(--js-marquee-border);
	border-bottom: 1px solid var(--js-marquee-border);
}

/* Rubrik/etikett till vänster — turkos pill */
.js-sem-marquee__heading {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 28px;
	height: var(--js-marquee-height);
	background: var(--js-marquee-accent);
	color: var(--js-marquee-text);
	font-family: "Degular", system-ui, sans-serif;
	font-size: 0.72rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	white-space: nowrap;
	z-index: 2;
	position: relative;
}

/* Pil-indikator efter rubriken (playful accent) */
.js-sem-marquee__heading::after {
	content: "→";
	font-family: inherit;
	font-size: 1rem;
	line-height: 1;
	opacity: 0.6;
}

/* Viewport + track */
.js-sem-marquee__viewport {
	flex: 1;
	overflow: hidden;
	height: var(--js-marquee-height);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.js-sem-marquee__track {
	display: flex;
	align-items: center;
	height: 100%;
	width: max-content;
	animation: js-sem-marquee-scroll var(--js-marquee-speed) linear infinite;
	will-change: transform;
}

/* Pause on hover */
.js-sem-marquee--pause-on-hover:hover .js-sem-marquee__track,
.js-sem-marquee--pause-on-hover:focus-within .js-sem-marquee__track {
	animation-play-state: paused;
}

/* Items — editorial, luftiga */
.js-sem-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding: 0 48px;
	color: var(--js-marquee-text);
	text-decoration: none;
	height: 100%;
	white-space: nowrap;
	transition: background-color 0.25s ease;
	position: relative;
}

/* Tunn vertikal delare mellan items */
.js-sem-marquee__item + .js-sem-marquee__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 32px;
	background: var(--js-marquee-border);
}

.js-sem-marquee__item:hover,
.js-sem-marquee__item:focus-visible {
	background: rgba(1, 255, 200, 0.15);
	color: var(--js-marquee-text) !important;
	text-decoration: none;
}

/* Tvinga kvar textfärgerna vid hover (övertrumfa temats länk-hover) */
.js-sem-marquee__item:hover .js-sem-marquee__title,
.js-sem-marquee__item:focus-visible .js-sem-marquee__title {
	color: var(--js-marquee-text) !important;
}

.js-sem-marquee__item:hover .js-sem-marquee__format,
.js-sem-marquee__item:hover .js-sem-marquee__location,
.js-sem-marquee__item:focus-visible .js-sem-marquee__format,
.js-sem-marquee__item:focus-visible .js-sem-marquee__location {
	color: var(--js-marquee-muted) !important;
}

.js-sem-marquee__item:focus-visible {
	outline: 2px solid var(--js-marquee-accent);
	outline-offset: -4px;
}

/* Datum-pill */
.js-sem-marquee__date {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	background: var(--js-marquee-text);
	color: var(--js-marquee-bg);
	font-family: "Degular", system-ui, sans-serif;
	font-size: 0.72rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: 100px;
	white-space: nowrap;
}

.js-sem-marquee__item:hover .js-sem-marquee__date {
	background: var(--js-marquee-accent);
	color: var(--js-marquee-text);
}

/* Titel — editorial serif */
.js-sem-marquee__title {
	font-family: "Degular", system-ui, sans-serif;
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--js-marquee-text);
}

/* Format + plats — subtila meta-taggar */
.js-sem-marquee__format,
.js-sem-marquee__location {
	font-family: "Degular", system-ui, sans-serif;
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--js-marquee-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Separator — göms helt, vi använder whitespace + vertikal linje istället */
.js-sem-marquee__sep {
	display: none;
}

/* Tom-state — statiskt meddelande utan scroll */
.js-sem-marquee__empty {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 0 48px;
	height: var(--js-marquee-height);
	font-family: "Degular", system-ui, sans-serif;
	font-size: 1rem;
	color: var(--js-marquee-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 768px) {
	.js-sem-marquee__empty {
		padding: 0 20px;
		font-size: 0.9rem;
	}
}

/* Animation */
@keyframes js-sem-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Reducerad rörelse — visa statisk scrollbar istället */
@media (prefers-reduced-motion: reduce) {
	.js-sem-marquee__viewport {
		-webkit-mask-image: none;
		mask-image: none;
		overflow-x: auto;
	}

	.js-sem-marquee__track {
		animation: none;
		width: auto;
	}
}

/* Responsivt */
@media (max-width: 768px) {
	.js-sem-marquee {
		--js-marquee-height: 60px;
	}

	.js-sem-marquee__heading {
		padding: 0 18px;
		font-size: 0.65rem;
		letter-spacing: 0.08em;
	}

	.js-sem-marquee__item {
		padding: 0 32px;
		gap: 14px;
	}

	.js-sem-marquee__title {
		font-size: 1.1rem;
	}

	.js-sem-marquee__format,
	.js-sem-marquee__location {
		display: none;
	}
}

@media (max-width: 480px) {
	.js-sem-marquee__heading::after {
		display: none;
	}

	.js-sem-marquee__heading {
		padding: 0 14px;
	}
}