/* Image Placeholders with CSS */

/* Default placeholder styling */
img[src*="default-"], img[onerror] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    display: block;
}

img[src*="default-"]::before, img[onerror]::before {
    content: '📷';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    opacity: 0.3;
}

/* Hero Background with romantic pattern */
.hero-section {
    background: 
        linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%),
        radial-gradient(circle at 20% 50%, rgba(255, 182, 193, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 105, 180, 0.2) 0%, transparent 50%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill="rgba(255,255,255,0.03)"><path d="M50 20 Q35 5 20 20 T20 40 L50 70 L80 40 Q80 20 65 20 T50 20 Z"/></g></svg>') !important;
    background-size: cover, cover, cover, 150px 150px;
    background-position: center, center, center, center;
}

/* Blog Images */
.blog-image, .blog-card-image img {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    min-height: 250px;
    position: relative;
}

.blog-card-image img::after {
    content: '📖';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    opacity: 0.2;
    color: white;
}

/* Event Images */
.event-image, .event-card-modern img {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    min-height: 250px;
}

/* Premium Illustration */
.premium-illustration {
    content: '';
    background: 
        linear-gradient(135deg, #f6d365 0%, #fda085 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><circle cx="250" cy="150" r="80" fill="rgba(255,255,255,0.3)"/><circle cx="200" cy="250" r="60" fill="rgba(255,255,255,0.2)"/><circle cx="300" cy="250" r="60" fill="rgba(255,255,255,0.2)"/><path d="M250 350 L150 450 L350 450 Z" fill="rgba(255,255,255,0.25)"/></svg>');
    background-size: cover;
    min-height: 400px;
    display: block;
    border-radius: 20px;
}

/* Profile Images */
.profile-avatar, .testimonial-author img {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* User avatars */
img[src*="user"], img[src*="avatar"] {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}

/* CSS-based placeholder images */
.img-placeholder {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    min-height: 300px;
    border-radius: 15px;
}

.img-placeholder-blog {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.img-placeholder-event {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.img-placeholder-premium {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}

.img-placeholder-avatar {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    font-size: 4rem;
}