/* gallery.css */

.bd-gallery-module {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.bd-gallery-container {
    max-width: var(--wide, 1200px); /* Nutzt eure globale Variable oder setzt einen Wert */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px; /* Für kleinere Bildschirme */
    padding-right: 15px;
}

.bd-gallery-module.alignfull .bd-gallery-container {
    max-width: none; /* Volle Breite bei alignfull */
    padding-left: 0;
    padding-right: 0;
}
/* Wenn alignwide, könnten wir hier auch eine spezifische max-width definieren, wenn --wide nicht passt */


.bd-gallery-headline,
.bd-gallery-subline,
.bd-gallery-teaser {
    text-align: center;
    margin-bottom: 1em;
}
.bd-gallery-headline {
    font-size: 2rem; /* Beispiel */
    margin-bottom: 0.5em;
}
.bd-gallery-subline {
    font-size: 1.2rem; /* Beispiel */
    color: #555;
    margin-top: -0.5em;
}
.bd-gallery-teaser {
    font-size: 1rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
}

.bd-gallery-grid-wrapper {
    margin-top: 1.5rem;
}

/* Masonry Grid Styling */
.masonry-grid {
    /* margin: -5px; Negative margin to counteract padding on items if desired */
}

/* Clearfix für den Masonry Container (obwohl Masonry das oft selbst handhabt) */
.masonry-grid:after {
    content: '';
    display: block;
    clear: both;
}

/* Das Grid-Sizer Element (unsichtbar, definiert Spaltenbreite) */
.grid-sizer {
    /* Breite wird per JS gesetzt basierend auf data-Attributen oder hier direkt */
}

.grid-item {
    /* float: left; Muss für Masonry nicht unbedingt gesetzt werden, Masonry positioniert absolut */
    margin-bottom: 10px; /* Vertikaler Abstand zwischen den Bildern */
    padding: 5px; /* Optionaler innerer Abstand, wenn margin negativ gesetzt wurde */
    box-sizing: border-box;
    overflow: hidden; /* Verhindert Layout-Sprünge beim Hover, falls Transformationen genutzt werden */
}

.grid-item img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px; /* Optional: abgerundete Ecken für Bilder */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-item a:hover img,
.grid-item a:focus img {
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.bd-gallery-caption {
    font-size: 0.85rem;
    color: #333;
    text-align: center;
    padding-top: 0.5em;
    display: block;
}

/* Spalten per CSS Variablen oder Klassen setzen,
   die von JS basierend auf data-Attributen gesteuert werden können.
   Hier ein Beispiel für direkte CSS-Definitionen: */

/* Desktop (default, z.B. 3 Spalten) */
.bd-gallery-grid-wrapper[data-columns-desktop="2"] .grid-sizer,
.bd-gallery-grid-wrapper[data-columns-desktop="2"] .grid-item { width: calc(100% / 2); }

.bd-gallery-grid-wrapper[data-columns-desktop="3"] .grid-sizer,
.bd-gallery-grid-wrapper[data-columns-desktop="3"] .grid-item { width: calc(100% / 3); }

.bd-gallery-grid-wrapper[data-columns-desktop="4"] .grid-sizer,
.bd-gallery-grid-wrapper[data-columns-desktop="4"] .grid-item { width: calc(100% / 4); }

.bd-gallery-grid-wrapper[data-columns-desktop="5"] .grid-sizer,
.bd-gallery-grid-wrapper[data-columns-desktop="5"] .grid-item { width: calc(100% / 5); }

.bd-gallery-grid-wrapper[data-columns-desktop="6"] .grid-sizer,
.bd_gallery_grid-wrapper[data-columns-desktop="6"] .grid-item { width: calc(100% / 6); }


/* Tablet (z.B. ab 768px) */
@media (max-width: 1024px) { /* Oder euer Tablet-Breakpoint */
    .bd-gallery-grid-wrapper[data-columns-tablet="1"] .grid-sizer,
    .bd-gallery-grid-wrapper[data-columns-tablet="1"] .grid-item { width: calc(100% / 1); }

    .bd-gallery-grid-wrapper[data-columns-tablet="2"] .grid-sizer,
    .bd-gallery-grid-wrapper[data-columns-tablet="2"] .grid-item { width: calc(100% / 2); }

    .bd-gallery-grid-wrapper[data-columns-tablet="3"] .grid-sizer,
    .bd-gallery-grid-wrapper[data-columns-tablet="3"] .grid-item { width: calc(100% / 3); }

    .bd-gallery-grid-wrapper[data-columns-tablet="4"] .grid-sizer,
    .bd-gallery-grid-wrapper[data-columns-tablet="4"] .grid-item { width: calc(100% / 4); }
}

/* Mobile (z.B. bis 767px) */
@media (max-width: 767px) { /* Oder euer Mobile-Breakpoint */
    .bd-gallery-grid-wrapper[data-columns-mobile="1"] .grid-sizer,
    .bd-gallery-grid-wrapper[data-columns-mobile="1"] .grid-item { width: calc(100% / 1); }

    .bd-gallery-grid-wrapper[data-columns-mobile="2"] .grid-sizer,
    .bd-gallery-grid-wrapper[data-columns-mobile="2"] .grid-item { width: calc(100% / 2); }
}

/* Styling für fsLightbox (kann angepasst werden, wenn nötig) */
/* Standardmäßig bringt fsLightbox eigene Styles mit. */
/* Wenn du eigene Buttons oder so willst, müsstest du das hier anpassen. */