/* Styling af triggerbilledet/eventillustrationen */
.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;
}

/* Lidt bevægelse ved hover, som giver brugeren en fornemmelse af klikbarhed */
.event-trigger:hover {
    transform: translateY(-4px) scale(1.02);
    opacity: 0.95;
}

/* Containeren der indeholder de tre eventbokse (starter skjult) */
.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;
}

/* Når containeren bliver synlig – udvider sig blødt, så boksene kan folde ud */
.event-boxes-container.event-visible {
    max-height: 2000px;
    opacity: 1;
}

/* Skjuler eventbokse igen, når man scroller væk eller klikker på triggerbilledet/eventillustrationen */
.event-hidden {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
}

/* Styling af hver enkelt eventboks */
.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;
}

/* Staggered animation, der får boksene til at dukke op forskudt for hinanden */
.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;
}

/* Animationen der styrer den glidende bevægelse ned */
@keyframes slideDown {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Hoverfarver hentes fra PHP via data-color */
.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;
}

/* Overskrift i eventboks */
.event-heading {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
    font-weight: 600;
    /* Farven kommer fra PHP, så hvert event får sin egen */
}

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

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

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