/**
 * MDA Site Tools: Video Hub. Structural CSS only; style in the theme.
 *
 * Video page: .mda-video, .mda-video__title, .mda-video-embed, .mda-video-intro,
 *   .mda-video__section(--takeaways/--transcript), .mda-video__heading,
 *   .mda-video-takeaways, .key-takeaway, .mda-video-faqs, .mda-video-faq,
 *   .mda-video-faq__question, .mda-video-faq__answer, .mda-video-transcript,
 *   .mda-video-chapters, __item, __link, __time, __label, .mda-video__learn-more
 * Grid: .mda-video-grid, __filters, __filter (.is-active), __items, .mda-video-card,
 *   __link, __image, __placeholder, __title, .mda-video-grid__more, __load-more, __none
 */

/* Responsive 16:9 video */
.mda-video-embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin: 0 0 1.5em;
	background: #000;
}

.mda-video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Grid */
.mda-video-grid {
	--mda-video-columns: 3;
	--mda-video-gap: 24px;
}

.mda-video-grid__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--mda-video-gap);
}

.mda-video-grid__items {
	display: grid;
	grid-template-columns: repeat(var(--mda-video-columns), minmax(0, 1fr));
	gap: var(--mda-video-gap);
}

@media (max-width: 900px) {
	.mda-video-grid__items {
		grid-template-columns: repeat(min(var(--mda-video-columns), 2), minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.mda-video-grid__items {
		grid-template-columns: minmax(0, 1fr);
	}
}

.mda-video-card[hidden],
.mda-video-grid__more[hidden],
.mda-video-grid__none[hidden] {
	display: none !important;
}

.mda-video-card__link {
	display: block;
	text-decoration: none;
}

.mda-video-card__image {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #e5e5e5;
}

.mda-video-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mda-video-card__title {
	margin: 0.6em 0 0;
}

.mda-video-grid__more {
	margin-top: var(--mda-video-gap);
	text-align: center;
}

/* FAQs: <details>/<summary> accordion (works without JavaScript) */
.mda-video-faq {
	margin: 0 0 0.75em;
}

.mda-video-faq__question {
	cursor: pointer;
	font-weight: 600;
}

.mda-video-faq__answer {
	padding: 0.5em 0 0;
}

/* Chapters: clickable start times */
.mda-video-chapters {
	margin: 0 0 1.5em;
	padding: 0;
	list-style: none;
}

.mda-video-chapters__item {
	margin: 0 0 0.35em;
	padding: 0;
}

.mda-video-chapters__link {
	text-decoration: none;
}

.mda-video-chapters__time {
	display: inline-block;
	min-width: 3.5em;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.mda-video__learn-more {
	margin: 1em 0 1.5em;
}