/* AI Cinematic Event Image Replacements */
.event-image-concert {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
position: relative;
overflow: hidden;
}
.event-image-concert::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
background-size: cover;
background-position: center;
}
.event-image-theater {
background: linear-gradient(135deg, #6a0d0d 0%, #8b0000 50%, #4a0404 100%);
position: relative;
overflow: hidden;
}
.event-image-theater::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
background-size: cover;
background-position: center;
}
.event-image-sport {
background: linear-gradient(135deg, #0a4d0a 0%, #1a7d1a 50%, #2eb82e 100%);
position: relative;
overflow: hidden;
}
.event-image-sport::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
background-size: cover;
background-position: center;
}
.event-image-festival {
background: linear-gradient(135deg, #ff6b6b 0%, #feca57 33%, #48dbfb 66%, #ff9ff3 100%);
position: relative;
overflow: hidden;
}
.event-image-festival::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
background-size: cover;
background-position: center;
}
/* Fallback for broken images */
.event-image {
position: relative;
width: 100%;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.event-image.broken-image {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.event-image.broken-image::after {
content: '🎵';
position: absolute;
font-size: 4rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.1); opacity: 1; }
}
/* Cinematic overlay effects */
.event-image-cinematic {
position: relative;
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}
.event-image-cinematic::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% { left: -100%; }
100% { left: 100%; }
}
/* Responsive image handling */
@media (max-width: 768px) {
.event-image {
height: 180px;
}
.event-image.broken-image::after {
font-size: 3rem;
}
}