/* Songinfo-blok ("Nu op Jouwradio"): nu-song met voortgang en duimpjes, komende songs, wisselende links. */
/* ---- Songinfo (redesign) ---- */
.nuopjr_midden #si-nu a, .nuopjr_midden #si-next a { text-decoration: none; }

/* Hero: de song die nu speelt */
.si-hero {
	position: relative;
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	column-gap: 16px;
	align-items: center;
	padding: 16px 16px 14px;
	overflow: hidden;
	color: #fff;
	background: #172b40;
	overflow: clip;
	isolation: isolate;
}
.si-hero-bg {
	position: absolute;
	inset: -30px;
	z-index: -2;
	background: var(--si-cover) center / cover no-repeat;
	filter: blur(26px) saturate(1.2);
	opacity: .5;
	transition: opacity .6s ease;
}
.si-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, rgba(23,43,64,.92) 0%, rgba(23,43,64,.72) 55%, rgba(23,43,64,.5) 100%);
}
.si-cover {
	display: block;
	width: 104px;
	height: 104px;
	border-radius: 10px;
	overflow: hidden;
	background: rgba(255,255,255,.1);
	box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.si-cover img, .si-cover picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.si-tekst { display: block; min-width: 0; }
.si-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
}
.si-hero .si-label { color: #ffb18f; margin-bottom: 9px; }
.si-hero .si-label::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 7px;
	border-radius: 50%;
	background: #ff5a23;
	box-shadow: 0 0 0 3px rgba(255,90,35,.25);
	animation: si-puls 2s ease-in-out infinite;
}
@keyframes si-puls { 50% { box-shadow: 0 0 0 6px rgba(255,90,35,0); } }
.si-artiest {
	display: block;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.15;
	overflow-wrap: anywhere;
}
.si-titel {
	display: block;
	margin-top: 4px;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.25;
	color: #d6e6f2;
	overflow-wrap: anywhere;
}
.si-hero, .si-hero:hover { color: #fff; }
.si-hero:hover .si-artiest, .si-hero:focus-within .si-artiest { color: #b9e6ff; }
.si-hero:hover .si-hero-bg { opacity: .65; }
/* Heel de kaart is klikbaar via deze link; de duimpjes liggen er (z-index) bovenop. */
.si-stretch { position: absolute; inset: 0; z-index: 1; }
.si-stretch:focus-visible { outline: 3px solid #8bd1f5; outline-offset: -3px; }

/* Duimpjes */
.si-stem {
	grid-column: 1 / -1;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid rgba(255,255,255,.14);
}
.si-stem-tekst { font-size: 13px; color: #b9d8ec; }
.si-knoppen { display: flex; gap: 8px; flex: none; }
.si-duim {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: rgba(255,255,255,.14);
	cursor: pointer;
	transition: background-color .2s ease, transform .15s ease;
}
.si-duim svg { width: 20px; height: 20px; fill: currentColor; }
.si-duim-neer svg { transform: scale(-1, -1); }
.si-duim:hover { background: rgba(255,255,255,.26); }
.si-duim:active { transform: scale(.92); }
.si-duim:focus-visible { outline: 3px solid #8bd1f5; outline-offset: 2px; }
.si-duim[aria-pressed="true"].si-duim-op { background: #79bd27; }
.si-duim[aria-pressed="true"].si-duim-neer { background: #e85063; }

/* Voortgang */
.si-progress {
	grid-column: 1 / -1;
	margin-top: 14px;
	opacity: 0;
	transition: opacity .4s;
}
.si-progress.zichtbaar { opacity: 1; }
.si-spoor {
	display: block;
	height: 5px;
	border-radius: 3px;
	overflow: hidden;
	background: rgba(255,255,255,.2);
}
.si-vul {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 3px;
	background: #ff5a23;
	transition: width 1s linear;
}
.si-tijd {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: #b9d8ec;
}

/* Wat er nog aankomt */
#si-next { background: #f3f8fb; }
.si-rij {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	column-gap: 12px;
	align-items: center;
	padding: 10px 16px;
	color: #172b40;
	border-top: 1px solid #e0eaf1;
	transition: background-color .2s ease;
}
.si-rij:first-child { border-top: 0; }
.si-rij:hover, .si-rij:focus-visible { background: #e6f1f8; }
.si-rij:focus-visible { outline: 3px solid #8bd1f5; outline-offset: -3px; }
.si-rij .si-cover { width: 48px; height: 48px; border-radius: 7px; box-shadow: 0 2px 6px rgba(23,43,64,.18); }
.si-rij .si-artiest, .si-rij .si-titel {
	font-size: 16px;
	line-height: 1.25;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Te lange artiest/titel scrolt heen en weer (JavaScript zet .si-scroll en --si-afstand/--si-duur) */
.si-rij .si-scroll { text-overflow: clip; }
.si-marquee { display: inline-block; animation: si-scroll var(--si-duur, 8s) ease-in-out infinite; }
@keyframes si-scroll {
	0%, 18%   { transform: translateX(0); }
	50%, 68%  { transform: translateX(var(--si-afstand, 0px)); }
	100%      { transform: translateX(0); }
}
.si-rij:hover .si-marquee, .si-rij:focus-visible .si-marquee { animation-play-state: paused; }
.si-rij .si-artiest { font-weight: 600; color: #172b40; }
.si-rij .si-titel { color: #526574; }
.si-rij:hover .si-artiest { color: #0878b9; }
.si-pil {
	font-variant-numeric: tabular-nums;
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #0878b9;
	background: #dcecf6;
}

/* Links onderaan: één tegelijk, wisselend (zonder JavaScript staan ze gewoon onder elkaar) */
.nuopjr_midden .boxonder.si-rotator { display: flex; align-items: center; gap: 12px; padding-top: 4px; padding-bottom: 4px; }
.nuopjr_midden .boxonder.si-rotator .si-wissel { display: grid; flex: 1; min-width: 0; }
.nuopjr_midden .boxonder.si-rotator .si-wissel a {
	grid-area: 1 / 1;
	margin: 0;
	padding: 8px 0;
	border-bottom: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease, visibility 0s linear .45s;
}
.nuopjr_midden .boxonder.si-rotator .si-wissel a.actief {
	opacity: 1;
	visibility: visible;
	transition: opacity .45s ease;
}
.si-puntjes { display: flex; flex: none; }
.si-punt {
	position: relative;
	width: 22px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.si-punt::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: rgba(255,255,255,.35);
	transition: background-color .2s ease, transform .2s ease;
}
.si-punt:hover::before { background: rgba(255,255,255,.65); }
.si-punt[aria-current="true"]::before { background: #fff; transform: scale(1.25); }
.si-punt:focus-visible { outline: 3px solid #8bd1f5; outline-offset: -3px; border-radius: 6px; }

@media (max-width: 420px) {
	.si-hero { grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; padding: 14px 14px 12px; }
	.si-hero .si-cover { width: 84px; height: 84px; }
	.si-artiest { font-size: 19px; }
	.si-titel { font-size: 16px; }
	.si-rij { padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.si-hero-bg, .si-progress, .si-vul, .si-rij, .si-duim, .si-punt::before { transition: none; }
	.nuopjr_midden .boxonder.si-rotator .si-wissel a, .nuopjr_midden .boxonder.si-rotator .si-wissel a.actief { transition: none; }
	.si-marquee { animation: none; }
	.si-hero .si-label::before { animation: none; }
}