/* Story Slider */
.video-slider { position:relative; max-height:80vh; margin-inline: auto; aspect-ratio:864 / 1080;
	.slides { display:flex; align-items:center; scroll-behavior:smooth; overflow-x:scroll; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; aspect-ratio: 864 / 1080; }
	.slide { width:100%; flex:1 0 auto; scroll-snap-align:start; line-height:0; }
	video { width:100%; height:auto; }
	.btn-group { display:flex; flex-flow: row nowrap; gap:0.5rem; background: rgba(0, 0, 0, 0.4); border-radius: 2rem;
		.btn { z-index:1; border-radius:50%; width: 3rem; height: 3rem; border: none; transition:opacity 0.4s; background-color: transparent; background-position:50% 50%; background-repeat:no-repeat; padding: 0.5rem; }
		.btn:hover { cursor:pointer; background-color: var(--brand-blue-dark); } 
	}
	
  .slide-next, .slide-prev { position:absolute; top:50%; transform:translateY(-50%); width: 3.5rem; height: 3.5rem; background-color: rgba(0, 0, 0, 0.4); background-repeat: no-repeat; background-position: center; border: 1px solid transparent; padding: 0.5rem; }
  .slide-next:hover, .slide-prev:hover { cursor:pointer; border-color: var(--brand-gold); }
	.slide-next { left: calc(100% - 3.5rem - 10px); background-image:url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><path d="M25.557 14.7L13.818 2.961 16.8 0l16.8 16.8-16.8 16.8-2.961-2.961L25.557 18.9H0v-4.2z" fill="white" fill-rule="evenodd"/></svg>'); }
	.slide-prev { left:10px; background-image:url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><path d="M33.6 14.7H8.043L19.782 2.961 16.8 0 0 16.8l16.8 16.8 2.961-2.961L8.043 18.9H33.6z" fill="white" fill-rule="evenodd"/></svg>'); }

  .video-controls { position:absolute; top: calc(100% - 3.5rem - 3rem); right: 2rem; border: none; }
	.btn-audio { background-image:url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M11.536 14.01A8.47 8.47 0 0 0 14.026 8a8.47 8.47 0 0 0-2.49-6.01l-.708.707A7.48 7.48 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z"/><path fill="white" d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.48 5.48 0 0 1 11.025 8a5.48 5.48 0 0 1-1.61 3.89z"/><path fill="white" d="M8.707 11.182A4.5 4.5 0 0 0 10.025 8a4.5 4.5 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8 3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06"/></svg>'); background-repeat: no-repeat; background-size: 1.5rem auto; }
	.btn-audio.muted { background-image:url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M10.717 3.55A.5.5 0 0 1 11 4v8a.5.5 0 0 1-.812.39L7.825 10.5H5.5A.5.5 0 0 1 5 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06" fill="white" fill-rule="evenodd"/></svg>'); }
	.play-pause { background-image:url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z" fill="white" fill-rule="evenodd"/></svg>'); background-repeat: no-repeat; background-size: 1.5rem auto; }
		.play-pause.paused { background-image:url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" fill="white" fill-rule="evenodd"/></svg>'); }

	.slider-nav { position:relative; z-index:1;
		ol { display:flex; gap:15px; margin:1rem 0; padding:0; justify-content:center; }
		button { width:10px; height:10px; padding:0; margin:0; border: none; border-radius:50%; background:light-dark(#dedede, var(--brand-blue-light)); }
		button.active { background:var(--brand-gold); }
		button:hover { cursor:pointer; }
	}

	@media screen and (max-width: 480px) {
		.slide-prev,
		.slide-next { display: none; }
	}

	@media (scripting: none) {
		.slide-prev,
		.slide-next,
		.play-pause,
		.slider-nav { display:none; }
	}
}