:root {
	--scrl-nv-mrg-tp: 2.2rem;
    --g-pd-v: 3.5rem;
    --g-pd-h: 2rem;
}

/* Overflow Scrolling Lists */
.s-active {
	
	.off-scr {
		
		[data-role='item'] {
			scroll-snap-align: center;
		}
		
	}
	
	/* The viewport bleed is DESKTOP-ONLY. Below 1280 the track stays inside its
	   .mn_wd container. The old base rule bled it by a flat `--g-pd-h` (2rem),
	   which never reached the viewport edge anyway (that needs the full ~15%
	   gutter) — it just made the track 2rem wider than the box on each side. And
	   because .grd sizes items as a PERCENTAGE OF THE TRACK, every item then came
	   out oversized, so the last one overflowed .mn_wd and got clipped by the
	   scroller, cutting off its border-radius.
	   The spacer pseudos are declared in here rather than in a base rule on
	   purpose: as flex children a zero-width spacer still costs a `gap`, which
	   would inset the first card (see staff-v1.css, which opts out with
	   `display: none` for exactly this reason). */
	@media screen and (width >= 1280px) {
		
		/* Bleed from the container's ACTUAL width. `.mn_wd` is
		   `clamp(--mn_min, --mn-w, --mn_max)` (global.css, same breakpoint), not bare
		   --mn-w: below ~1600px --mn_max caps the clamp, so using --mn-w alone
		   under-bleeds by (80rem - 100svw * 0.849) / 2 and leaves a visible gap. */
		--off-scr-mn-w: clamp(var(--mn_min), var(--mn-w), var(--mn_max));
		
		.off-scr {
			margin-inline: calc( (100svw - var(--off-scr-mn-w)) * -0.5 );
			
			&:before, &:after {
			    content: '';
			    display: block;
			    flex-shrink: 0;
				scroll-snap-align: center;
			    width: calc( (100svw - var(--off-scr-mn-w)) * 0.5 );
			}
			
			&[class*='gp_sp'] {
				
				&:before, &:after {
					width: calc( (100svw - var(--off-scr-mn-w)) * 0.5 - var(--grd-sp-dyn) );
				}
				
			}
			
		}
		
	}
		
}

/* Scroll Nav */
[data-role="arrows"]:has( [data-role="thumbList"] ) {
	--sl-sa-s: 0.8rem;
	--scrl-nv-rds: 0.5rem;
	--scrl-nv-pd-v: 0.67rem;
	--scrl-nv-pd-h: 0.89rem;
	--scrl-nv-gp: 1.2rem;
	
	color: var(--text-color);
	font-size: var(--sl-sa-s);
	margin-block-start: var(--scrl-nv-mrg-tp);
	
	&:has( [data-role="thumbList"] ) {
		--scrl-nv-rds: 5rem;
		--scrl-nv-pd-v: 0.67rem;
		--scrl-nv-pd-h: 0.89rem;
	}

	> div {
		gap: var(--scrl-nv-gp);
		padding: var(--scrl-nv-pd-v) var(--scrl-nv-pd-h);
		border-radius: var(--scrl-nv-rds);
		
	}
	
}

:is(.wht-bg, .lt-bg) [data-role="arrows"] > div {
	background-color: var(--background);
}

.dk-bg [data-role="arrows"] > div {
	background-color: hsl(from var(--black) h s l / 0.5);
}

/* Play / Pause Button - scoped to the scroll-nav row so the bare attribute hook
   does not capture unrelated PlayPause controls (e.g. ForegroundVideoAutoPlay). */
[data-role="arrows"] [data-action='PlayPause'] {
	color: var(--white);
	background-color: var(--buttons);
	border-radius: 50%;
	width: 1.11rem;
	height: 1.11rem;
	position: relative;
	display: none;
	visibility: hidden;
	transition: background-color var(--g-trn-sp) var(--g-trn-tf);
	
	svg {
		font-size: 0.5rem;
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		display: none;
		
		&.pse-icn {
			display: block;
		}
		
	}
	
	&:is( :hover, :focus-visible ) {
		color: var(--btn-hvr-pry-txt);
		background-color: var(--btn-hvr-pry);
	}
	
}

.s-paused [data-role="arrows"] [data-action='PlayPause'] {
	
	.ply-icn {
		display: block;
	}
	
	.pse-icn, .rst-icn {
		display: none;
	}
	
}

.s-restart [data-role="arrows"] [data-action='PlayPause'] {
	
	.rst-icn {
		display: block;
	}
	
	.ply-icn, .pse-icn {
		display: none;
	}
	
}

[data-auto-advance="true"] [data-role="arrows"] [data-action='PlayPause'] {
	display: flex;
	visibility: visible;
}

/* Thumbs Nav */
[data-role="thumbList"] {
	--ato-adv-thb-dur: 19.5s;
	
	button {
		--thmb-o: 0.25;
		
		display: block;
		color: inherit;
		width: 0.5rem;
		height: 0.5rem;
		position: relative;
		overflow: hidden;
		background-color: hsl(from var(--text-color) h s l / var(--thmb-o));
		border-radius: 0.5rem;
		transition: background-color var(--g-trn-sp) var(--g-trn-tf);
		
		&.s-active {
			pointer-events: none;
		}
		
	}
	
}

:is(.wht-bg, .lt-bg) [data-role="thumbList"] button {
			
	&:is( .s-active, :hover, :focus-visible ) {
		--thmb-o: 1;
	}
		
	&.s-active {
		background-color: var(--buttons);
	}
	
}

:is(.blk-bg, .dk-bg) [data-role="thumbList"] button {
		
	&:is( :hover, :focus-visible ) {
		--thmb-o: 0.6;
	}
		
	&.s-active {
		--thmb-o: 1;
	}
	
}

/* Auto Advance Thumbs Nav */
[data-auto-advance="true"] {

	[data-role="thumbList"] {
		
		button {
			transition: width 0.2s ease, background-color var(--g-trn-sp) var(--g-trn-tf);
			
			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 0;
				height: 100%;
				border-radius: inherit;
				background-color: var(--buttons);
			}
		
			&.s-active {
				--thmb-o: 0.25;
		
				width: 3.2rem;
				background-color: hsl(from var(--text-color) h s l / var(--thmb-o));
				
				&:after {
					animation: timerThumb var(--ato-adv-thb-dur) linear forwards;
				}
				
			}
			
		}
		
	}
	
	&.s-paused, .s-paused {
		
		[data-role="thumbList"] button.s-active:after {
			animation-play-state: paused;
		}
		
	}

}

/* Auto Advance Thumbs Nav Keyframe */
@keyframes timerThumb {
	to {
		width: 100%;
	}
}