/* ==================================================
   BC-GALERIE
   Eigene Bildergalerie fuer Kollektionskarten: Raster aus Vorschaubildern
   plus Lightbox. Markup kommt aus module/gallery/show_gallery.inc.php,
   die Lightbox aus dem Block "bc-gallery" in bc.min.js.
   Seiten und Bausteine nutzen weiterhin Owl Carousel.
   ================================================== */

.bc-gallery {
    /* Standardmaessig aus. Die Galerie gehoert in den Bereich "Aktuelles",
       und nur dort wird sie unten wieder eingeschaltet.

       Das Feld laesst sich im Datensammler an jeder Kollektion einrichten;
       ohne diese Bremse taucht die Galerie ueberall auf, wo jemand eines
       anlegt - auf der Startseite, in Vereinen, in Terminen. Sichtbar wird
       sie nur da, wo sie auch gestaltet und geprueft ist. */
    display: none;

    /* 190px Mindestbreite: in der aufgeklappten Aktuelles-Karte (950px) ergibt
       das vier Bilder pro Reihe mit rund 230px - vorher waren es zehn mit 88px
       und damit zu klein zum Erkennen. */
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;

    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

/* Eingeschaltet nur im Bereich "Aktuelles": Uebersicht (body.aktuelles,
   /rathaus_burger/aktuelles/) und Artikelseite (body.aktuelles_a).

   In der Uebersicht bleibt das Feld zusaetzlich ueber
   components/col_aktuelles.css zugeklappt - die Liste soll nicht
   unterschiedlich weit aufspringen, je nachdem ob ein Artikel eine Galerie
   hat. Sichtbar ist die Galerie damit im vollen Artikel. Wer sie auch in der
   Karte will, nimmt dort die Regel zu .col-aktuelles_gallery heraus. */
body.aktuelles .bc-gallery,
body.aktuelles_a .bc-gallery {
    display: grid;
}

/* Sicherheitsnetz: Sollte die Galerie doch einmal in einen fremden Link
   eingepackt werden (etwa den Vollansicht-Link einer Kollektionskarte), bricht
   der Parser die aeussere Klammer auf und legt pro Ebene ein leeres <a> ab -
   im Raster erscheint das als leere erste Kachel. Nur echte Kacheln zaehlen. */
.bc-gallery > a:not(.bc-gallery__item) {
    display: none;
}

.bc-gallery__item {
    display: block;
    position: relative;

    overflow: hidden;
    border-radius: 6px;

    aspect-ratio: 4 / 3;
    background: rgba(0, 0, 0, 0.04);

    cursor: zoom-in;
    text-decoration: none;

    /* In der Aktuelles-Karte gilt global
       ".aktuelles .collection_list.col-aktuelles a { pointer-events: none }"
       (bc-style.min.css). Ohne dieses auto waeren die Vorschaubilder dort
       nicht anklickbar - dieselbe Gegenregel gibt es im Projekt schon fuer den
       Opener-Knopf und die Datei-Links. */
    pointer-events: auto !important;
}

.bc-gallery__item img {
    pointer-events: auto !important;
}

.bc-gallery__img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    transition: transform 0.25s ease;
}

.bc-gallery__item:hover .bc-gallery__img,
.bc-gallery__item:focus-visible .bc-gallery__img {
    transform: scale(1.06);
}

.bc-gallery__item:focus-visible {
    outline: 2px solid var(--primary-accent, #275b91);
    outline-offset: 2px;
}


/* ==================================================
   LIGHTBOX
   ================================================== */

.bc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgba(0, 0, 0, 0.88);

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.bc-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.bc-lightbox__figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.bc-lightbox__img {
    max-width: 100%;
    max-height: calc(100vh - 140px);

    width: auto;
    height: auto;

    border-radius: 4px;
    background: #fff;
}

.bc-lightbox__caption {
    max-width: 70ch;

    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
}

.bc-lightbox__counter {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

/* Bedienelemente */
.bc-lightbox__btn {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);

    color: #fff;
    font-size: 26px;
    line-height: 1;

    cursor: pointer;
    transition: background 0.2s ease;
}

.bc-lightbox__btn:hover,
.bc-lightbox__btn:focus-visible {
    background: rgba(255, 255, 255, 0.3);
}

.bc-lightbox__btn--close {
    top: 16px;
    right: 16px;
    font-size: 22px;
}

.bc-lightbox__btn--prev {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.bc-lightbox__btn--next {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

/* Bei nur einem Bild braucht es keine Pfeile */
.bc-lightbox[data-single="true"] .bc-lightbox__btn--prev,
.bc-lightbox[data-single="true"] .bc-lightbox__btn--next,
.bc-lightbox[data-single="true"] .bc-lightbox__counter {
    display: none;
}

/* Scrollen der Seite unterbinden, solange die Lightbox offen ist */
body.bc-lightbox-open {
    overflow: hidden;
}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 570px) {

    .bc-gallery {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 6px;
    }

    .bc-lightbox {
        padding: 12px;
    }

    .bc-lightbox__img {
        max-height: calc(100vh - 120px);
    }

    .bc-lightbox__btn {
        width: 40px;
        height: 40px;
    }

    .bc-lightbox__btn--prev {
        left: 8px;
    }

    .bc-lightbox__btn--next {
        right: 8px;
    }
}