/* Trigger image styling */
.event-trigger {
    display: inline-block;
    max-width: 1500px;
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-radius: 8px;
}

.event-trigger:hover {
    transform: translateY(-4px) scale(1.02);
    opacity: 0.95;
}

/* Container for event boxes */
.event-boxes-container {
    margin-top: 30px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s ease, opacity 0.5s ease, margin-top 0.6s ease;
}

.event-boxes-container.event-visible {
    max-height: 2000px;
    opacity: 1;
}

.event-hidden {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
}

/* Individual event box */
.event-box {
    background: #ffffff;
    border: 2px solid #e0e0e0;
    padding: 25px;
    margin-bottom: 20px;
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease, border-color 0.3s ease;
}

/* Stagger animation for boxes */
.event-visible .event-box:nth-child(1) {
    animation: slideDown 0.6s ease forwards 0.1s;
}

.event-visible .event-box:nth-child(2) {
    animation: slideDown 0.6s ease forwards 0.3s;
}

.event-visible .event-box:nth-child(3) {
    animation: slideDown 0.6s ease forwards 0.5s;
}

@keyframes slideDown {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Hover effect uses data-color attribute */
.event-box[data-color="#26376B"]:hover {
    border-color: #26376B;
}

.event-box[data-color="#8bc8e5"]:hover {
    border-color: #8bc8e5;
}

.event-box[data-color="#b2d1d6"]:hover {
    border-color: #b2d1d6;
}

/* Event heading */
.event-heading {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
    font-weight: 600;
    /* Color set inline per event */
}

/* Event date */
.event-date {
    margin: 0 0 15px 0;
    font-size: 1rem;
    font-weight: 500;
    /* Color set inline per event */
}

/* Event description */
.event-description {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #000000;
}

/* Wrapper */
.event-wrapper {
    max-width: 100%;
    margin-bottom: 40px;
}