/*
 * Anpassungen der GLightbox-Oberflaeche an das Theme.
 *
 * Diese Datei wird ueber wp_register_style() als abhaengig von glightbox.min.css
 * eingetragen. WordPress gibt Abhaengigkeiten davor aus, dieses Stylesheet steht also
 * garantiert dahinter – deshalb genuegt die normale Kaskade und keine Regel braucht
 * !important. Sie wird gemeinsam mit der Lightbox nur auf Seiten mit Galerie geladen.
 */

.glightbox-container {
    background: #5F5F59;
}

.goverlay {
    background: #5F5F59;
}

.glightbox-clean .gslide-media {
    box-shadow: none;
}

/* Schliessen-Button und Pfeile sollen neben dem Bild liegen, nicht darauf. Ueber padding
   liesse sich das nicht loesen: Padding waechst die Box mit, das Bild reicht dann trotzdem
   bis an den Rand. Stattdessen wird die aeussere Abmessung begrenzt. */
.glightbox-clean .gslide-image img {
    max-width: calc(100vw - 3rem);
    max-height: calc(100vh - 5rem);

    @media (min-width: 768px) {
        & {
            max-width: calc(100vw - 12rem);
            max-height: calc(100vh - 7rem);
        }
    }
}

/* GLightbox setzt die Button-Hintergruende ueber .glightbox-clean .gclose (0,2,0).
   Die Overrides tragen dieselbe Spezifitaet und gewinnen ueber die spaetere Position. */
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
    background: transparent;
    padding: 0;
}

.glightbox-clean .gclose:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover {
    background: transparent;
}

.glightbox-clean .gclose,
.glightbox-clean .gclose:hover {
    opacity: 1;
}

.glightbox-clean .gclose svg {
    width: 20px;
    height: auto;
}

.glightbox-clean .gnext svg,
.glightbox-clean .gprev svg {
    width: 26px;
    height: auto;
}