/* 
 * EDELWERK PERFECT CINEMATIC MASONRY
 * 100% UNBESCHNITTEN • ABSOLUT KEINE LÖCHER • KEIN JAVASCRIPT-CRASH
 */

/* 1. Haupt-Rahmen auf Spaltenfluss umstellen (Pinterest-Mosaik) */
.ngg-galleryoverview {
    display: block !important;
    column-count: 4 !important; /* Exakt 4 Spalten auf dem PC-Monitor */
    column-gap: 16px !important; /* Perfekter, gleichmäßiger Abstand zwischen den Spalten */
    width: 100% !important;
    margin: 25px auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 2. Einzelne Bildboxen flexibel untereinander fließen lassen */
.ngg-galleryoverview .ngg-gallery-thumbnail-box {
    display: inline-block !important; /* Wichtig: Verhindert das künstliche Strecken über die ganze Breite */
    float: none !important;
    width: 100% !important; /* Füllt die zugewiesene Spalte perfekt aus */
    margin: 0 0 16px 0 !important; /* Exakt 16px Abstand nach unten zum nächsten Bild */
    padding: 0 !important;
    break-inside: avoid !important; /* Verhindert, dass Bilder unschön am Spaltenrand zerreißen */
    border-radius: 6px !important;
    overflow: hidden !important; /* Sichert den reinen, internen Bild-Zoom beim Hovern */
    background: transparent !important;
    
    /* Weinroter Edelwerk-Schatten */
    box-shadow: 0 5px 20px rgba(128, 0, 32, 0.18) !important;
    transition: box-shadow 0.4s ease, transform 0.3s ease !important;
}

.ngg-galleryoverview .ngg-gallery-thumbnail,
.ngg-galleryoverview .ngg-gallery-thumbnail a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* 3. Originale Proportionen garantieren – ABSOLUT KEIN BESCHNITT, KEINE UNGENAUEN BOXEN */
.ngg-galleryoverview .ngg-gallery-thumbnail img {
    display: block !important;
    width: 100% !important;
    height: auto !important; /* Das Bild bestimmt seine Höhe selbst nach echten Proportionen */
    max-width: 100% !important;
    
    /* contain garantiert, dass kein einziger Millimeter deines Fotos abgeschnitten wird.
       Die Box schmiegt sich hauteng an das echte Bild an. Es entstehen NULL leere Flächen! */
    object-fit: contain !important; 
    margin: 0 auto !important;
    transition: transform 0.5s ease !important; /* Sanfter Zoom-Effekt */
    background: transparent !important;
}

/* 4. Professioneller Hover-Effekt: Bild zoomt NUR im Rahmen, Schatten glüht weinrot */
.ngg-galleryoverview .ngg-gallery-thumbnail-box:hover {
    box-shadow: 0 10px 30px rgba(128, 0, 32, 0.6) !important;
    transform: translateY(-4px) !important; /* Edles, minimales Schweben nach oben */
}

.ngg-galleryoverview .ngg-gallery-thumbnail-box:hover .ngg-gallery-thumbnail img {
    transform: scale(1.05) !important; /* Bild vergrößert sich elegant im Rahmen, Box bleibt stabil */
}

/* ========================================================
   RESPONSIVE OPTIMIERUNG (Tablet & Smartphone)
   ======================================================= */

/* Monitor-Mittelgröße / Große Tablets */
@media (max-width: 1200px) {
    .ngg-galleryoverview {
        column-count: 3 !important; /* Wechselt automatisch und bündig auf 3 Spalten */
    }
}

/* Smartphone / Handys */
@media (max-width: 600px) {
    .ngg-galleryoverview {
        column-count: 2 !important; /* Exakt 2 Spalten nebeneinander auf dem Handy */
        column-gap: 10px !important;
    }
    .ngg-gallery-thumbnail-box {
        margin-bottom: 10px !important; /* Kleinere Abstände auf dem Handy */
    }
}