/**
 * Lite YouTube Embed
 * Loads YouTube thumbnail as placeholder, real player loads only on click.
 * Saves ~2.6MB of YouTube player JS until user interaction.
 */

.lite-youtube {
	position: relative;
	display: block;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	background-color: #000;
	background-position: center center;
	background-size: cover;
	cursor: pointer;
	border-radius: 0.75rem;
	overflow: hidden;
}

.lite-youtube::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	background-image: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 60%);
	height: 60px;
	width: 100%;
	z-index: 1;
	pointer-events: none;
}

.lite-youtube::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.1);
	transition: background 0.2s ease;
	pointer-events: none;
}

.lite-youtube:hover::after,
.lite-youtube:focus::after {
	background: rgba(0, 0, 0, 0.2);
}

/* Play button */
.lite-youtube .lty-playbtn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
	z-index: 2;
	background-color: #cc0000;
	border-radius: 14px;
	transition: background-color 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.lite-youtube:hover .lty-playbtn,
.lite-youtube:focus .lty-playbtn {
	background-color: #ff0000;
	transform: translate(-50%, -50%) scale(1.05);
}

.lite-youtube .lty-playbtn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-35%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 19px;
	border-color: transparent transparent transparent #fff;
}

/* Activated state - hide placeholder elements when iframe loads */
.lite-youtube.lyt-activated {
	cursor: default;
}

.lite-youtube.lyt-activated::before,
.lite-youtube.lyt-activated::after,
.lite-youtube.lyt-activated .lty-playbtn {
	display: none;
}

.lite-youtube iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Focus styles for accessibility */
.lite-youtube:focus {
	outline: 3px solid #008084;
	outline-offset: 2px;
}

.lite-youtube:focus:not(:focus-visible) {
	outline: none;
}

.lite-youtube:focus-visible {
	outline: 3px solid #008084;
	outline-offset: 2px;
}