/*
 * Custom YouTube RSS Feed
 *
 * Este archivo NO carga Tailwind CSS ni lo sustituye: el tema activo es
 * responsable de proporcionar Tailwind. Aquí solo se resuelve lo que
 * Tailwind no puede garantizar de forma fiable (soporte de line-clamp en
 * cualquier versión/tema, y un estado :focus-visible que no depende de
 * ninguna utilidad de Tailwind). Todo el selector está namespaced bajo
 * .ytrss-feed / .ytrss-card / .ytrss-shorts: nunca se tocan elementos
 * globales (body, a, h1-h3, button, img) ni se usa !important.
 */

.ytrss-card__title,
.ytrss-card__description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.ytrss-card a:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.ytrss-feed--empty {
	color: #6b7280;
}

/*
 * Carrusel de Shorts: snap-x/snap-mandatory ya son utilidades nativas de
 * Tailwind desde v3.0, pero se refuerzan aquí explícitamente (misma
 * cautela que ya aplica este archivo a line-clamp: no asumir qué
 * utilidades soporta la build de Tailwind del tema activo). El ocultado
 * de scrollbar no tiene utilidad equivalente en Tailwind core.
 *
 * .shorts-track se incluye además de .ytrss-shorts__track porque
 * templates/shorts-carousel.php usa esa clase del tema en el track para
 * heredar su estilo visual; estas reglas deben seguir aplicando aunque
 * cambie el nombre de clase usado en la plantilla.
 */
.ytrss-shorts__track,
.ytrss-shorts .shorts-track {
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ytrss-shorts__track::-webkit-scrollbar,
.ytrss-shorts .shorts-track::-webkit-scrollbar {
	display: none;
}

.ytrss-shorts__card {
	scroll-snap-align: start;
}

.ytrss-shorts a:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/*
 * El iframe de reproducción embebida lo crea assets/js/ytrss-shorts.js
 * DESPUÉS de que la página ya cargó. Un Tailwind cargado por CDN (JIT en
 * el navegador) puede no detectar clases de utilidad añadidas a elementos
 * creados dinámicamente, así que ese script usa esta clase propia en vez
 * de clases Tailwind para garantizar que el iframe siempre ocupe todo el
 * contenedor de la miniatura.
 */
.ytrss-shorts__embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ytrss-shorts__track {
		scroll-behavior: auto;
	}
}