/* Eigene Gestaltungsvariatnen = Modifikatorklassen = CSS-klassen */


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

{PhotoSwipe5|Galerie|Modifikator-Klassen|Modus|Bilddatei}

Diese Datei enthält Vorschläge für Modifikatorklassen,
welche nicht in der plugin.css sind. Es sind Anregungen.

Bei Bedarf den entsprechenden Abschnitt in die pswp5-custom.css einfügen.

Hinweis:
- pswp5-custom.css wird bei Existenz automatisch eingebunden
- wird nicht mit ausgeliefert; bleibt also bei Updates erhalten
- muß nach Plugininstallation erstellt werden
- braucht man nur im Falle individueller CSS-Anpassungen

========================================================== */

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

/* Einzelbild oder Cover über die gesamte verfügbare Breite 
Parameter 2: pswp5-layout-full 
*/
.mz-pswp5--single.pswp5-layout-full,
.mz-pswp5--cover.pswp5-layout-full {
  --pswp5-single-width: 100%;
  width: 100%;
  max-width: none;
}

/* Größere Vorschaubilder in der Standardgalerie 
Parameter 2: pswp5-layout-thumbs-gross
*/
.mz-pswp5.pswp5-layout-thumbs-gross {
  --pswp5-thumb-width: 360px;
}

.pswp5-layout-justified-gross { 
  --pswp5-justified-row-height: 280px; 
}

.pswp5-layout-masonry-breit { 
  --pswp5-masonry-column-width: 300px; 
}

.pswp5-layout-kompakt { 
  --pswp5-layout-gap: 2px; 
}

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

/* Vorschaubilder ohne Rundung der Ecken
Parameter 2: pswp5-frame-square
*/
.pswp5-frame-square .mz-pswp5__thumb,
.pswp5-frame-square .mz-pswp5__thumb--cover-visual {
  border-radius: 0;
}

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

/* Vorschaubilder Variante hell
Parameter 2: pswp5-theme-light
*/
.mz-pswp5.pswp5-theme-light {
  padding: 0.75rem;
  color: #222;
  background: #f5f5f5;
  border-radius: calc(var(--pswp5-radius) + 0.25rem);
}

.mz-pswp5.pswp5-theme-light .mz-pswp5__caption {
  color: inherit;
}

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

/* Quadratische Vorschaubilder nicht beschneiden 
Parameter 2: pswp5-content-contain
*/
.mz-pswp5--single.pswp5-content-original .mz-pswp5__thumb,
.mz-pswp5--cover.pswp5-content-original .mz-pswp5__thumb--cover-visual {
    aspect-ratio: auto;
    object-fit: contain;
}

.mz-pswp5--cover.pswp5-content-contain .mz-pswp5__thumb--cover-visual {
    aspect-ratio: var(--pswp5-cover-ratio, 4 / 3);
    object-fit: contain;
    background: #f2f2f2;
}

/* Schlankeres Hochformat */
.mz-pswp5--gallery.pswp5-content-portrait-slim {
    --pswp5-thumb-ratio: 2 / 3;
}

/* Breitbild */
.mz-pswp5--gallery.pswp5-content-wide {
    --pswp5-thumb-ratio: 16 / 9;
}

/* Klassisches Fotoformat */
.mz-pswp5--gallery.pswp5-content-classic {
    --pswp5-thumb-ratio: 4 / 3;
}

/* Quadratisch */
.mz-pswp5--gallery.pswp5-content-square {
    --pswp5-thumb-ratio: 1 / 1;
}