/* =====================================================
   KIDS AM DÖNBERG E.V.
   TERMINE
   ===================================================== */


/* =====================================================
   TERMINSEKTION
   ===================================================== */

.events {
    background-color: var(--white);
}


/* =====================================================
   TERMINLISTE
   ===================================================== */

.event-list {
    display: grid;
    gap: 20px;

    margin-top: 28px;
}


/* =====================================================
   TERMINKARTE
   ===================================================== */

.event-card {
    overflow: hidden;

    background-color: var(--background-light);

    border-radius: 24px;
}


/* Datum */

.event-date {
    padding: 18px 22px;

    color: var(--white);
    background-color: var(--blue);

    font-size: 0.9rem;
    font-weight: 700;
}


/* Inhalt */

.event-content {
    padding: 24px 22px 26px;
}

.event-content h3 {
    margin: 0 0 10px;

    color: var(--blue);

    font-size: 1.35rem;
    line-height: 1.2;
}

.event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin: 0 0 16px;

    color: var(--green);

    font-size: 0.9rem;
    font-weight: 700;
}

.event-description {
    margin: 0 0 18px;

    line-height: 1.6;
}

.event-description:last-child {
    margin-bottom: 0;
}


/* Link */

.event-link {
    color: var(--blue);

    font-weight: 700;
    text-decoration: none;
}

.event-link:hover {
    text-decoration: underline;
}

.event-link:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}


/* =====================================================
   KEINE TERMINE
   ===================================================== */

.events-empty {
    margin: 28px 0 0;

    line-height: 1.6;
}


/* =====================================================
   VERGANGENE TERMINE
   ===================================================== */

.events-past .event-card {
    background-color: var(--white);
}


/* =====================================================
   TABLET
   ===================================================== */

@media (min-width: 768px) {

    .event-card {
        display: grid;
        grid-template-columns: 190px 1fr;
    }

    .event-date {
        display: flex;
        align-items: center;

        padding: 28px;
    }

    .event-content {
        padding: 28px 32px;
    }

    .event-content h3 {
        font-size: 1.5rem;
    }

}