/* ==========================================
   RAND-AUSBLENDUNG
   → BEITRÄGE BLASSEN ZU TRANSPARENT AUS
   → STATT EINER DECKFARBE ZU ÜBERBLENDEN

   Funktioniert dadurch unabhängig vom Hintergrund
   dahinter, egal ob Volltonfarbe, Verlauf oder Bild.

   Technisch per CSS mask-image direkt auf dem
   scrollenden Element: die Karten selbst werden an
   den Rändern transparent, es liegt also nichts
   Deckendes mehr darüber.
   ========================================== */

.uagb-slider-fade-wrap {
    position: relative;

    /*
     * Breite der Ausblendung.
     *
     * Entspricht bewusst dem seitlichen Padding des
     * Sliders (siehe .uagb-post-grid weiter unten),
     * damit der Übergang exakt am Rand der ersten/
     * letzten Karte endet statt mitten im Schattenraum.
     */
    --uagb-slider-fade-width: 40px;
}


.uagb-post-grid {

    /*
     * MASKE:
     *
     * Von links 0 → 100% Deckkraft ab --uagb-slider-fade-width,
     * genauso rechts gespiegelt.
     *
     * Standard: beide Seiten ausgeblendet.
     * Wird per JS/Klasse (is-at-start / is-at-end) am
     * jeweiligen Rand wieder aufgehoben, siehe unten.
     */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        black var(--uagb-slider-fade-width),
        black calc(100% - var(--uagb-slider-fade-width)),
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0,
        black var(--uagb-slider-fade-width),
        black calc(100% - var(--uagb-slider-fade-width)),
        transparent 100%
    );

    transition: -webkit-mask-image 0.2s ease,
                mask-image 0.2s ease;
}


/*
 * Am Start-Rand angekommen:
 * links NICHT mehr ausblenden (volle Deckkraft von Anfang an).
 */
.uagb-slider-fade-wrap.is-at-start .uagb-post-grid {

    -webkit-mask-image: linear-gradient(
        to right,
        black 0,
        black calc(100% - var(--uagb-slider-fade-width)),
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        black 0,
        black calc(100% - var(--uagb-slider-fade-width)),
        transparent 100%
    );

}


/*
 * Am End-Rand angekommen:
 * rechts NICHT mehr ausblenden.
 */
.uagb-slider-fade-wrap.is-at-end .uagb-post-grid {

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        black var(--uagb-slider-fade-width),
        black 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0,
        black var(--uagb-slider-fade-width),
        black 100%
    );

}


/*
 * An BEIDEN Rändern angekommen (z. B. Slider passt
 * komplett ins Sichtfeld, kein Scrollen nötig):
 * Maske komplett aufheben.
 */
.uagb-slider-fade-wrap.is-at-start.is-at-end .uagb-post-grid {
    -webkit-mask-image: none;
    mask-image: none;
}


/* ==========================================
   UAGB POST GRIDS
   → HORIZONTALER FREE-SCROLL
   → VERTIKALES SCROLLEN AM ENDE
   → SCHATTEN DER KARTEN NICHT ABSCHNEIDEN
   ========================================== */

.uagb-post-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    max-width: none !important;

    gap: 24px !important;

    /*
     * EXTRA PADDING LINKS/RECHTS
     * damit der Schatten der ersten und letzten
     * Karte nicht am Scrollbereich abgeschnitten wird.
     */
    padding: 20px 40px 30px !important;

    margin: 0 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    /*
     * KEIN EINRASTEN
     */
    scroll-snap-type: none !important;

    /*
     * TOUCH:
     * Browser darf zwischen horizontal und vertikal
     * unterscheiden.
     */
    touch-action: pan-x pan-y;

    /*
     * MAUS
     */
    cursor: grab;

    /*
     * TEXT NICHT MARKIEREN BEIM DRAGGEN
     */
    user-select: none;
    -webkit-user-select: none;

    /*
     * HORIZONTALES OVERSCROLLING BEGRENZEN
     *
     * Vertikales Scrollen der Seite bleibt erlaubt.
     */
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;

    /*
     * Spectra Grid neutralisieren
     */
    grid-template-columns: none !important;

    /*
     * Wichtig für korrekte Breite
     */
    box-sizing: border-box !important;

    /*
     * Scroll-Padding passend zum Schattenbereich
     */
    scroll-padding-left: 40px;
    scroll-padding-right: 40px;
}


/* ==========================================
   MAUS WIRD GEDRÜCKT
   ========================================== */

.uagb-post-grid.is-dragging {
    cursor: grabbing !important;
}


/* ==========================================
   BEITRAGSKARTEN
   ========================================== */

.uagb-post-grid > .uagb-post__inner-wrap {

    /*
     * FESTE KARTENBREITE
     */
    flex: 0 0 340px !important;

    width: 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;

    /*
     * KEINE AUTOMATISCHEN ABSTÄNDE
     */
    margin: 0 !important;

    /*
     * Spectra Grid neutralisieren
     */
    grid-column: auto !important;
    grid-row: auto !important;

    /*
     * KEIN SNAP
     */
    scroll-snap-align: none !important;
}


/* ==========================================
   PAGINATION AUSBLENDEN
   ========================================== */

.uagb-post-grid > .uagb-post-pagination-wrap {
    display: none !important;
}


/* ==========================================
   BILDER EINHEITLICH
   ========================================== */

.uagb-post-grid .uagb-post__image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 900px) {

    .uagb-post-grid {

        gap: 18px !important;

        /*
         * Etwas weniger Rand auf Tablet
         */
        padding-left: 30px !important;
        padding-right: 30px !important;

        scroll-padding-left: 30px;
        scroll-padding-right: 30px;
    }


    .uagb-post-grid > .uagb-post__inner-wrap {

        flex-basis: 310px !important;

        width: 310px !important;
        min-width: 310px !important;
        max-width: 310px !important;

    }

}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 600px) {

    .uagb-post-grid {

        gap: 16px !important;

        /*
         * Genügend Platz für den Schatten
         * der ersten/letzten Karte
         */
        padding-left: 20px !important;
        padding-right: 20px !important;

        /*
         * Scrollbar ausblenden
         */
        scrollbar-width: none !important;

        /*
         * Browser darf zwischen horizontaler
         * und vertikaler Fingerbewegung unterscheiden
         */
        touch-action: pan-x pan-y;

        /*
         * Horizontales Overscroll begrenzen,
         * vertikales Seitenscrollen erlauben
         */
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;

        /*
         * Scroll-Padding
         */
        scroll-padding-left: 20px;
        scroll-padding-right: 20px;
    }


    /*
     * Chrome / Safari
     */
    .uagb-post-grid::-webkit-scrollbar {
        display: none;
    }


    /* ======================================
       MOBILE KARTEN
       ====================================== */

    .uagb-post-grid > .uagb-post__inner-wrap {

        /*
         * 82% der Bildschirmbreite
         */
        flex-basis: 82vw !important;

        width: 82vw !important;
        min-width: 82vw !important;
        max-width: 82vw !important;

    }

}