/* ==========================================
   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
   ========================================== */

/*
 * Nur im NORMALEN Layout (Bild oben/unten): Bild immer 16:9.
 * Beim Hintergrund-Layout übernimmt das die Karte selbst
 * (siehe Abschnitt "BILD ALS HINTERGRUND").
 */
.uagb-post-grid:not(.uagb-post__image-position-background) .uagb-post__image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}


/* ==========================================
   READ-MORE-BUTTONS AUF GLEICHER HÖHE
   (normales Layout UND Hintergrund-Layout)

   Alle Karten einer Reihe werden gleich hoch
   gezogen, die Karte selbst ist eine vertikale
   Flexbox und der Button-Container schiebt sich
   per margin-top:auto an den unteren Rand.
   ========================================== */

.uagb-post-grid {
    align-items: stretch !important;
}

.uagb-post-grid > .uagb-post__inner-wrap {
    display: flex !important;
    flex-direction: column !important;
}

.uagb-post-grid > .uagb-post__inner-wrap > * {
    flex-shrink: 0;
}

.uagb-post-grid > .uagb-post__inner-wrap > .uagb-post__cta {
    margin-top: auto !important;
}


/* ==========================================
   BILD ALS HINTERGRUND
   → KARTE IMMER 16:9, ALLE INHALTE SICHTBAR
   → KARTEN WERDEN BREITER, HÖHE WIRD KLEINSTMÖGLICH

   Das JS sucht die kleinste Höhe H, bei der der
   gesamte Inhalt in eine Karte der Breite
   H × 16 / 9 passt, und setzt:

     --uagb-card-h  = H
     --uagb-card-w  = H × 16 / 9

   Ebenen, Overlay und Position des Read-More-
   Buttons regelt weiterhin Spectra selbst
   (Bild z-index 2, Text z-index 10) – hier wird
   bewusst NICHTS an den z-index-Werten geändert.
   Ohne JS bleibt alles beim normalen Layout.
   ========================================== */

.uagb-post-grid.uagb-post__image-position-background {

    /*
     * Platz unter dem Auszug für den Read-More-Button
     * (Spectra reserviert hier standardmäßig 100px).
     * Button ≈ 36px hoch + 20px Abstand zum Rand.
     */
    --uagb-card-btn-space: 70px;
}

.uagb-post-grid.uagb-post__image-position-background .uagb-post__inner-wrap > .uagb-post__text:nth-last-child(3) {
    padding-bottom: var(--uagb-card-btn-space) !important;
}

/*
 * BILD EXAKT AUF KARTENGRÖSSE
 *
 * Spectra setzt im Hintergrund-Layout width:auto / height:auto
 * mit min-width/min-height:100% und zentriert das Bild per
 * transform. Dadurch gilt die NATÜRLICHE Bildbreite (z. B. 800
 * bis 1024px) – ist die Karte schmaler, sieht man nur einen
 * vergrößerten Ausschnitt.
 *
 * Hier wird das Bild stattdessen exakt auf die Karte gespannt.
 * Karte und Bild sind beide 16:9, es wird also nichts
 * abgeschnitten. Bei anderen Bildformaten: object-fit: cover.
 */
.uagb-post-grid.uagb-post__image-position-background .uagb-post__image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    transform: none !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    object-position: center;
}

/* Breite (auch während der Messung) */
.uagb-post-grid.uagb-post__image-position-background.is-ratio-measure > .uagb-post__inner-wrap,
.uagb-post-grid.uagb-post__image-position-background.is-ratio-sized > .uagb-post__inner-wrap {
    flex: 0 0 var(--uagb-card-w) !important;
    width: var(--uagb-card-w) !important;
    min-width: var(--uagb-card-w) !important;
    max-width: var(--uagb-card-w) !important;
}

/* Während der Messung: Höhe frei, Inhalt bestimmt */
.uagb-post-grid.uagb-post__image-position-background.is-ratio-measure > .uagb-post__inner-wrap {
    height: auto !important;
    min-height: 0 !important;
}

/* Endgültig: feste, aus 16:9 berechnete Höhe */
.uagb-post-grid.uagb-post__image-position-background.is-ratio-sized > .uagb-post__inner-wrap {
    height: var(--uagb-card-h) !important;
    min-height: var(--uagb-card-h) !important;
}


/* ==========================================
   READ-MORE-BUTTONS: GLEICHE STERN-ANIMATION
   WIE BEI ALLEN ANDEREN BUTTONS DER SEITE

   Das PHP-Plugin (Filter "render_block") setzt um den
   Read-More-Link einen echten Button-Host:

     div.uagb-post__cta.wp-block-button     ← Spectra-Container
       └ div.wp-block-button                ← echter Button-Host
           └ a.wp-block-button__link        ← Link

   Die Sternen-Regeln des Themes greifen dadurch auf dem
   inneren Host – dort stimmt die Geometrie, denn er ist
   genauso groß wie der Link. Hier nur noch das Nötige:
   ========================================== */

/*
 * Der äußere Container bekommt keine eigenen Sterne mehr,
 * sonst gäbe es sie doppelt. (:has() → ohne PHP-Umbau
 * bleibt das alte Verhalten unverändert.)
 */
.uagb-post__cta.wp-block-button:has(> .wp-block-button)::before,
.uagb-post__cta.wp-block-button:has(> .wp-block-button)::after {
    content: none !important;
    display: none !important;
}

/* Spectra setzt overflow:hidden – die Sterne ragen aber heraus */
.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__cta {
    overflow: visible !important;
}

/*
 * Spectra legt im Hintergrund-Layout eine unsichtbare
 * Link-Fläche (z-index 11) über die ganze Karte. Der Button
 * wird darüber gehoben, damit er :hover bekommt. Der Link
 * zeigt auf dasselbe Ziel, am Klickverhalten ändert sich
 * nichts.
 */
.uagb-post-grid.uagb-post__image-position-background .uagb-post__inner-wrap > .uagb-post__cta {
    z-index: 12 !important;
}

/*
 * Variation pro Karte (Winkel, Abstand, Startdrehung,
 * Zeitversatz). Die Variablen werden an den inneren
 * Button-Host vererbt.
 */
.uagb-post-grid > .uagb-post__inner-wrap:nth-child(4n+1) > .uagb-post__cta.wp-block-button {
    --va: 0deg;  --vd: 0em;     --vr: 0deg;   --vt: 0s;
}
.uagb-post-grid > .uagb-post__inner-wrap:nth-child(4n+2) > .uagb-post__cta.wp-block-button {
    --va: 8deg;  --vd: 0.12em;  --vr: 12deg;  --vt: -0.6s;
}
.uagb-post-grid > .uagb-post__inner-wrap:nth-child(4n+3) > .uagb-post__cta.wp-block-button {
    --va: -7deg; --vd: -0.05em; --vr: -10deg; --vt: -1.1s;
}
.uagb-post-grid > .uagb-post__inner-wrap:nth-child(4n+4) > .uagb-post__cta.wp-block-button {
    --va: 4deg;  --vd: 0.20em;  --vr: 6deg;   --vt: -1.7s;
}


/* ==========================================
   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;

    }

}