/* =====================================================
   EME YouTube Shorts Feed — Estilos frontend
   Estado: estabilizado post rollback (Fase 5)
   ===================================================== */

.eme-ysf {
	--eme-ysf-columns-desktop: 4;
	--eme-ysf-columns-tablet: 2;
	--eme-ysf-columns-mobile: 1;
	--eme-ysf-gap: 16px;
	--eme-ysf-aspect-ratio: 9 / 16;
	box-sizing: border-box;
	margin: 1.5rem 0;
	max-width: 100%;
	overflow: hidden;
}

.eme-ysf *,
.eme-ysf *::before,
.eme-ysf *::after {
	box-sizing: border-box;
}

/* ---- Grid ---- */

.eme-ysf--grid .eme-ysf__track {
	display: grid;
	gap: var(--eme-ysf-gap);
	grid-template-columns: repeat(var(--eme-ysf-columns-desktop), minmax(0, 1fr));
}

/* ---- Carrusel ---- */

.eme-ysf--carousel {
	position: relative;
}

.eme-ysf--carousel .eme-ysf__viewport {
	overflow-x: hidden;
	overflow-y: visible;
	overscroll-behavior-inline: contain;
	padding-inline: 3.25rem;
	scroll-behavior: smooth;
	scroll-snap-type: inline mandatory;
	scrollbar-width: none;
}

.eme-ysf--carousel .eme-ysf__viewport::-webkit-scrollbar {
	display: none;
}

.eme-ysf--carousel .eme-ysf__track {
	display: flex;
	gap: var(--eme-ysf-gap);
}

.eme-ysf--carousel .eme-ysf__card {
	flex: 0 0 calc((100% - (var(--eme-ysf-gap) * (var(--eme-ysf-columns-desktop) - 1))) / var(--eme-ysf-columns-desktop));
	min-width: 160px;
	scroll-snap-align: start;
}

/* ---- Tarjeta ---- */

.eme-ysf__card {
	min-width: 0;
}

.eme-ysf__thumb {
	appearance: none;
	aspect-ratio: var(--eme-ysf-aspect-ratio);
	background: #000 !important;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	display: block;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100%;
}

.eme-ysf__thumb[data-eme-ysf-loaded="1"],
.eme-ysf__thumb--loading {
	background: #000 !important;
}

a.eme-ysf__thumb {
	color: inherit;
	text-decoration: none;
}

.eme-ysf__image,
.eme-ysf__iframe {
	border: 0;
	height: 100%;
	inset: 0;
	object-fit: contain;
	position: absolute;
	width: 100%;
}

/* ---- Botón de play ---- */

.eme-ysf__play {
	background: rgba(0, 0, 0, 0.68);
	border-radius: 999px;
	height: 48px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
}

.eme-ysf__play::before {
	border-bottom: 12px solid transparent;
	border-left: 18px solid #fff;
	border-top: 12px solid transparent;
	content: "";
	left: 18px;
	position: absolute;
	top: 12px;
}

/* ---- Texto de la tarjeta ---- */

.eme-ysf__title {
	font-size: 1rem;
	line-height: 1.35;
	margin: 0.65rem 0 0;
}

.eme-ysf__date {
	color: #666;
	display: block;
	font-size: 0.875rem;
	margin-top: 0.35rem;
}

/* ---- Controles del carrusel ---- */

.eme-ysf__nav {
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.eme-ysf__prev,
.eme-ysf__next {
	align-items: center;
	background: rgba(17, 17, 17, 0.82);
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-size: 2.8rem;
	height: 42px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	pointer-events: auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	z-index: 2;
}

.eme-ysf__arrow {
	align-items: center;
	display: flex;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 300;
	height: 100%;
	justify-content: center;
	line-height: 1;
	transform: translateY(-0.04em);
	width: 100%;
}

.eme-ysf__prev {
	left: 0.25rem;
}

.eme-ysf__next {
	right: 0.25rem;
}

.eme-ysf__prev:hover,
.eme-ysf__next:hover,
.eme-ysf__prev:focus-visible,
.eme-ysf__next:focus-visible {
	background: #111;
}

.eme-ysf__prev:disabled,
.eme-ysf__next:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

/* ---- Aviso admin ---- */

.eme-ysf--notice {
	background: #fff8e5;
	border-left: 4px solid #dba617;
	padding: 0.75rem 1rem;
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
	.eme-ysf--grid .eme-ysf__track {
		grid-template-columns: repeat(var(--eme-ysf-columns-tablet), minmax(0, 1fr));
	}

	.eme-ysf--carousel .eme-ysf__card {
		flex-basis: calc((100% - (var(--eme-ysf-gap) * (var(--eme-ysf-columns-tablet) - 1))) / var(--eme-ysf-columns-tablet));
	}
}

@media (max-width: 640px) {
	.eme-ysf--carousel .eme-ysf__viewport {
		padding-inline: 2.25rem;
	}

	.eme-ysf__prev,
	.eme-ysf__next {
		height: 34px;
		width: 34px;
	}

	.eme-ysf--grid .eme-ysf__track {
		grid-template-columns: repeat(var(--eme-ysf-columns-mobile), minmax(0, 1fr));
	}

	.eme-ysf--carousel .eme-ysf__card {
		flex-basis: calc((100% - (var(--eme-ysf-gap) * (var(--eme-ysf-columns-mobile) - 1))) / var(--eme-ysf-columns-mobile));
	}
}