/*
 * Only what the theme's on-camera styles cannot know: once the section is
 * populated from the playlist feed, the hero and the cards become links.
 * All visual design (grid, play button, type) stays in the theme.
 */

a.ccig-vhero {
	display: block;
}

.ccig-vcard__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* YouTube's always-available hqdefault thumbnails are 4:3 with letterbox
 * bars; crop them to the 16:9 frame the design uses. */
.ccig-vcard__thumb img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ccig-vcard__link:hover .ccig-vcard__title,
.ccig-vcard__link:focus-visible .ccig-vcard__title {
	text-decoration: underline;
}

/* Feed titles run longer than the designed two-word caption; stop them
 * before the play disc (46px wide, 22px from the right edge). */
.ccig-hero__video .ccig-hero__video-caption {
	right: 84px;
}

/* --- Lightbox player ---------------------------------------------------- */

.ccig-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(15, 26, 43, 0.92);
}

.ccig-lightbox__frame {
	position: relative;
	width: min(1080px, 100%);
}

.ccig-lightbox__player {
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

.ccig-lightbox__player iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.ccig-lightbox__close {
	position: absolute;
	top: -46px;
	right: 0;
	padding: 0 8px;
	border: 0;
	background: none;
	color: #ffffff;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
}

.ccig-lightbox__close:hover,
.ccig-lightbox__close:focus-visible {
	opacity: 0.75;
}

body.ccig-lightbox-open {
	overflow: hidden;
}