/* === Lista footer (visible en móvil y apaisado) de Elnacionalista.net === */

/* Estilos base del contenedor (adaptado de carrusel a lista) */
#mobile-footer-carousel { 
  max-width: 340px; 
  width: 94vw; 
  margin: 1.5rem auto 0; 
  background: #f9f9f9; 
  border-top: 1px solid #e2e2e2; 
  padding: 1rem 0; 
  border-radius: 12px; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.02); 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}

/* Estilos para la lista (reemplaza track/slides) */
#mobile-footer-carousel .noticias-list { 
  display: flex; 
  flex-direction: column; 
  gap: 16px; 
  width: 100%; 
  padding: 0 12px; 
  margin-bottom: 0.5rem;  /* Tweak: espacio extra sin flechas */
}

/* Estilos para cada item de la lista */
#mobile-footer-carousel .lista-item { 
  display: flex; 
  gap: 12px; 
  align-items: center; 
  background: #fff; 
  border-radius: 8px; 
  padding: 0.5rem; 
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
  transition: box-shadow 0.2s ease;  /* Tweak: suave hover */
}

#mobile-footer-carousel .lista-item:hover { 
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);  /* Tweak: efecto al pasar mouse */
}

#mobile-footer-carousel .lista-item img { 
  width: 80px; 
  height: auto; 
  border-radius: 6px; 
  object-fit: cover; 
}

/* Texto dentro del item */
#mobile-footer-carousel .lista-item h4 { 
  margin: 0 0 4px; 
  font-size: 0.9rem; 
}

#mobile-footer-carousel .lista-item p { 
  margin: 0; 
  font-size: 0.75rem; 
  color: #666; 
  max-width: 90%; 
  overflow: hidden;  /* Tweak: evita texto desbordado */
  text-overflow: ellipsis;  /* Tweak: ... si es muy largo */
}

/* Responsive: En apaisado/desktop, lista horizontal */
@media (min-width: 768px) { 
  #mobile-footer-carousel { 
    max-width: 100%;  /* Full-width en apaisado/desktop */
    width: 100%; 
    flex-direction: row;  /* Horizontal si quieres */
    justify-content: center; 
  } 
  #mobile-footer-carousel .noticias-list { 
    flex-direction: row;  /* Items en fila */
    gap: 24px; 
    justify-content: center; 
  } 
  #mobile-footer-carousel .lista-item img { 
    width: 100px;  /* Mayor en pantallas grandes */
  } 
}

/* Enlaces en la lista (nuevo para clicabilidad) */
#mobile-footer-carousel .lista-item-link {
  text-decoration: none;  /* Sin underline */
  color: inherit;  /* Hereda color */
  display: block;  /* Hace todo el item clicable */
}

#mobile-footer-carousel .lista-item-link:hover {
  opacity: 0.9;  /* Efecto hover sutil */
}