/* Estilos específicos para la sección de eventos */

/* Fix específico para imágenes de eventos */
.evento-image {
    position: relative;
    padding-top: 56.25%; /* Relación de aspecto 16:9 */
    overflow: hidden;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Placeholder mejorado para eventos sin imagen */
.evento-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    opacity: 0.1;
    z-index: 1;
}

.evento-image::after {
    content: '🎉';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    z-index: 2;
    opacity: 0.3;
}

.evento-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all var(--transition-slow);
    z-index: 3;
    background: #f5f5f5;
}

/* Estado de carga para imágenes */
.evento-image img[src=""],
.evento-image img:not([src]),
.evento-image img[src*="placeholder"] {
    opacity: 0;
}

/* Fallback cuando no hay imagen */
.evento-image.no-image::after {
    content: '📅 EVENTO';
    font-size: 1.2rem;
    font-weight: 600;
    color: #666;
    font-family: 'Montserrat', sans-serif;
}

.evento-image.no-image::before {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    opacity: 0.05;
}

/* Error state para imágenes que no cargan */
.evento-image img.error {
    display: none;
}

.evento-image.has-error::after {
    content: '🖼️ Imagen no disponible';
    font-size: 1rem;
    font-weight: 500;
    color: #999;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    padding: 0 1rem;
}

.evento-image.has-error::before {
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    opacity: 1;
}

/* Efecto hover mejorado */
.evento-card:hover .evento-image img {
    transform: scale(1.05);
    filter: brightness(1.1) saturate(1.1);
}

/* Loading state */
.evento-image.loading::after {
    content: '⏳ Cargando...';
    font-size: 1rem;
    color: #666;
    font-family: 'Montserrat', sans-serif;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Estilos para la sección no-eventos */
.no-eventos {
    text-align: center;
    padding: var(--space-3xl);
    color: #666;
    grid-column: 1 / -1;
    background: var(--background-light);
    border-radius: var(--radius-lg);
    border: 2px dashed #ddd;
}

.no-eventos i {
    font-size: var(--font-size-5xl);
    margin-bottom: var(--space-lg);
    opacity: 0.3;
    color: #ccc;
}

.no-eventos h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-md);
    color: #999;
}

.no-eventos p {
    font-size: var(--font-size-base);
    color: #777;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .evento-image::after {
        font-size: 2rem;
    }
    
    .evento-image.no-image::after,
    .evento-image.has-error::after {
        font-size: 0.9rem;
    }
    
    .no-eventos {
        padding: var(--space-xl);
    }
    
    .no-eventos i {
        font-size: var(--font-size-3xl);
    }
}

@media (max-width: 480px) {
    .evento-image::after {
        font-size: 1.5rem;
    }
    
    .evento-image.no-image::after,
    .evento-image.has-error::after {
        font-size: 0.8rem;
    }
    
    .no-eventos {
        padding: var(--space-lg);
    }
    
    .no-eventos h3 {
        font-size: var(--font-size-lg);
    }
    
    .no-eventos p {
        font-size: var(--font-size-sm);
    }
}