/* ============================================================
   Events-Archiv  –  bja-events-archiv
   ============================================================ */

/* ============================================================
   GEMEINSAME KACHEL-DARSTELLUNG (alle Ansichten)
   ------------------------------------------------------------
   Eine Karten-Optik fuer Liste, Gruppierte Liste, Raster und
   Kalender-Popup. Der em_event_output-Filter erzeugt in allen
   vier Faellen dasselbe Markup `.em-item .bja-event-card`, und
   `.em.pixelbones` liegt in allen vier Containern (Listen-,
   Grouped-, Grid-Container sowie Modal-Wrapper). Deshalb reicht
   ein gemeinsamer Scope.
   NICHT betroffen: der Fokus-Slider (kein .em-item) und die
   Kalenderzellen (native Pills, s. em_event_output-Guard).
   Die ansichts-spezifischen Layouts (Spalten, Zellen-Reset,
   Modal-Abstaende) stehen weiter unten je Ansicht.
   ============================================================ */

.em.pixelbones .em-item .bja-event-card.link {
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.em.pixelbones .em-item a :hover {
    color: var(--e-global-color-text) !important;
}

.em.pixelbones .em-item .bja-event-card.link .bja-event-card.row {
    height: 100%;
    width: 100%;
    background: var(--e-global-color-3e57056);
    border-radius: 10px;
    padding: 20px;
    margin: 0;
    position: relative;
}

.em.pixelbones .em-item .bja-event-card.link .bja-event-card.row:hover {
    background: var(--e-global-color-3e57056) !important;
    box-shadow: var(--box-shadow-kachel);
}

.em.pixelbones .em-item .bja-event-card .bja-event-card.date-highlight {
    padding: 0;
    margin-right: auto;
}

.em.pixelbones .em-item .bja-event-card .bja-event-card.date-highlight .day {
    font-size: 11px;
    color: var(--e-global-color-text);
    margin: 0 !important;
    text-align: center;
    text-transform: uppercase;
}

.em.pixelbones .em-item .bja-event-card .bja-event-card.date-highlight .day-single {
    font-size: 24px;
    color: var(--e-global-color-text);
    margin: 0 !important;
    text-align: center;
}

.em.pixelbones .em-item .bja-event-card .bja-event-card.date-highlight .highlight-wrapper {
    background: var(--FBBA00-Default);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: 10px;
}

.em.pixelbones .em-item .bja-event-card .bja-event-card.date-highlight .highlight-wrapper:hover {
    background: var(--FBBA00-Default) !important;
}

.em.pixelbones .em-item .bja-event-card .bja-event-card__body {
    margin-left: auto;
    margin-right: auto;
}

.em.pixelbones .em-item .bja-event-card .bja-event-card__body .bja-event-card__date {
    font-size: 14px;
    color: var(--grundfarbe_veranstaltungen);
    margin-bottom: 25px;
    text-transform: uppercase;
}

.em.pixelbones .em-item .bja-event-card .bja-event-card__body .bja-event-card__date:hover {
    color: var(--grundfarbe_veranstaltungen) !important;
}

.em.pixelbones .em-item .bja-event-card .bja-event-card__body .bja-event-card__title {
    font-size: 18px;
    font-weight: 500;
    color: var(--e-global-color-text);
    margin-bottom: 0 !important;
}

.em.pixelbones .em-item:hover > .bja-event-card.link .bja-event-card__title {
    text-decoration: underline;
}

.em.pixelbones .em-item .bja-event-card .bja-event-card__body .bja-event-card__excerpt {
    font-size: 14px;
    color: var(--e-global-color-text);
    margin-bottom: 25px;
}

.em.pixelbones .em-item .bja-event-card .bja-event-card__body .location-wrapper {
    margin: 0;
    gap: 5px;
}

.em.pixelbones .em-item .bja-event-card .bja-event-card__body .location-wrapper .location-dot {
    padding: 0;
}

.em.pixelbones .em-item .bja-event-card .bja-event-card__body .location-wrapper .location-dot img {
    width: 34px;
    height: 34px;
}

.em.pixelbones .em-item .bja-event-card .bja-event-card__body .location-wrapper .bja-event-card__location {
    font-size: 14px;
    color: var(--e-global-color-text);
    margin: 0;
    padding: 0;
}

.em.pixelbones .em-item .bja-event-card .bja-event-card__body .location-wrapper .bja-event-card__location:hover {
    color: var(--e-global-color-text) !important;
}

.em.pixelbones .em-item .bja-event-card .bja-event-card__image {
    margin-left: auto;
}

/* Gemeinsamer Mobile-Umbruch (<= 577px) */
@media (max-width: 577px) {
    .em.pixelbones .em-item .bja-event-card .bja-event-card__body {
        order: 1;
        margin: unset;
    }

    .em.pixelbones .em-item .bja-event-card .bja-event-card.date-highlight {
        margin: 0;
    }

    .em.pixelbones .em-item .bja-event-card .bja-event-card.date-highlight .day,
    .em.pixelbones .em-item .bja-event-card .bja-event-card.date-highlight .day-single {
        display: none;
    }

    .em.pixelbones .em-item .bja-event-card .bja-event-card.date-highlight .highlight-wrapper {
        margin: 0;
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .em.pixelbones .em-item .bja-event-card .bja-event-card__image {
        margin-left: unset;
    }

    .em.pixelbones .em-item .bja-event-card .bja-event-card__body .location-wrapper .location-dot img {
        width: 20px;
        height: 20px;
    }

    .em.pixelbones .em-item .bja-event-card.link .bja-event-card.row {
        padding: 10px 0;
    }

    .em.pixelbones .em-item .bja-event-card .bja-event-card__body .bja-event-card__date,
    .em.pixelbones .em-item .bja-event-card .bja-event-card__body .bja-event-card__excerpt {
        margin-bottom: 10px !important;
    }
}

/* ============================================================
   Kachel-Bild (gemeinsam) – wie Background-Image, aber
   crawler-sichtbares <img>
   ============================================================ */
.bja-event-card__image {
    overflow: hidden;
}

.bja-event-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 5px;
}

/* Einheitliche Bildform (hochkant 3/4) ab Desktop.
   Mobile bleibt bei object-fit: contain (s. Media-Query unten). */
@media (min-width: 578px) {
    .bja-event-card__image {
        aspect-ratio: 3 / 4;
        align-self: flex-start;
        height: auto;
    }
}

@media (max-width: 577px) {
    .bja-event-card__image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* ============================================================
   Fokus-Veranstaltungen – Swiper-Slider (eigene Optik)
   ============================================================ */
.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus {
    background: #E2E2E2;
    border-radius: 10px;
    margin-top: 30px;
    margin-bottom: 60px;
}

.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .bja-fokus-swiper {
    padding: 20px;
}

.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .swiper-wrapper {
    padding-bottom: 30px;
}

/* Swiper-Buttons */
.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: 0;
    visibility: hidden;
}

.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .swiper-button-next {
    right: 0;
}


.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .swiper-button-prev {
    left: 0;
}

.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .swiper-button-prev,
.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .swiper-button-next {
    width: 32px;
    height: 82px;
    background: var(--e-global-color-3e57056);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E2E2E2;
}

/* Swiper Pagination */
.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .swiper-pagination {
    bottom: 20px;
}

.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .swiper-button-prev::after,
.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .swiper-button-next::after {
    font-size: 21px;
    color: var(--e-global-color-text);
}

.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .swiper-pagination .swiper-pagination-bullet {
    width: 30px;
    height: 2px;
    background: var(--e-global-color-text);
    opacity: 0.5;
    border-radius: 0;
}

.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
}

/* Fokus-Swiper: alle Slides gleich hoch */
.bja-fokus-swiper .swiper-wrapper {
    align-items: stretch;
}

.bja-fokus-swiper .swiper-slide {
    height: auto;
}

.bja-fokus-swiper .swiper-slide>a.bja-event-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.bja-fokus-swiper .swiper-slide .bja-event-card .row {
    flex: 1;
    height: 100%;
}

/* Single Card */
.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .bja-fokus-swiper .swiper-slide .bja-event-card.bja-event-card--fokus {
    background: var(--e-global-color-3e57056);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .bja-fokus-swiper .swiper-slide .bja-event-card.bja-event-card--fokus:hover {
    box-shadow: var(--box-shadow-kachel);
}

.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .bja-event-card .bja-event-card__date {
    font-size: 14px;
    color: var(--grundfarbe_veranstaltungen);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .bja-event-card .bja-event-card__title {
    font-size: 18px;
    font-weight: 500;
    color: var(--e-global-color-text);
    margin-bottom: 0;
}

.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .bja-event-card .bja-event-card__excerpt {
    font-size: 14px;
    color: var(--e-global-color-text);
    margin-bottom: 10px;
}

.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .bja-event-card .location-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
    height: fit-content;
    margin: 0;
}

.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .bja-event-card .location-wrapper .location-dot,
.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .bja-event-card .location-wrapper .bja-event-card__location {
    padding: 0;
}

.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .bja-event-card .location-wrapper .bja-event-card__location {
    font-size: 14px;
    color: var(--e-global-color-text);
    margin: 0;
}

/* Hightlight-Icon in Single Card */
.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .bja-event-card .bja-highlight-star {
    padding: 0;
}

.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .bja-event-card .bja-highlight-star .hightlight-wrapper {
    background: var(--FBBA00-Default);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .bja-event-card.bja-event-card--fokus:hover .bja-event-card__title {
    text-decoration: underline;
}

@media (max-width: 577px) {
    .bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .bja-event-card .bja-highlight-star {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .bja-events-archiv__sektion.bja-events-archiv__sektion--fokus .bja-fokus-swiper .swiper-slide .bja-event-card.bja-event-card--fokus {
        padding: 10px;
    }
}

/* ============================================================
   ANSICHTS-SPEZIFISCHE LAYOUTS
   (nur Spalten/Container – Kachel-Optik kommt vom Block oben)
   ============================================================ */

/* --- Liste: 1 Spalte, ab 1200px maximal 2 --- */
.bja-events-archiv__sektion--alle .em.pixelbones {
    grid-template-columns: 1fr !important;
    gap: 15px;
}

@media (min-width: 1200px) {
    .bja-events-archiv__sektion--alle .em.pixelbones {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.bja-events-archiv__sektion--alle .em.pixelbones .em-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    border: none;
}

/* --- Gruppierte Liste: Zellen-Layout ---
   Monats-Header (<h2>) und einspaltiges EM-Layout bleiben nativ. */
.em-events-list-grouped .em-item {
    grid-template-columns: minmax(0, 1fr) 1fr !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

@media (max-width: 767px) {
    .em-events-list-grouped .em-item {
        grid-template-columns: 1fr !important;
    }
}

.em-events-list-grouped .em-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    border: none;
}

.em-view-container .em-events-list-grouped h2{
    font-size: 28px !important;
    font-style: normal;
    font-weight: 700 !important;
}

/* --- Raster (Grid): 1 Spalte, ab 1200px maximal 2 ---
   EM-Grid-Defaults (auto-fill-Spalten, justify-items:center,
   Zell-Schatten) werden auf Listen-Verhalten zurueckgesetzt
   (hoehere Spezifitaet .em-events-grid.em-grid > div.em-item). */
.em-events-grid.em-grid {
    grid-template-columns: 1fr !important;
    gap: 15px;
    justify-items: stretch;
    align-items: stretch;
}

@media (min-width: 1200px) {
    .em-events-grid.em-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.em-events-grid.em-grid > div.em-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 475px !important;
    padding: 0;
    border: none;
    box-shadow: none;
}

.em-events-grid.em-grid > div.em-item:hover {
    box-shadow: none;
}

/* --- Kalender: nur die Popup-Karten ---
   Monats-Raster und Zellen-Pills bleiben nativ. In den Popups
   (Tages-/Event-Modal) tragen die Karten die gemeinsame Optik;
   hier nur Karten-Abstand im Modal und die Modal-Titelzeile. */
.em-calendar-preview .em-modal-popup header .em-modal-title a {
    text-decoration: none;
}

.em-calendar-preview .em-modal-popup header .em-modal-title a:hover {
    text-decoration: underline;
}

.em-calendar-preview .em-modal-content .em-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    border: none;
    margin: 0 0 15px 0;
}

.em-calendar-preview .em-modal-content .em-item:last-child {
    margin-bottom: 0;
}