/* Placeholder Images CSS */

/* Banner Placeholder */
.hero-placeholder {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.hero-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.3) 15%, transparent 15%),
        radial-gradient(circle at 80% 70%, rgba(255, 165, 0, 0.3) 10%, transparent 10%),
        radial-gradient(circle at 60% 20%, rgba(138, 43, 226, 0.3) 8%, transparent 8%),
        radial-gradient(circle at 30% 80%, rgba(255, 20, 147, 0.3) 12%, transparent 12%),
        radial-gradient(circle at 90% 40%, rgba(0, 255, 127, 0.3) 6%, transparent 6%);
    animation: sparkle 3s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Monthly Thumbnail Placeholders */
.month-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 150px;
    border-radius: 12px;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.month-thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.8;
    z-index: 1;
}

.month-thumbnail span {
    position: relative;
    z-index: 2;
}

/* January - Winter/Snow */
.january-thumb {
    background: linear-gradient(135deg, #74b9ff, #0984e3);
}
.january-thumb::before {
    background: 
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.8) 3%, transparent 3%),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.6) 2%, transparent 2%),
        radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.7) 2.5%, transparent 2.5%),
        radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.5) 1.5%, transparent 1.5%);
}

/* February - Valentine/Hearts */
.february-thumb {
    background: linear-gradient(135deg, #fd79a8, #e84393);
}
.february-thumb::before {
    background: 
        radial-gradient(circle at 25% 25%, rgba(255, 182, 193, 0.8) 8%, transparent 8%),
        radial-gradient(circle at 75% 75%, rgba(255, 105, 180, 0.6) 6%, transparent 6%),
        radial-gradient(circle at 60% 30%, rgba(255, 20, 147, 0.7) 4%, transparent 4%);
}

/* March - Spring/Clover */
.march-thumb {
    background: linear-gradient(135deg, #00b894, #00a085);
}
.march-thumb::before {
    background: 
        radial-gradient(circle at 30% 40%, rgba(144, 238, 144, 0.8) 10%, transparent 10%),
        radial-gradient(circle at 70% 60%, rgba(50, 205, 50, 0.6) 8%, transparent 8%),
        radial-gradient(circle at 20% 80%, rgba(34, 139, 34, 0.7) 6%, transparent 6%);
}

/* April - Easter/Spring */
.april-thumb {
    background: linear-gradient(135deg, #fdcb6e, #e17055);
}
.april-thumb::before {
    background: 
        radial-gradient(circle at 40% 30%, rgba(255, 239, 213, 0.8) 12%, transparent 12%),
        radial-gradient(circle at 60% 70%, rgba(255, 218, 185, 0.6) 10%, transparent 10%),
        radial-gradient(circle at 80% 20%, rgba(255, 192, 203, 0.7) 8%, transparent 8%);
}

/* May - Flowers/Spring */
.may-thumb {
    background: linear-gradient(135deg, #fd79a8, #fdcb6e);
}
.may-thumb::before {
    background: 
        radial-gradient(circle at 25% 50%, rgba(255, 182, 193, 0.8) 15%, transparent 15%),
        radial-gradient(circle at 75% 30%, rgba(255, 218, 185, 0.6) 12%, transparent 12%),
        radial-gradient(circle at 50% 80%, rgba(255, 239, 213, 0.7) 10%, transparent 10%);
}

/* June - Summer/Beach */
.june-thumb {
    background: linear-gradient(135deg, #fdcb6e, #e17055);
}
.june-thumb::before {
    background: 
        radial-gradient(circle at 30% 20%, rgba(255, 255, 0, 0.8) 20%, transparent 20%),
        radial-gradient(circle at 80% 80%, rgba(255, 165, 0, 0.6) 15%, transparent 15%),
        radial-gradient(circle at 60% 50%, rgba(255, 215, 0, 0.4) 10%, transparent 10%);
}

/* July - Fireworks/Independence */
.july-thumb {
    background: linear-gradient(135deg, #fd79a8, #6c5ce7);
}
.july-thumb::before {
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 0, 0, 0.8) 8%, transparent 8%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.6) 6%, transparent 6%),
        radial-gradient(circle at 60% 70%, rgba(0, 0, 255, 0.7) 7%, transparent 7%);
}

/* August - Back to School */
.august-thumb {
    background: linear-gradient(135deg, #a29bfe, #6c5ce7);
}
.august-thumb::before {
    background: 
        radial-gradient(circle at 40% 40%, rgba(255, 215, 0, 0.8) 12%, transparent 12%),
        radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.6) 8%, transparent 8%),
        radial-gradient(circle at 30% 80%, rgba(255, 165, 0, 0.7) 10%, transparent 10%);
}

/* September - Autumn/Leaves */
.september-thumb {
    background: linear-gradient(135deg, #e17055, #d63031);
}
.september-thumb::before {
    background: 
        radial-gradient(circle at 35% 35%, rgba(255, 140, 0, 0.8) 15%, transparent 15%),
        radial-gradient(circle at 75% 60%, rgba(255, 69, 0, 0.6) 12%, transparent 12%),
        radial-gradient(circle at 20% 70%, rgba(139, 69, 19, 0.7) 10%, transparent 10%);
}

/* October - Halloween */
.october-thumb {
    background: linear-gradient(135deg, #e17055, #2d3436);
}
.october-thumb::before {
    background: 
        radial-gradient(circle at 50% 30%, rgba(255, 140, 0, 0.8) 18%, transparent 18%),
        radial-gradient(circle at 30% 70%, rgba(255, 69, 0, 0.6) 14%, transparent 14%),
        radial-gradient(circle at 80% 80%, rgba(139, 0, 139, 0.7) 12%, transparent 12%);
}

/* November - Thanksgiving */
.november-thumb {
    background: linear-gradient(135deg, #e17055, #a29bfe);
}
.november-thumb::before {
    background: 
        radial-gradient(circle at 40% 40%, rgba(165, 42, 42, 0.8) 16%, transparent 16%),
        radial-gradient(circle at 80% 30%, rgba(255, 140, 0, 0.6) 12%, transparent 12%),
        radial-gradient(circle at 20% 80%, rgba(139, 69, 19, 0.7) 14%, transparent 14%);
}

/* December - Christmas/Winter */
.december-thumb {
    background: linear-gradient(135deg, #00b894, #d63031);
}
.december-thumb::before {
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 8%, transparent 8%),
        radial-gradient(circle at 70% 70%, rgba(255, 215, 0, 0.6) 6%, transparent 6%),
        radial-gradient(circle at 50% 20%, rgba(255, 0, 0, 0.7) 10%, transparent 10%),
        radial-gradient(circle at 20% 80%, rgba(34, 139, 34, 0.5) 12%, transparent 12%);
}

/* Hover Effects */
.month-thumbnail:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.month-thumbnail:hover::before {
    animation: shimmer 1s ease-in-out;
}

@keyframes shimmer {
    0% { opacity: 0.8; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}