/*
	video player
*/

main#video
{
	padding-top: 100px;
}

#template-video-close
{
	position: absolute;
	top: var(--content-gap);
	inset-inline-end: var(--content-gap);
	z-index: 99;
}

.module-video
{
	background-size: cover;
	color: var(--color-white);
	padding: 0;
	overflow: hidden;
	padding: var(--content-padding);
}

#videoplayer
{
	position: relative;
	width: min(100%, calc((100vh - var(--content-padding) * 2) * 9 / 16));
	width: min(100%, calc((100svh - var(--content-padding) * 2) * 9 / 16));
	height: auto;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: 20px;
	z-index: 2;
	margin: 0 auto;

	display: flex;
	justify-content: center;
	align-items: center;
}
	#videoplayer .ai-generated
	{
		top: var(--content-gap);
		inset-inline-end: var(--content-gap);
	}
	#videoplayer video
	{
		position: absolute;
		z-index: 0;
	}
		#videoplayer video[poster]
		{
			object-fit: cover;
		}
		#videoplayer--icons
		{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 2;
		}
			.btn-play,
			#videoplayer--icons .icon
			{
				width: 90px;
				height: 90px;
				border-radius: 50%;
				background-color: var(--color-accent-darkest);
				color: var(--color-white);
				cursor: pointer;
			}
				.btn-play:hover,
				#videoplayer--icons .icon:hover
				{
					background: var(--color-primary-darkest);
					color: var(--color-white);
				}
				.btn-play .material-icons,
				#videoplayer--icons .material-icons
				{
					font-size: 40px;
				}
				#videoplayer--icons .icon
				{
					display: none;
				}

		#videoplayer--touch
		{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			z-index: 1;
		}
			#videoplayer--touch__left
			{
				width: 25%;
			}
			#videoplayer--touch__center
			{
				width: 50%;
			}
			#videoplayer--touch__right
			{
				width: 25%;
			}

		#videoplayer--controls
		{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 2;
		}
			#progressbar
			{
				position: absolute;
				bottom: 0;
				left: 20px;
				width: calc(100% - 40px);
				height: 6px;
				/* overflow isn't hidden here (unlike the old version) because the
				   range input's focus outline needs room to render outside the
				   6px-tall visual track */
			}
			#progressbar--bg
			{
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				border-top-left-radius: 6px;
				border-top-right-radius: 6px;
				background-color: rgba(0, 0, 0, .25);
				z-index: 0;
				overflow: hidden;
			}
			#progressbar--block
			{
				position: absolute;
				width: 50%;
				height: 100%;
				top: 0;
				inset-inline-start: 0;
				background-color: var(--color-primary-darkest);
				border-start-start-radius: 6px;
				z-index: 1;
				pointer-events: none;
			}
			/*
				the visible fill above stays purely decorative; this transparent
				native range is what actually receives clicks/drags/keyboard input
				(arrow keys, Home/End, Page Up/Down) so the seek bar is operable
				without a mouse - WCAG 2.1.1
			*/
			#progressbar-range
			{
				position: absolute;
				top: 50%;
				left: 0;
				width: 100%;
				height: 24px;
				margin: 0;
				transform: translateY(-50%);
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				background: transparent;
				cursor: pointer;
				z-index: 2;
			}
				#progressbar-range::-webkit-slider-runnable-track
				{
					background: transparent;
					height: 24px;
				}
				#progressbar-range::-moz-range-track
				{
					background: transparent;
					height: 24px;
				}
				#progressbar-range::-webkit-slider-thumb
				{
					-webkit-appearance: none;
					width: 14px;
					height: 14px;
					/* with appearance:none on the thumb, WebKit no longer centers
					   it on the track automatically - (track height - thumb
					   height) / 2 = (24 - 14) / 2 does that manually */
					margin-top: 5px;
					border-radius: 50%;
					background: var(--color-white);
					cursor: pointer;
				}
				#progressbar-range::-moz-range-thumb
				{
					width: 14px;
					height: 14px;
					border: 0;
					border-radius: 50%;
					background: var(--color-white);
					cursor: pointer;
				}
				#progressbar-range:focus-visible
				{
					outline: 2px solid var(--color-white);
					outline-offset: 2px;
					border-radius: 6px;
				}

			.controls-toggle-btn
			{
				position: absolute;
				bottom: 20px;
				inset-inline-start: 20px;
				background: rgb(9, 79, 163, .65);
				display: none;
			}
				.controls-toggle-btn:hover
				{
					background: rgb(9, 79, 163, 1);
				}
		
			#progresstime
			{
				position: absolute;
				bottom: 20px;
				inset-inline-start: 75px;
				height: 45px;
				padding: 0 15px;
				border-radius: 50px;
				display: flex;
				align-items: center;
				background: rgb(9, 79, 163, .65);
				font-size: .8em;
			}
				#progresstime .material-icons
				{
					font-size: 18px;
					margin-inline-end: 4px;
				}
				#progresstime .separator
				{
					margin: 0 4px;
				}
			
			#transcript
			{
				position: absolute;
				bottom: 20px;
				inset-inline-end: 20px;
				background: rgb(9, 79, 163, .65);
			}
				#transcript:hover
				{
					background: rgb(9, 79, 163, 1);
				}
				#transcript .material-icons
				{
					font-size: 18px;
				}

/*
  transcript
*/

.module-transcript
{

}
.module-transcript .wrapper
{
	display: block;
}

	#videoplayer-transcript
	{
		/* JS measures the content's real pixel height (scrollHeight) and
		   transitions plain "height" to/from that - grid-template-rows'
		   0fr/1fr trick avoided needing that measurement, but its fr-value
		   interpolation turned out to stutter when collapsing. A plain
		   pixel-to-pixel height transition is a much more ordinary,
		   reliably-supported animation. this element's own top/bottom
		   padding is zeroed out and moved to .wrapper below instead, so the
		   padding is INSIDE the measured/animated height and collapses
		   along with the content - not left behind as a residual bar */
		overflow: hidden;
		height: 0;
		padding-top: 0;
		padding-bottom: 0;
		transition: height .4s cubic-bezier(0.075, 0.82, 0.165, 1);
	}
		#videoplayer-transcript[hidden]
		{
			display: none;
		}
		#videoplayer-transcript .wrapper
		{
			padding-top: var(--content-padding);
			padding-bottom: var(--content-padding);
		}

/*
	responsive
*/

/*
@media (aspect-ratio > 0.8)  {

	#videoplayer
	{
		position: absolute;
    height: calc(100% - (var(--content-padding) * 2));
		width: auto;
		aspect-ratio: 9 / 16;
		overflow: hidden;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border-radius: 20px;
		z-index: 2;

		display: flex;
    justify-content: center;
    align-items: center;
	}

}
*/

/*
@media (aspect-ratio > 9 / 15)  {

	#videoplayer
	{
    height: calc(100vh - (var(--content-padding) * 2));
		width: auto;
	}

}
*/

@media only screen and (max-width: 960px) {


}

@media only screen and (max-width: 640px) {


}

@media only screen and (max-width: 480px) {


}