/**
 * Masonry Styles für MetaModels
 * Contao 5 Standard
 */

/* Masonry Container */
.masonry-container {
    width: 100%;
    margin: 0 auto;
}

/* Masonry Items - Mobile First */
.masonry-item,
.masonry-sizer {
    /* Mobile: single column layout (full width minus gutter) */
    width: calc(100% - 12px);
    margin-bottom: 62px;
    /* Vertikaler Abstand zwischen Zeilen */
    box-sizing: border-box;
}



/* Tablet Layout - respektiert span-Klassen */
@media (min-width: 768px) {

    /* Tablet: two/three column baseline; span-Klassen repräsentieren 3/6/9/12 von 12 */
    .masonry-item,
    .masonry-sizer {
        /* Baseline: zwei Spalten auf Tablet (50% pro Spalte) */
        width: calc(50% - 12px);
    }

    /* span1 = 3 von 12 Spalten = 25% */
    .masonry-item.span1 {
        width: calc(25% - 12px);
    }

    /* span2 = 6 von 12 Spalten = 50% */
    .masonry-item.span2 {
        width: calc(50% - 12px);
    }

    /* span3 = 9 von 12 Spalten = 75% */
    .masonry-item.span3 {
        width: calc(75% - 12px);
    }

    /* span4 = 12 von 12 Spalten = 100% */
    .masonry-item.span4 {
        width: calc(100% - 12px);
    }
}

/* Desktop Layout - gleiche Logik */
@media (min-width: 1200px) {

    /* Desktop: vier Spalten Baseline (25% pro Spalte) */
    .masonry-item,
    .masonry-sizer {
        width: calc(25% - 12px);
    }

    .masonry-item.span1 {
        width: calc(25% - 12px);
    }

    .masonry-item.span2 {
        width: calc(50% - 12px);
    }

    .masonry-item.span3 {
        width: calc(75% - 12px);
    }

    .masonry-item.span4 {
        width: calc(100% - 12px);
    }
}

/* Verbesserungen für Performance und UX */
.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
}

.masonry-item .field {
    margin-bottom: 10px;
}

.masonry-item .actions {
    margin-top: 15px;
}

.spanHeadlineBlock {
    margin-bottom: 0rem;
    width: 100%;
}

p {
    margin: 0;
}