/* ----------------------------------------------------------
   PhotoSwipe5
   Basislayout
---------------------------------------------------------- */

.mz-pswp5 {
    --pswp5-thumb-min-width: 180px;
    --pswp5-gap: 12px;
    --pswp5-radius: 8px;
    --pswp5-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15);

    --pswp5-thumb-ratio: 4 / 3;
}

/* ----------------------------------------------------------
   Gallery Grid
---------------------------------------------------------- */

.mz-pswp5__grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, var(--pswp5-thumb-min-width)),
                1fr
            )
        );

    gap: var(--pswp5-gap);
}

/* ----------------------------------------------------------
   Items
---------------------------------------------------------- */

.mz-pswp5__item {
    margin: 0;
}

.mz-pswp5__item--hidden {
    display: none;
}

.mz-pswp5__link {
    display: block;
    text-decoration: none;
}

/* ----------------------------------------------------------
   Thumbnails
---------------------------------------------------------- */

.mz-pswp5__thumb {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: var(--pswp5-thumb-ratio);

    object-fit: cover;

    border-radius: var(--pswp5-radius);

    box-shadow: var(--pswp5-shadow);

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.mz-pswp5__link:hover .mz-pswp5__thumb,
.mz-pswp5__link:focus .mz-pswp5__thumb {
    transform: scale(1.03);
}

/* ----------------------------------------------------------
   Caption
---------------------------------------------------------- */

.mz-pswp5__caption {
    margin-top: 0.5rem;
    font-size: 0.92rem;
    line-height: 1.4;

    min-height: calc(var(--pswp5-caption-lines, 2) * 1.4em);

    display: -webkit-box;
    -webkit-line-clamp: var(--pswp5-caption-lines, 2);
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.mz-pswp5--single .mz-pswp5__caption,
.mz-pswp5--cover .mz-pswp5__caption {
    display: none;
}

/* ----------------------------------------------------------
   Single / Cover
---------------------------------------------------------- */

.mz-pswp5--single,
.mz-pswp5--cover {
	width: min(100%, var(--pswp5-single-width, 480px));
	max-width: var(--pswp5-single-width, 480px);
}

.mz-pswp5--single .mz-pswp5__item,
.mz-pswp5--cover .mz-pswp5__item {
    position: relative;
    width: 100%;
}

.mz-pswp5--single .mz-pswp5__start,
.mz-pswp5--cover .mz-pswp5__start {
    width: 100%;
}

.mz-pswp5--single .mz-pswp5__thumb,
.mz-pswp5--cover .mz-pswp5__thumb,
.mz-pswp5__thumb--cover-visual {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ----------------------------------------------------------
   Cover
   Das sichtbare Coverbild liegt außerhalb des Links.
   Der Link wird transparent darübergelegt.
---------------------------------------------------------- */

.mz-pswp5--cover .mz-pswp5__link {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 2;
    cursor: pointer;
}

.mz-pswp5__thumb--cover-visual {
    position: relative;
    z-index: 1;
}

/* ----------------------------------------------------------
   Fehlerausgabe
---------------------------------------------------------- */

.mz-pswp5-errors {
    margin: 1rem 0;
}

.mz-pswp5-error {
    padding: 0.75rem 1rem;
    border: 1px solid currentColor;
    border-radius: 0.5rem;
}

/* ----------------------------------------------------------
   Mobile
---------------------------------------------------------- */

@media (max-width: 550px) {

    .mz-pswp5 {
        --pswp5-thumb-min-width: 140px;
        --pswp5-gap: 8px;
    }

}

/* ----------------------------------------------------------
   PhotoSwipe5 Lightbox Caption
---------------------------------------------------------- */

.pswp--mz-pswp5 .pswp__custom-caption {
    position: absolute;
    left: 50%;
    bottom: 1rem;

    transform: translateX(-50%);

    width: min(92vw, 960px);
    max-height: min(25vh, 14rem);

    overflow-y: auto;

    padding: 0.8rem 1rem;

    font-size: 0.95rem;
    line-height: 1.45;

    color: #fff;
    background: rgba(0, 0, 0, 0.72);

    border-radius: 0.6rem;

    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);

    pointer-events: auto;
}

.pswp--mz-pswp5 .pswp__custom-caption:empty,
.pswp--mz-pswp5 .pswp__custom-caption[hidden] {
    display: none;
}

@media (max-width: 700px) {
    .pswp--mz-pswp5 .pswp__custom-caption {
        bottom: 0.5rem;
        width: calc(100vw - 1rem);
        max-height: 28vh;

        padding: 0.7rem 0.8rem;

        font-size: 0.9rem;
    }
}

/* ==========================================================
   Modifikator-Klassen
   ----------------------------------------------------------
   Diese Klassen dienen ausschließlich der individuellen
   Gestaltung über den dritten Plugin-Parameter:

   {PhotoSwipe5|Galerie|Klassen|Modus|Bild}

   Beispiel:
   {PhotoSwipe5|Galerie|pswp5-float-left pswp5-shadow|single|}

   Die Struktur orientiert sich an den übrigen modernen
   moziloCMS-Plugins.
========================================================== */


/* ----------------------------------------------------------
   Layout
   Positionierung, Größen, Float, Flex/Grid
---------------------------------------------------------- */


.mz-pswp5--single.pswp5-float-left,
.mz-pswp5--cover.pswp5-float-left {
    float: left;
    margin: 0 1.25rem 1rem 0;
}

.mz-pswp5--single.pswp5-float-right,
.mz-pswp5--cover.pswp5-float-right {
    float: right;
    margin: 0 0 1rem 1.25rem;
}

.mz-pswp5--gallery.pswp5-float-left,
.mz-pswp5--gallery.pswp5-float-right {
    float: none;
}

@media (max-width: 768px) {
    .mz-pswp5--single.pswp5-float-left,
    .mz-pswp5--single.pswp5-float-right,
    .mz-pswp5--cover.pswp5-float-left,
    .mz-pswp5--cover.pswp5-float-right {
        float: none;
        margin: 0 auto 1rem;
    }
}



/* ----------------------------------------------------------
   Frame
   Rahmen, Radius, Schatten
---------------------------------------------------------- */





/* ----------------------------------------------------------
   Theme
   Farben, Hover-Effekte, Animationen
---------------------------------------------------------- */





/* ----------------------------------------------------------
   Content
   Bilddarstellung, Beschriftungen, Spezialfälle
---------------------------------------------------------- */