/* Event Series View Styles - NOW MATCHES main calendar structure */

/* ===== SERIES HEADER (unique to series view) ===== */
.event-series-header {
    margin-bottom: 25px;
    text-align: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}

.event-series-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

.event-series-image {
    text-align: center;
    margin-bottom: 20px;
}

.event-series-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ===== MAIN CALENDAR STRUCTURE (reuses main calendar styles) ===== */
/* The .event-calendar, .event-month-section, .event-list structure now matches exactly */
/* All the main calendar styles from template-main-view.css apply automatically */

/* ===== SERIES-SPECIFIC OVERRIDES ===== */
/* Only add styles here that need to be different from main calendar */

.event-series-empty {
    text-align: center;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    margin: 20px 0;
}

/* ===== MOBILE STYLES ===== */
@media (max-width: 768px) {
    .event-series-header {
        padding: 10px;
        margin-bottom: 15px;
    }
    
    .event-series-title {
        font-size: 22px;
    }
    
    /* All other mobile styles inherited from main calendar CSS */
}