/**
 * Doebele Lightbox - Gallery Hover Effects
 *
 * JIG-Style Hover-Look fuer NextGEN Pro Mosaic / Pro Masonry:
 *   - Image-Zoom + leichte Rotation + Schatten
 *   - Dunkler Veil (halbtransparent)
 *   - Animierte Lupe in der Mitte (scale .5 -> 1)
 *
 * Werte 1:1 aus dem Partyamigo Recent-Albums-Snippet uebernommen
 * (cubic-bezier, scale 1.1 rotate 2deg, 0.8s, Veil rgba 0.55).
 *
 * Veil + Lens werden per JS in jedes Item injiziert (siehe gallery-hover.js),
 * da Pro Mosaic eine geschlossene DOM-Struktur hat.
 *
 * JIG (.jg-entry) ist NICHT inkludiert -- JIG hat seinen eigenen Hover-Effekt
 * (TimThumb-Pipeline + eingebaute Lupe).
 */

/* ============================================================ *
 * Container
 * - overflow:hidden  -> gezoomtes Bild bleibt im Kachelrahmen
 * - cursor:pointer   -> click-Signal
 * - KEINE position-Property: Pro Mosaic positioniert seine Items
 *   selbst per inline-style (position:absolute), das nicht antasten
 * ============================================================ */
.ngg-pro-mosaic-item,
.ngg-pro-masonry-item {
    overflow: hidden;
    cursor: pointer;
}

/* ============================================================ *
 * Bild
 * - backface-visibility:hidden -> GPU-Layer-Promotion
 *   (verhindert das Ruckeln durch Software-Raster)
 * - long transition mit overshoot-bezier -> smoother JIG-Feel
 * - !important weil Pro Mosaic / Astra ggf. eigene transitions setzen
 * - Sizing-Eigenschaften (width/height/object-fit) bleiben drauss !
 * ============================================================ */
.ngg-pro-mosaic-item img,
.ngg-pro-masonry-item img {
    backface-visibility: hidden;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease-out !important;
}

.ngg-pro-mosaic-item:hover img,
.ngg-pro-masonry-item:hover img {
    transform: scale(1.1) rotate(2deg) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================================ *
 * Veil (per JS injizierter Span)
 * Dunkler Schleier ueber dem Bild beim Hover
 * ============================================================ */
.dlb-hover-veil {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.35s ease;
    z-index: 2;
    pointer-events: none;
}

.ngg-pro-mosaic-item:hover .dlb-hover-veil,
.ngg-pro-masonry-item:hover .dlb-hover-veil {
    background: rgba(0, 0, 0, 0.55);
}

/* ============================================================ *
 * Lens (per JS injizierter Span)
 * Lupen-SVG, Pop-in-Animation (scale .5 -> 1 mit overshoot)
 * ============================================================ */
.dlb-hover-lens {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'11'%20cy%3D'11'%20r%3D'8'%2F%3E%3Cline%20x1%3D'21'%20y1%3D'21'%20x2%3D'16.65'%20y2%3D'16.65'%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.35s ease,
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7));
}

.ngg-pro-mosaic-item:hover .dlb-hover-lens,
.ngg-pro-masonry-item:hover .dlb-hover-lens {
    opacity: 1;
    transform: scale(1);
}

/* ============================================================ *
 * Mobile / Tablet: kleinere Lupe
 * ============================================================ */
@media (max-width: 1024px) {
    .dlb-hover-lens {
        width: 44px;
        height: 44px;
        margin: -22px 0 0 -22px;
    }
}

/* ============================================================ *
 * Touch-Geraete: Hover komplett abschalten
 * (sonst bleiben Zoom/Veil/Lens nach Tap kleben)
 * ============================================================ */
@media (hover: none) {
    .ngg-pro-mosaic-item:hover img,
    .ngg-pro-masonry-item:hover img {
        transform: none !important;
        box-shadow: none !important;
    }
    .dlb-hover-veil,
    .dlb-hover-lens {
        display: none;
    }
}