/* Simulación de blur sin lag */
.event-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0), rgba(0, 0, 0, 0));
  transform: translateY(100%);
  transition: transform 0.4s ease-in-out;
  will-change: transform;
  position: relative;
  z-index: 10;
}

.event-component:hover .event-overlay,
.event-component:active .event-overlay {
  transform: translateY(0%);
}

/* Para dispositivos táctiles - activación al tocar */
@media (hover: none) and (pointer: coarse) {
  .event-component:active .event-overlay {
    transform: translateY(0%);
  }
}

/* Alternativa: mostrar siempre en móvil */
@media (max-width: 768px) {
  .event-overlay {
    transform: translateY(0%);
  }
}