/* Wrapper */
.rf-masonry-wrapper {
    width: 100%;
}

/* Grid via CSS Columns – column-count und column-gap kommen inline aus dem Widget */
.rf-masonry-grid {
    column-gap: 20px; /* wird inline überschrieben */
}

/* Einzelne Items */
.rf-masonry-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    margin-bottom: 0; /* tatsächlicher Abstand kommt inline aus dem Widget */
    display: inline-block;
    width: 100%;
}

/* Innere Karte – hier greifen die Style-Einstellungen aus Elementor (Hintergrund, Padding, Shadow, Radius etc.) */
.rf-masonry-item-inner {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Link */
.rf-masonry-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Media-Wrapper */
.rf-masonry-media {
    position: relative;
    overflow: hidden;
}

/* Bilder */
.rf-masonry-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Videos */
.rf-masonry-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: #000; /* falls Video noch lädt */
}

/* Titel allgemein */
.rf-masonry-title {
    margin-top: 10px;
    font-size: 1rem;
    line-height: 1.4;
}

/* Titel, wenn unterhalb (Standard-Variante) */
.rf-masonry-title--below {
    position: static;
}

/* Titel-Overlay auf dem Bild/Video */
.rf-masonry-title-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    /* Standard-Ausrichtung – wird per Elementor-Controls überschrieben */
    align-items: flex-end;
    justify-content: flex-start;
    padding: 10px;
    box-sizing: border-box;
    pointer-events: none; /* Klick weiter auf Link */
}

/* Damit der Text selbst klickbar bleibt, wenn gewünscht */
.rf-masonry-title-overlay .rf-masonry-title {
    pointer-events: auto;
    margin-top: 0;
}

/* 2-Spalten-Ausrichtung der Titel (gilt für Titel unterhalb des Bildes/ Videos):
   - Erste Spalte: rechtsbündig
   - Zweite Spalte: linksbündig
*/
.rf-masonry-item.rf-col-0 .rf-masonry-title--below {
    text-align: right;
}

.rf-masonry-item.rf-col-1 .rf-masonry-title--below {
    text-align: left;
}

/* Optionale Standard-Hover-Effekte (können mit Style-Kontrollen „überschrieben“ werden) */
.rf-masonry-link:hover .rf-masonry-media {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

/* Unterstreichung beim Hover optional – kann über Title Hover Color noch kombiniert werden */
.rf-masonry-link:hover .rf-masonry-title {
    text-decoration: underline;
}

/* Kleine Helper-Klasse, falls in Zukunft notwendig */
.rf-masonry-video--loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
}