/**
 * Feed de YouTube de la home (módulo mug-core yt-lives, shortcode [mug_yt_feed]).
 * Reglas visuales portadas de youtube-feed-pro (css/sb-youtube-common.min.css)
 * y adaptadas a clases propias mug-yt-*: mismos overlays, play button, título
 * y botón "Ver más videos" que el feed original de la home. Tres layouts:
 * grid (default), sidebar (feed lateral, 1 columna) y shorts (carrusel
 * horizontal 9:16 con scroll-snap y flechas).
 */

.mug-yt-feed {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	font-size: 13px;
}

.mug-yt-feed *,
.mug-yt-feed *::before,
.mug-yt-feed *::after {
	box-sizing: border-box;
}

/* Grid de cards. El original usa columnas fijas por setting (1 col desktop,
   2 en mobile para el widget de la home); acá el ancho mínimo de card logra
   lo mismo: 1 columna en la columna angosta de la home, grid en anchos mayores. */
.mug-yt-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 8px; /* itemspacing 4px por lado en el original */
}

@media (max-width: 480px) {
	.mug-yt-items {
		grid-template-columns: repeat(2, 1fr); /* colsmobile=2 del feed original */
	}
}

.mug-yt-item {
	overflow: hidden;
}

/* --- Thumbnail --- */

.mug-yt-thumb-wrap {
	position: relative;
	width: 100%;
}

.mug-yt-thumb {
	display: block;
	position: relative;
	line-height: 0;
	text-decoration: none;
	z-index: 5;
}

/* Borde interior sutil sobre la imagen (a.sby_video_thumbnail:after). */
.mug-yt-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.7);
}

.mug-yt-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover; /* recorta las bandas negras de hqdefault (4:3) */
	border-radius: 0;
}

/* --- Badges de estado (en vivo / próximamente) --- */

.mug-yt-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 12;
	padding: 3px 6px;
	border-radius: 4px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-transform: uppercase;
}

.mug-yt-badge--live {
	background: #e8443b;
}

.mug-yt-badge--upcoming {
	background: #1b9c85;
}

/* --- Overlay al hover (sby_thumbnail_hover) --- */

.mug-yt-hover {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 10;
	opacity: 0;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
	transition: opacity 0.6s ease-in-out;
}

.mug-yt-thumb:hover .mug-yt-hover,
.mug-yt-thumb:focus-visible .mug-yt-hover {
	opacity: 1;
	transition: opacity 0.2s ease-in-out;
}

.mug-yt-hover-inner {
	display: inline-block;
	width: 100%;
	height: 100%;
	padding: 10px;
	overflow: hidden;
	line-height: normal;
	text-align: center;
}

.mug-yt-hover-title {
	display: block;
	margin-bottom: 5px;
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.2;
}

.mug-yt-caption {
	margin: 0;
	padding: 0;
	font-size: 1em;
	line-height: 1.3;
}

.mug-yt-stats {
	margin: 8px 0 0;
	padding: 0;
	font-size: 1em;
	line-height: 1.3;
}

.mug-yt-stats span {
	font-size: 1em;
	margin-right: 8px;
	white-space: nowrap;
}

.mug-yt-stats span:last-child {
	margin-right: 0;
}

.mug-yt-stats svg {
	width: 13px;
	height: 13px;
	margin-right: 4px;
	vertical-align: -2px;
}

/* --- Botón de play (sby_play_btn) --- */

.mug-yt-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 57px;
	height: 50px;
	margin: -25px 0 0 -28px;
	color: #fff;
	opacity: 1;
	transition: opacity 0.2s ease-in-out;
}

.mug-yt-thumb:hover .mug-yt-play {
	opacity: 0.5;
}

/* Triángulo blanco detrás del logo de YouTube. */
.mug-yt-play-bg {
	display: block;
	position: absolute;
	top: 17px;
	left: 22px;
	z-index: -1;
	width: 0;
	height: 0;
	border: 0 solid transparent;
	border-bottom-width: 9px;
	border-top-width: 9px;
	border-left: 16px solid #fff;
}

.mug-yt-play svg {
	width: 57px;
	height: auto;
	opacity: 0.75;
	color: #000;
}

/* Texto solo para lectores de pantalla (sby-screenreader). */
.mug-yt-screenreader {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Info debajo del thumbnail (sby_info) --- */

.mug-yt-info {
	width: 100%;
	margin: 16px 0;
	opacity: 0.9;
	text-align: center;
	text-decoration: none;
	line-height: 1.3;
}

.mug-yt-title {
	margin: 0;
	padding: 0;
	font-size: 1.2em;
	line-height: 1.3;
}

.mug-yt-video-title {
	font-weight: 700;
}

.mug-yt-when {
	display: block;
	margin-top: 4px;
	font-size: 1em;
	font-weight: 600;
}

.mug-yt-when--live {
	color: #e8443b;
}

.mug-yt-when--upcoming {
	color: #1b9c85;
}

/* --- Footer: botón "Ver más videos" (sby_follow_btn) --- */

.mug-yt-footer {
	width: 100%;
	text-align: center;
}

.mug-yt-more {
	display: inline-block;
	vertical-align: top;
	padding: 7px 14px;
	margin: 5px auto 0;
	background: #1b9c85; /* subscribecolor del feed original */
	border: none;
	border-radius: 4px;
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
	text-decoration: none;
	transition: all 0.1s ease-in;
}

.mug-yt-more:hover,
.mug-yt-more:focus {
	color: #fff;
	box-shadow: inset 0 0 20px 20px rgba(255, 255, 255, 0.25);
}

.mug-yt-more:active {
	box-shadow: inset 0 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Ícono de YouTube dentro del botón (sby_follow_btn svg, solo en sidebar). */
.mug-yt-more svg {
	width: 15px; /* font-size 15px del .fa original */
	height: auto;
	margin-right: 7px;
	margin-bottom: -1px;
	vertical-align: -0.125em;
}

/* --- Layout sidebar (feed lateral de la home) --- */

/* El original es sby_col_1 / sby_mob_col_2: lista vertical en desktop,
   2 columnas en mobile. Cards idénticas al grid. */
.mug-yt-sidebar .mug-yt-items {
	grid-template-columns: 1fr;
}

@media (max-width: 480px) {
	.mug-yt-sidebar .mug-yt-items {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Layout shorts (carrusel scroll-snap) --- */

.mug-yt-shorts-viewport {
	position: relative;
}

/* Reemplaza al carrusel owl del original (sby_col_3 / sby_mob_col_1):
   track con scroll nativo + snap; el gap de 10px equivale al padding de
   5px por lado de cada sby_item. */
.mug-yt-shorts-track {
	display: flex;
	gap: 10px;
	padding: 5px; /* sby_items_wrap del carrusel original */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none; /* las flechas reemplazan a la barra */
	-webkit-overflow-scrolling: touch;
}

.mug-yt-shorts-track::-webkit-scrollbar {
	display: none;
}

.mug-yt-short {
	flex: 0 0 calc((100% - 30px) / 4); /* 4 columnas como el carrusel original de la home */
	scroll-snap-align: start;
}

@media (max-width: 480px) {
	.mug-yt-short {
		flex-basis: 100%; /* sby_mob_col_1 */
	}
}

.mug-yt-short-thumb {
	display: block;
	position: relative;
	line-height: 0;
	text-decoration: none;
}

/* Mismo borde interior sutil que las cards del grid. */
.mug-yt-short-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.7);
}

/* hqdefault es 4:3: el recorte 9:16 con cover deja el centro vertical
   del short, como se ve en la referencia. */
.mug-yt-short-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	border-radius: 0;
}

/* Fecha debajo del título (sby_meta / sby_date del original). */
.mug-yt-meta {
	margin: 0;
	padding: 0;
	font-size: 1em;
	line-height: 1.3;
}

/* Flechas prev/next (mismo look que sby-owl-nav > div del original). */
.mug-yt-shorts-arrow {
	position: absolute;
	top: 50%;
	z-index: 20;
	display: inline-block;
	margin-top: -15px;
	padding: 6px 6px 6px 8px;
	background: rgba(255, 255, 255, 0.3);
	border: 0;
	border-radius: 50%;
	color: #000;
	font-size: 14px;
	line-height: 0;
	cursor: pointer;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
	transition: all 0.5s;
}

.mug-yt-shorts-arrow:hover,
.mug-yt-shorts-arrow:focus-visible {
	background: rgba(255, 255, 255, 0.85);
}

.mug-yt-shorts-arrow[hidden] {
	display: none;
}

.mug-yt-shorts-arrow svg {
	height: 1.2em;
	width: auto;
}

.mug-yt-shorts-prev {
	left: 0;
	margin-left: 7px;
	padding: 6px 8px 6px 6px;
}

.mug-yt-shorts-next {
	right: 0;
	margin-right: 7px;
}

/* Dots de paginación del carrusel (como el feed original) */
.mug-yt-shorts-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}
.mug-yt-shorts-dot {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #d6d6d6;
	cursor: pointer;
	transition: background .15s;
}
.mug-yt-shorts-dot.is-active,
.mug-yt-shorts-dot:hover {
	background: #869791;
}
@media (max-width: 768px) {
	.mug-yt-short { flex-basis: calc((100% - 10px) / 2); }
}