/* ! [[ Videos Module ]] */

/* ! [ general ] */
.video-block {
	padding: 1rem 0;
	margin-top: 2rem;
	margin-bottom: 0;
}
.video-block .video-heading {
	margin-bottom: 0;

	/* visuallyhidden */
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.video-block .more-all {
	text-align: center;
}

.video-block .filter-form {

}

/* ! [ items ] */
.video-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	grid-gap: 2rem;
	align-items: stretch;
}
	.video-item {
		position: relative;
		padding: 0;
		margin: 1rem 0 1rem;

		display: flex;
		flex-direction: column;
	}
		.video-title {
			margin: 0 0 .5rem 0;
			font-size: 1rem;
			/* font-weight: normal; */
		}
		.video-item .video-title a {
			text-decoration: none;
		}
		.video-item .video-title a:hover {
			text-decoration: underline;
		}
		.video-brief {
			font-size: 1rem;
		}
	.video-poster {
		margin: 0;
		overflow: hidden;
		position: relative;
	}
		.video-img {
			display: block;
			width: 100%;
			height: auto;

			aspect-ratio: 16/9;
			object-fit: cover;

			transition: transform .2s ease-in;
		}
		.video-item:hover .video-img {
			transform: scale(1.05);
		}
		.video-figure figcaption {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding: .5rem .75rem .3rem;
			background: hsla(0, 0%, 0%, .5);
			color: #fff;
			font-size: .75rem;
		}
	.video-details {
		display: flex;
		flex-direction: column;
		padding: .5rem 0 0;
		flex-grow: 1;
	}
	.video-details > :last-child {
		margin-bottom: 0;
	}
		.video-brief {
			margin-bottom: auto;
		}
		.video-brief p {

		}
	.video-item .more {

	}

/* ! [ Single video  ] */
.video-view {
	padding: 2rem 0;
	background-color: #fefefe;
	box-shadow: -50vw 0 0 0 #fefefe,
				-25vw 0 0 0 #fefefe,
				 25vw 0 0 0 #fefefe,
				 50vw 0 0 0 #fefefe;
}
.video-view .video-headline {

}
.video-view .video-figure {
	max-width: 1200px;
	margin-bottom: 1rem;
}
.video-view .video-embed {
	max-width: 100%;
	border: none;
}


/* Related videos */
.related {
	margin-block: 2rem;
}
	.related .video-items {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		grid-gap: 1rem;
		align-items: stretch;
	}

/* ! [ Filter Form  ] */
.video-block .filter-form {
	display: flex;
	position: relative;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 2%;
	row-gap: 1rem;
	width: 100%;
	padding: 1rem;
	margin: 0 0 1rem 0;
	background: #efefef;
}
	.video-block .filter-form .input-text {
		width: auto;
		flex-basis: 200px;
		flex-grow: 2;
		margin-bottom: 0;
	}
		.video-block .filter-form .input-text input {
			width: 100%;
			padding: .5rem;
		}
	.video-block .filter-form .input-radio {
		width: auto;
		flex-basis: 400px;
		flex-grow: 4;

		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		row-gap: 0.25rem;
		margin: 0;
	}
	.video-block .filter-form .input-radio > label {
		width: 100%;
		font-size: 1rem;

		/* visuallyhidden */
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}
	.video-block .filter-form .input-radio > .input-radio-option {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-basis: 33%;
		flex-grow: 1;
		min-width: 0;
	}
		.video-block .filter-form .input-radio > .input-radio-option label {
			margin: 0;
			padding: 0 0 0 .25rem;
			font-size: 1rem;
		}

	.video-block .filter-form .submit {
		max-width: fit-content;
	}