/* ==========================================================================
   Variables
   ========================================================================== */
:root {
	--primary-color: #00cdff;
	--primary-contrast: #fff;
	--light-bg: #f9f9f9;
	--overlay-bg: rgba(0, 0, 0, 0.8);
	--pill-bg: hsla(0, 0%, 100%, 0.5);
	--pill-bg-hover: hsla(0, 0%, 100%, 0.8);
	--pill-border-radius: 4px;
	--radius-sm: 6px;
	--radius-md: 10px;
	--spacing-xs: 0.25em;
	--spacing-sm: 0.5em;
	--spacing-md: 1em;
	--spacing-lg: 1.5em;
	--font-sm: 12px;
	--font-base: 14px;
	--font-lg: 16px;
}

/* ==========================================================================
	 Layout & Grid
	 ========================================================================== */
#video-library-search {
	margin-bottom: 10px;
}

#video-category-filter {
	display: flex;
	gap: 10px;
	margin-top: 0;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

#video-library-grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ==========================================================================
	 Lightbox
	 ========================================================================== */
#video-lightbox {
	align-items: center;
	background: var(--overlay-bg);
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}

.lightbox-content {
	border-radius: var(--radius-md);
	max-height: 90%;
	max-width: 90%;
	overflow: visible;
	position: relative;
}

.close-lightbox {
	color: var(--primary-contrast);
	cursor: pointer;
	font-size: 3rem;
	position: absolute;
	right: 0px;
	top: -20px;
	opacity: 0.2;
	height: 24px;
	line-height: 24px;
	display: block;
}
#video-lightbox:hover .close-lightbox {
	opacity: 1;
	transition: all 0.3s ease-in-out;
}
#video-frame {
	display: flex;
	align-items: center;
	justify-content: center;
}

#video-frame iframe {
	aspect-ratio: 16/9;
	height: auto !important;
	max-width: 80%;
	width: 80vw;
}

/* ==========================================================================
	 Video Item Card
	 ========================================================================== */
.video-item {
	background: var(--light-bg);
	border: 1px solid var(--primary-color);
	border-radius: var(--radius-md);
	display: flex;
	gap: 20px;
	padding: 15px;
	text-align: center;
	width: 100%;
	max-width: calc(100% - 30px);
}

.video-content {
	width: 60%;
	position: relative;
}

/* ==========================================================================
	 Thumbnail & Play Overlay
	 ========================================================================== */
#video-library-grid .video-thumbnail {
	border-radius: var(--radius-sm);
	cursor: pointer;
	overflow: hidden;
	position: relative;
	width: 40%;
	aspect-ratio: 16 / 9;
	display: inline-block;
	height: fit-content;
}

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

.play-overlay {
	align-items: center;
	border: 2px solid currentColor;
	border-radius: var(--radius-sm);
	bottom: var(--spacing-sm);
	color: rgba(255, 255, 255, 0.9);
	background-color: #00cdff;
	display: flex;
	font-size: 24px;
	height: 40px;
	justify-content: center;
	left: var(--spacing-sm);
	line-height: 40px;
	pointer-events: none;
	position: absolute;
	text-align: center;
	width: 40px;
}

/* ==========================================================================
	 Categories (Pills and Icons)
	 ========================================================================== */
ul.video-categories {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 10px;
	padding: 0;
	bottom: 0;
	right: 0;
	gap: var(--spacing-xs);
	justify-content: center;
	align-items: center;
}

li.video-category-pill {
	background: var(--pill-bg);
	border: 1px solid currentColor;
	border-radius: var(--pill-border-radius);
	font-size: var(--font-sm);
	list-style: none;
	padding: var(--spacing-xs) var(--spacing-lg);
}

.video-thumbnail:hover li.video-category-pill {
	background: var(--pill-bg-hover);
	transition: all 0.3s ease-in-out;
}

li.video-category-icon svg {
	width: 50px;
	height: 50px;
	display: block;
}

ul.video-categories {
	position: absolute;
	top: -10px;
	right: -10px;
	height: 25px;
	margin: 0px;
	display: flex;
	justify-content: flex-end;
	color: var(--primary-color);
}

li.video-category-icon svg {
	height: 20px;
	width: 20px;
}
li.video-category-icon svg path,
li.video-category-icon .cls-1 {
	fill: var(--primary-color);
}

/* ==========================================================================
	 Filter Buttons & Search
	 ========================================================================== */
#video-category-filter button,
.video-item a.btn {
	background: var(--primary-color);
	border: 1px solid var(--primary-color);
	border-radius: 50px;
	cursor: pointer;
	display: inline-block;
	font-size: var(--font-lg);
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: var(--spacing-sm) var(--spacing-lg);
	color: var(--primary-contrast);
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	text-align: center;
	justify-content: center;
}

#video-category-filter button:hover,
#video-category-filter button.active,
.video-item a.btn:hover {
	background: var(--primary-contrast);
	color: var(--primary-color);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

input#video-search {
	border: 1px solid var(--primary-color);
	border-radius: 50px;
	font-size: var(--font-lg);
	padding: var(--spacing-sm) var(--spacing-md);
	width: 100%;
}

#video-category-filter svg {
	height: 24px;
	width: 24px;
	fill: #fff;
}
#video-category-filter svg .cls-1,
#video-category-filter svg path {
	fill: #fff;
}

#video-category-filter button:hover svg .cls-1,
#video-category-filter button:hover svg path,
#video-category-filter button.active svg .cls-1,
#video-category-filter button.active svg path {
	fill: var(--primary-color);
}


a.btn.btn-secondary {
    color: var(--primary-color);
    background: transparent;
	margin-top: 1em;
}

/* ==========================================================================
	 Description
	 ========================================================================== */
.video-description {
	font-size: var(--font-base);
}

.video-description p,
.video-content h3 {
	line-height: 1.25em;
}

.video-description .wp-block-embed {
	display: none;
}
/* ==========================================================================
	 Mobile Styles
	 ========================================================================== */
@media screen and (max-width: 768px) {
	.video-item {
		flex-direction: column;
	}
	.video-content {
		width: 100%;
	}
	#video-library-grid .video-thumbnail {
		width: 100%;
		max-height: unset;
	}
	.play-overlay {
		right: var(--spacing-xs);
		bottom: var(--spacing-xs);
		left: unset;
	}
}