/* =============================================================
   Marquee Block – Frontend Styles
   ============================================================= */

.wp-block-marquee {
    --marquee-bg:     transparent;
    --marquee-fade-w: clamp(32px, 6vw, 96px);
    /* --marquee-item-height wird von PHP inline gesetzt wenn logoHeight > 0 */

    position:          relative;
    overflow:          hidden;
    cursor:            grab;
    user-select:       none;
    -webkit-user-select: none;
    touch-action:      pan-y;
}

.wp-block-marquee.is-dragging {
    cursor: grabbing;
}

/* ── Track ─────────────────────────────────────────────────── */
.wp-block-marquee__track {
    will-change: transform;
}

/* Inner Group-Block nie umbrechen lassen */
.wp-block-marquee__track > .wp-block-group {
    flex-wrap: nowrap !important;
}

/* Direkte Flex-Kinder des Group-Blocks dürfen nicht schrumpfen.
   Ohne flex-shrink: 0 ignoriert der Browser flex-basis als Mindestbreite
   und zieht das Element auf Inhaltsgröße zusammen – weshalb z. B.
   "Breite" (flex-basis) auf einem Paragraph-Block keine Wirkung zeigt. */
.wp-block-marquee__track .wp-block-group > * {
    flex-shrink: 0;
}

/* ── Edge Fades ────────────────────────────────────────────── */
.wp-block-marquee::before,
.wp-block-marquee::after {
    content:        '';
    position:       absolute;
    top:            0;
    bottom:         0;
    width:          var(--marquee-fade-w);
    z-index:        10;
    pointer-events: none;
    transition:     opacity 0.3s ease;
}

.wp-block-marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--marquee-bg) 0%, transparent 100%);
}

.wp-block-marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--marquee-bg) 0%, transparent 100%);
}

.wp-block-marquee.no-overflow::before,
.wp-block-marquee.no-overflow::after {
    opacity: 0;
}

/* ── Bilder ────────────────────────────────────────────────── */
.wp-block-marquee img {
    pointer-events:    none;
    -webkit-user-drag: none;
    display:           block;
    object-fit:        contain;
}

/* Wenn logoHeight explizit gesetzt (PHP schreibt --marquee-item-height
   als Inline-Style): einheitliche Höhe für alle Bilder erzwingen. */
.wp-block-marquee[style*="--marquee-item-height"] img {
    height:    var(--marquee-item-height) !important;
    width:     auto !important;
    max-width: none;
}