/* ============================================================
   masonry_grid.css — Universelle Masonry-Wand (wiederverwendbar)
   Nur Positionierung + Stagger + "Mehr anzeigen". Das AUSSEHEN
   der Kacheln kommt aus dem jeweiligen Karten-CSS (z.B. feedback_card.css).
   Optik/Stagger deckungsgleich zur Entdeckungs-Suche (ki_search.css).
   ============================================================ */

.m-grid {
    position: relative;
    width: 100%;
    /* Hoehe setzt das JS. Vor JS-Layout fliessen die Kacheln (Fallback unten). */
}

.m-grid__item {
    position: absolute;   /* wird vom JS gesetzt */
    top: 0;
    left: 0;
    overflow: hidden;
    border-radius: 12px;
    /* Hover ueber Schatten/Helligkeit -> KEIN transform (kein Konflikt mit Stagger) */
    transition: box-shadow .28s ease, filter .28s ease;
}

/* ── Stagger: Startzustand SCHON hier (vor erstem Paint) -> kein Flash.
   Deckungsgleich mit stagger.js / ki_search.css ── */
.m-grid__item[data-staggered-item] {
    transition:
        opacity   var(--stagger-duration, 600ms) cubic-bezier(0.16, 1, 0.3, 1),
        transform var(--stagger-duration, 600ms) cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow .28s ease;
}

.m-grid__item[data-staggered-item]:not(.staggered-end) {
    opacity: 0;
    transform: translateY(124px);
}

/* ── Fallback OHNE JS-Layout: wenigstens sichtbar (fliessende Bloecke) ── */
.m-grid:not([data-mason-ready]) .m-grid__item {
    position: relative;
    display: inline-block;
    width: 31.5%;
    margin: 0 .75% 16px;
    vertical-align: top;
    height: auto !important;
}

/* ── "Mehr anzeigen" ── */
.m-grid-more {
    display: flex;
    justify-content: center;
    margin: 34px 10px ;
}

.mg-load-more {
    cursor: pointer;
    border: 1px solid rgba(200, 169, 110, .4);
    background: rgba(255, 255, 255, .03);
    color: #c8a96e;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 15px 40px;
    border-radius: 999px;
    transition: background .2s ease, border-color .2s ease, transform .15s ease, color .2s ease;
}

.mg-load-more:hover {
    background: linear-gradient(180deg, #c8a96e, #c8a44d);
    border-color: #c8a96e;
    color: #14110c;
    transform: translateY(-1px);
}

.mg-load-more:disabled {
    opacity: .5;
    cursor: default;
    transform: none;
}