/**
 * Masonry Gallery Block - Plugin Styles
 * Minimale Styles, da die meisten vom Theme kommen
 */

/* Gallery Wrapper - Default Margins (werden durch Block-Attribute überschrieben) */
.mgb-gallery-wrapper {
    margin: 2.5em 0;
}

/* Container für Masonry - WICHTIG: Synchron mit Masonry transitionDuration! */
.mgb-masonry-container {
    max-width: 100%;
    margin: 0 auto;
    /* DAS ist der Schlüssel für smooth expansion! Synchron mit Masonry 1.2s */
    transition: height 0.8s ease-in-out;
    order: 3;
    width: 100%;
}

/* Notice Box */
.mgb-notice {
    padding: 20px;
    background-color: #f0f0f0;
    border-left: 4px solid #0073aa;
    margin: 20px 0;
    font-size: 14px;
    color: #333;
}

/* Editor Styles */
.wp-block-masonry-gallery-block-masonry-gallery {
    min-height: 100px;
}

/* Items bekommen Spacing vom Theme (.item Klasse) */

/* Wasserfall-Fade-In Animation - höhere Spezifität für Plugin-Container */
.mgb-masonry-container .thumbnailContainer.animate-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.mgb-masonry-container .thumbnailContainer.fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Icon-Größe begrenzen */
.mgb-masonry-container .xout svg,
.mgb-masonry-container #close-button {
    max-width: 216px;
    height: auto;
    display: block;
}

/* Sicherstellen dass .item die richtigen Theme-Styles bekommt */
.mgb-masonry-container .item {
    /* Theme übernimmt das meiste Styling */
}

/* posttext Container - Theme CSS übernehmen, nur sicherstellen dass es funktioniert */
/* NICHT display: none setzen, das würde das Theme-CSS überschreiben */

/* Flex-Layout für Bilder (wie im Theme) */
.mgb-masonry-container .posttext .pics {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    align-content: space-between;
    row-gap: 1em;
    align-items: baseline;
    margin: 0 0 0 0 !important;
}

/* Kleine Portfolio-Bilder (unter 1081px Breite) - 2 nebeneinander */
.mgb-masonry-container .posttext .pics .smallPortfolio {
    flex: 1 0 46%;
}

/* Videocontainer für Bilder */
.mgb-masonry-container .posttext .pics .videocontainer {
    display: block;
    position: relative;
    margin: 0 auto 0 auto;
}

.mgb-masonry-container .posttext .pics .videocontainer:last-child {
    margin: 0 auto 2.5em auto;
}

/* Bilder im videocontainer */
.mgb-masonry-container .posttext .pics .videocontainer img {
    clip-path: inset(.08% .2% .2% .2% round .3em);
}

/* Große Portfolio-Bilder (über 1081px) - volle Breite */
.mgb-masonry-container .posttext .pics .largeport {
    max-width: 100%;
}

/* Portfolio Content Styles */
.mgb-masonry-container .posttext {
    width: 100%;
    padding: 20px 0;
}

.portfoliocontent  {
       margin: 0 auto 3em auto;
    text-align: center;
    width: calc(100px + 61%);
    float: unset !important;
}

/* Orphan Item: Letztes Item verstecken wenn es alleine auf neuer Reihe steht */
/* Bei 3 Items pro Reihe (zwischen 523px und 1280px) und genau 4 Items total */
/* Kind 6 = 4. Item (weil grid-sizer und gutter-sizer = Kind 1+2) */
/* :last-child stellt sicher, dass es auch wirklich das letzte Element ist */
@media screen and (max-width: 1280px) and (min-width: 523px) {
    .mgb-masonry-container > .item:nth-child(6):last-child {
        display: none !important;
    }
}

/* Responsive: Mobile */
@media (max-width: 768px) {
    .mgb-masonry-container .posttext .pics .smallPortfolio {
        flex: 0 0 80%;
    }
    
    .mgb-masonry-container .posttext .pics .videocontainer {
        margin-bottom: 3em;
    }
}

/* Grid Sizer und Items - Synchron mit Theme */
.mgb-masonry-container .grid-sizer,
.mgb-masonry-container .item {
    width: 19.5%;
}

.mgb-masonry-container .gutter-sizer {
    width: 7.3%;
    visibility: hidden;
}

/* Responsive - Breakpoints exakt wie im Theme */

/* Container Breite bei 1080px */
@media screen and (max-width: 1080px) {
    .mgb-masonry-container {
        width: 82%;
        margin: 0 auto 0em auto;
    }
}

/* Grid bei 1280px */
@media screen and (max-width: 1280px) {
    .mgb-masonry-container .grid-sizer,
    .mgb-masonry-container .item {
        width: 26%;
    }
    .mgb-masonry-container .gutter-sizer {
        width: 11%;
    }
}

/* Container Breite und Grid bei 522px */
@media screen and (max-width: 522px) {
    .mgb-masonry-container {
        width: 84%;
        margin: 0 auto 0em auto;
    }
    
    .mgb-masonry-container .grid-sizer,
    .mgb-masonry-container .item {
        width: 43%;
    }
    .mgb-masonry-container .gutter-sizer {
        width: 14%;
    }
}