/*
 * EXT:atalanda_events - Listenlayout
 *
 * Alles andere kommt aus Bootstrap 5. Wer die Datei nicht braucht:
 * page.includeCSS.atalandaEvents >   im eigenen TypoScript.
 */

.atalanda-event--linked {
    cursor: pointer;
    transition: background-color .15s ease-in-out;
}

.atalanda-event--linked:hover,
.atalanda-event--linked:focus-within {
    background-color: var(--bs-secondary-bg);
}

.atalanda-event__title {
    transition: color .15s ease-in-out;
}

.atalanda-event--linked:hover .atalanda-event__title,
.atalanda-event--linked:focus-within .atalanda-event__title {
    color: var(--bs-primary);
}

.atalanda-event__link {
    color: var(--bs-primary);
    text-decoration: none;
}

.atalanda-event--linked:hover .atalanda-event__link,
.atalanda-event--linked:focus-within .atalanda-event__link {
    text-decoration: underline;
}

/* Sichtbarer Fokusring auf dem ganzen Element statt nur auf dem Link */
.atalanda-event--linked:focus-within {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.atalanda-event--linked .stretched-link:focus-visible {
    outline: none;
}

.atalanda-event__media {
    overflow: hidden;
}

.atalanda-event__media .atalanda-event__image {
    transition: transform .3s ease;
}

.atalanda-event--linked:hover .atalanda-event__media .atalanda-event__image {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .atalanda-event--linked,
    .atalanda-event__title,
    .atalanda-event__media .atalanda-event__image {
        transition: none;
    }

    .atalanda-event--linked:hover .atalanda-event__media .atalanda-event__image {
        transform: none;
    }
}