/**
 * BEW Image Mosaic Widget Styles
 *
 * Zwei Modus-Klassen:
 *   .bew-mosaic--masonry  → CSS multi-column (auto, natürliche Bildhöhen)
 *   .bew-mosaic--grid     → CSS Grid mit konfigurierbaren Kachelgrößen (1×1, 1×2, 2×1, 2×2)
 *
 * Elementor-Selectors überschreiben die Fallback-Werte hier für Spalten,
 * Abstände und Zellhöhe bei allen Breakpoints automatisch.
 */

/* ===========================================
   BASIS
   =========================================== */

.bew-mosaic {
    width: 100%;
    box-sizing: border-box;
    /* Kein display hier – kommt vom Modus */
}

/* ===========================================
   MASONRY-MODUS  (CSS columns)
   =========================================== */

.bew-mosaic--masonry {
    columns: 4;
    column-gap: 8px;
    orphans: 1;
    widows: 1;
}

.bew-mosaic--masonry .bew-mosaic__item {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: block;
    margin-bottom: 8px;
    /* Kein overflow:hidden hier – das übernimmt image-wrap */
}

/* Im Masonry-Modus behält das Bild seine natürliche Höhe */
.bew-mosaic--masonry .bew-mosaic__image-wrap {
    height: auto;
}

.bew-mosaic--masonry .bew-mosaic__image-wrap img {
    height: auto;
    min-height: 60px;
}

/* ===========================================
   GRID-MODUS  (CSS Grid, manuelle Kacheln)
   =========================================== */

.bew-mosaic--grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 220px;
    gap: 8px;
    grid-auto-flow: row dense; /* Lücken automatisch auffüllen */
}

/* Kachelgrößen */
.bew-mosaic--grid .bew-mosaic__item--1x2 { grid-row:    span 2; }
.bew-mosaic--grid .bew-mosaic__item--2x1 { grid-column: span 2; }
.bew-mosaic--grid .bew-mosaic__item--2x2 { grid-column: span 2; grid-row: span 2; }

/* Im Grid-Modus füllt das Bild die gesamte Kachel */
.bew-mosaic--grid .bew-mosaic__item {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.bew-mosaic--grid .bew-mosaic__image-wrap {
    height: 100%;
}

.bew-mosaic--grid .bew-mosaic__image-wrap img {
    height: 100%;
    object-fit: cover;
}

/* ===========================================
   IMAGE WRAP  (gemeinsam)
   =========================================== */

.bew-mosaic__image-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.bew-mosaic__image-wrap img {
    display: block;
    width: 100%;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* Hover-Zoom (deaktivierbar via .bew-mosaic--no-scale) */
.bew-mosaic:not(.bew-mosaic--no-scale) .bew-mosaic__image-wrap:hover img {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
}

/* ===========================================
   OVERLAY
   =========================================== */

.bew-mosaic__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #a6ce39;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dauerhaft aktiver Overlay (per-Bild konfiguriert) */
.bew-mosaic__item--overlay-on .bew-mosaic__overlay {
    opacity: 0.35;
}

/* Animierter Overlay (via JS .is-overlay-active) */
.bew-mosaic__item.is-overlay-active .bew-mosaic__overlay {
    opacity: 0.35;
}

/* Hover – gilt für alle Items */
.bew-mosaic__image-wrap:hover .bew-mosaic__overlay {
    opacity: 0.55;
}

/* ===========================================
   RESPONSIVE FALLBACKS
   (werden durch Elementor-Selectors überschrieben,
    wenn der Nutzer eigene Werte konfiguriert hat)
   =========================================== */

/* Tablet ≤1024px */
@media (max-width: 1024px) {
    .bew-mosaic--masonry {
        columns: 3;
    }

    .bew-mosaic--grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 200px;
    }
}

/* Mobil ≤767px */
@media (max-width: 767px) {
    .bew-mosaic--masonry {
        columns: 2;
    }

    .bew-mosaic--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 180px;
    }
}

/* Klein-Mobil ≤480px: alles einspaltig, Spans zurücksetzen */
@media (max-width: 480px) {
    .bew-mosaic--masonry {
        columns: 1;
    }

    .bew-mosaic--grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: 260px;
    }

    /* Bei 1 Spalte können 2-breite Kacheln nicht sauber spannen */
    .bew-mosaic--grid .bew-mosaic__item--2x1,
    .bew-mosaic--grid .bew-mosaic__item--2x2 {
        grid-column: span 1;
    }

    /* Hohe Kacheln behalten ihre doppelte Höhe – das sieht auch auf Mobile gut aus */
}