/* ============================================================
   YT Featured Player — overlay on featured images
   ============================================================ */

/* The wrapper that wraps the featured image. Must be inline-block / block
   so it sizes to the image without breaking grid layouts. */
.ytfp-thumb {
	position: relative;
	display: inline-block;
	line-height: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* When inside a flex/grid layout that stretches, become block. Themes vary,
   so we also let context set width via CSS. */
.ytfp-thumb img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Play badge: centered over the image */
.ytfp-thumb .ytfp-play-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	transition: transform .2s ease, opacity .2s ease;
	line-height: 0;
	z-index: 2;
}

.ytfp-thumb:hover .ytfp-play-badge,
.ytfp-thumb:focus-visible .ytfp-play-badge {
	transform: translate(-50%, -50%) scale(1.08);
}

.ytfp-thumb:focus-visible {
	outline: 3px solid #4a9eff;
	outline-offset: 2px;
}

/* Subtle darkening overlay on hover so the play badge stays readable on
   bright thumbnails */
.ytfp-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.05);
	transition: background-color .2s ease;
	pointer-events: none;
	z-index: 1;
}

.ytfp-thumb:hover::after,
.ytfp-thumb:focus-visible::after {
	background: rgba(0, 0, 0, 0.18);
}

/* Mobile: play badge a touch smaller so it doesn't dominate small grid tiles */
@media (max-width: 480px) {
	.ytfp-thumb .ytfp-play-badge svg {
		width: 52px;
		height: 52px;
	}
}

/* ============================================================
   JS-decorated anchors (Spectra Loop Builder, custom grids).
   The .ytfp-play-badge--injected sits inside ytfp-badge-host
   (which may be the anchor itself for image-only links, or
   a tight image wrapper inside a larger card).
   ============================================================ */
.ytfp-decorated {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.ytfp-play-badge--injected {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 5;
	line-height: 0;
	transition: transform .2s ease;
}

.ytfp-decorated:hover .ytfp-play-badge--injected,
.ytfp-decorated:focus-visible .ytfp-play-badge--injected {
	transform: translate(-50%, -50%) scale(1.08);
}

/* Subtle darkening overlay — applied to the BADGE HOST (image wrapper)
   instead of the whole anchor, so we don't darken titles or text below
   the image when the anchor wraps a card. */
.ytfp-badge-host::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	transition: background-color .2s ease;
	pointer-events: none;
	z-index: 4;
}

.ytfp-decorated:hover .ytfp-badge-host::after,
.ytfp-decorated:focus-visible .ytfp-badge-host::after {
	background: rgba(0, 0, 0, 0.18);
}

/* If the anchor itself is the badge host (image-only link), also apply
   the hover darkening directly. */
.ytfp-decorated.ytfp-badge-host:hover::after,
.ytfp-decorated.ytfp-badge-host:focus-visible::after {
	background: rgba(0, 0, 0, 0.18);
}

@media (max-width: 480px) {
	.ytfp-play-badge--injected svg {
		width: 52px;
		height: 52px;
	}
}

/* ============================================================
   In-content facade (replaces inline YT iframes)
   ============================================================ */
.ytfp-facade {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	cursor: pointer;
	overflow: hidden;
	border-radius: 4px;
	margin: 1em 0;
	line-height: 0;
}

.ytfp-facade img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* hqdefault has black bars top/bottom — scale up slightly to crop them */
	transform: scale(1.34);
}

.ytfp-facade .ytfp-play-badge--lg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	transition: transform .2s ease;
	z-index: 2;
	line-height: 0;
}

.ytfp-facade:hover .ytfp-play-badge--lg {
	transform: translate(-50%, -50%) scale(1.1);
}

.ytfp-facade::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.1);
	transition: background-color .2s ease;
	pointer-events: none;
	z-index: 1;
}

.ytfp-facade:hover::after {
	background: rgba(0, 0, 0, 0.25);
}