/* ===== GENERAL ===== */

/* Page navigation */
.page_navigation_heading {
	--backgroundColorActive : 167, 235, 255 ;
	--colorHover : #E6E0B0 ;
	--colorActive : #102770 ;
	--colorActiveHover : #000000 ;
}

/* Articles */
article {
	--textBackgroundColor : 64, 64, 128 ;
}

/* Headings */
.h3,
.h4,
.h5 {
	display : flex ;
	flex-direction : row ;
	flex-wrap : wrap ;
	justify-content : center ;
	align-items : center ;
	align-content : flex-start ;
	
	user-select : none ;
}

.h3 {
	margin : 30px 25% ;
	
	border-radius : 20px ;
}

h3 {
	margin : 10px ;
	padding : 5px ;

	font-size : 2.25em ;
	text-transform : uppercase ;
	letter-spacing : 5px ;
	font-weight : bold ;
	
	text-shadow : 0 0 10px lightblue, 0 0 20px blue ;
}

.h4 {
	margin : 30px 25% 10px 50px ;
	padding-left : 20px ;
	
	justify-content : left ;
	
	border-radius : 10px ;
}

h4 {
	margin : 5px ;
	padding : 5px ;

	font-size : 2em ;
	text-transform : uppercase ;
	letter-spacing : 1px ;
	font-weight : bold ;
	
	color : #87CEFA ;	/* lightskyblue	*/
	text-shadow : 0 0 3px #87CEFA ;
}
	.h4:hover {
		background : rgba(192, 192, 192, 0.1) ;
	}

.h5 {
	margin : 20px 25% 10px 100px ;

	justify-content : left ;
	
	border-radius : 10px ;
}

h5 {
	margin : 5px ;
	padding : 5px 5px 5px 10px ;
	
	font-size : 1.5em ;
	text-transform : capitalize ;
	letter-spacing : 0.5px ;
	font-weight : bold ;
	
	color : lightblue ;
	text-shadow : 0 0 2px lightblue ;
}
	.h5:hover {
		background : rgba(192, 192, 192, 0.1) ;
	}


/* ===== VIDEO ===== */
.container_videos {
	width : 95% ;
	margin : 30px auto 40px auto ;
	padding : 10px ;
	
	display : flex ;
	flex-direction : row ;
	flex-wrap : wrap ;
	justify-content : flex-start ;
	align-items : flex-start ;
	align-content : flex-start ;
	
	gap : 40px 30px ;
	
	background : rgba(255, 255, 255, 0.1) ;
	border-radius : 20px ;
	
	backdrop-filter : var(--backdropBlurFilter) ;
}

music-video-item {
	min-height : var(--musicVideoMinHeight) ;
	width : 350px ;
	padding : 10px 10px 20px 10px ;
	
	position : relative ;
	overflow : hidden ;
	
	background : #202020 ;
	border : 1px solid #404040 ;
	border-radius : 10px ;
	box-shadow : 3px 3px 3px #202020 ;
}
	music-video-item:not(.loaded)::after {
		content : "..." ;
		
		position : absolute ;
		top : 50% ;
		left : 50% ;
		transform : translateX(-50%) translateY(-50%) ;
		
		color : grey ;
		
		font-size : 2em ;
		font-weight : bold ;
		letter-spacing : 5px ;
		
		animation : loading 3s infinite ;
	}
		@keyframes loading {
			0%, 100% {
				content : "." ;
			}
			33% {
				content : ".." ;
				color : #A0A0A0 ;
			}
			67% {
				content : "..." ;
				color : #C0C0C0 ;
			}
		}
	
	music-video-item.loaded {
		background : rgba(0, 0, 0, 0.9) ;
	}
		music-video-item.loaded:hover {
			background-color : #080808 ;
		}

.video {
	width : 100% ;
	max-width : 100% ;
    height : var(--musicVideoMinHeight) ;
	/* No auto margins : they would absorb the free space and vertically center the
	thumbnail (auto margins win over align-items), instead of a top alignment */
}

.video_text {
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : flex-start ;
	align-items : flex-start ;
}

.video_title,
.video_description,
.video_date,
.video_tags,
.video_statistics,
.video_music_sheet {
	width : 100% ;
	margin-left : auto ;
	margin-right : auto ;
	overflow : hidden ;
	text-align : center ;
	text-overflow : ellipsis ;
}

.video_title {
	margin-top : 10px ;
	
	font-size : 1.05em ;
	font-weight : bold ;
}

.video_description {
	margin-top : 5px ;
	max-height : 80px ;
	overflow : auto ;
	
	font-size : 0.9em ;
	font-style : italic ;
	color : #E0E0E0 ;
}

.video_date {
	margin-top : 5px ;
	
	font-size : 0.9em ;
	
	color : #C0C0C0 ;
}

.video_tags {
	margin-top : 15px ;
	max-height : 75px ;
	overflow : auto ;
	
	font-size : 0.8em ;
	color : grey ;
	
	display : none ;
}

.video_statistics {
	margin-top : 15px ;
	
	font-size : 0.95em ;
}

.video_music_sheet {
	margin-top : 15px ;
	padding : 5px 10px ;
	
	border-radius : 10px ;
	
	font-size : 0.9em ;
	color : var(--colorAccent) ;
	
	cursor : pointer ;
	
	transition : background 0.2s ease, color 0.2s ease, text-shadow 0.2s ease ;
}
	.video_music_sheet:hover {
		background : var(--surface2) ;
		color : var(--textColor) ;
		text-shadow : 0 0 3px var(--colorAccent) ;
	}
/* Video thumbnails on large screens only : uniform grid (equal heights per
   row), full-width thumbs. The intermediate widths keep their one-per-row
   layout (thumbnail left, text right), and phones their column. */
@media screen and (min-width : 1025px) {
	.container_videos {
		display : grid ;
		grid-template-columns : repeat(auto-fill, minmax(236px, 1fr)) ;
		gap : 14px ;
		align-items : stretch ;
	}
	.container_videos music-video-item {
		width : auto ;
		max-width : none ;
		margin : 0 ;
		position : relative ;
		display : flex ;
		flex-direction : column ;
	}
	/* The thumbnail is a cover background on lite-youtube : lateral crop. A 16/9
	   box with a contained background shows the whole image, at a lower height. */
	.container_videos lite-youtube {
		width : 100% ;
		height : auto ;
		aspect-ratio : 16 / 9 ;
		background-size : contain ;
		background-repeat : no-repeat ;
		background-position : center ;
		background-color : #000 ;
	}
	/* The date follows the description inline, quietly (no reserved line) */
	/* The play button keeps a sensible size on the smaller thumbnails
	   (its base transform centers it : the scale must preserve it) */
	.container_videos .lty-playbtn {
		transform : translate3d(-50%, -50%, 0) scale(0.72) ;
	}
}

/* At scroll top, no section heading may peek at the bottom (like the other
   pages) : the hero fills the first screen of the slider */
@media screen and (min-width : 1025px) {
	main.music .hero {
		min-height : calc(100dvh - var(--headerHeight) - 20px) ;
	}
}

/* The date follows the description inline, quietly, at EVERY screen size.
   video_text is a flex container : its children would be blockified, so it
   becomes a plain block and the description + date flow inline together */
.container_videos music-video-item .video_text {
	display : block ;
	/* The former flex layout showed left-packed boxes : as a plain block, the
	   inherited text-align:center would center the flowing lines instead */
	text-align : left ;
}
.container_videos music-video-item .video_description {
	display : inline ;
}
.container_videos music-video-item .video_date {
	display : inline ;
	margin : 0 0 0 6px ;
	font-size : 0.72em ;
	opacity : 0.6 ;
}