/* Default (small) variant — Figma node 51:47.
   Stack:
     • #252525 base                                                  (z 0)
     • Rainbow gradient extending past edges, blurred 25px           (z 0)
     • Multiply-blend vignette: dark at edges, transparent in middle (z 1)
     • Keyword text                                                  (z 2)
*/
.m26_keyword_slider {
    position: relative;
    width: 100%;
    height: 100px;
    overflow: hidden;
    isolation: isolate;
    background: #252525;
}

.m26_keyword_slider_glow {
    position: absolute;
    /* Extend past the slider so the blur falloff doesn't show edges */
    inset: -30px -91px;
    z-index: 0;
    background: linear-gradient(
        90deg,
        rgb(20, 94, 168) 0%,
        rgb(235, 127, 177) 20%,
        rgb(126, 202, 212) 40%,
        rgb(124, 118, 64) 60%,
        rgb(218, 167, 7) 80%,
        rgb(238, 114, 44) 100%
    );
    filter: blur(25px);
    pointer-events: none;
}

/* Edge vignette: darkens the left/right ~50% via a transparent-middle
   gradient blended in multiply mode over the rainbow glow. */
.m26_keyword_slider::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(37, 37, 37, 0.30) 0%,
        rgba(37, 37, 37, 0)    50%,
        rgba(37, 37, 37, 0.30) 100%
    );
    mix-blend-mode: multiply;
    pointer-events: none;
}

.m26_keyword_slider_band {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    background: transparent;
}

.m26_keyword_slider_track {
    display: flex;
    align-items: center;
}

.m26_keyword_slider_track:not(.slick-initialized) {
    overflow: hidden;
}

.m26_keyword_slider_track:not(.slick-initialized) .m26_keyword_item {
    flex-shrink: 0;
}

.m26_keyword_item {
    display: inline-flex !important;
    align-items: center;
    gap: 1.5em;
    padding: 0 1.5em;
    color: #ffffff;
    font-family: 'Nexa-Black-Italic', 'Nexa', system-ui, sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.m26_keyword_text {
    color: inherit;
}

.m26_keyword_sep {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    font-style: normal;
}

/* Slick adjustments */
.m26_keyword_slider .slick-track {
    display: flex !important;
    align-items: center;
}

.m26_keyword_slider .slick-slide {
    height: auto;
    float: none;
}

@media (max-width: 768px) {
    .m26_keyword_slider      { height: 72px; }
    .m26_keyword_item        { font-size: 14px; gap: 1em; padding: 0 1em; }
}

/* is_large variant — "Störer" sits at the boundary between a dark zone
   (#383737) and a light zone (#d9d9d9). The rotated rainbow strip
   visually bridges the two halves.
   Page-level overflow is contained via `overflow-x: clip` on body. */
.m26_keyword_slider.is_large {
    background: linear-gradient(
        to bottom,
        #383737 0%,
        #383737 50%,
        #d9d9d9 50%,
        #d9d9d9 100%
    );
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
}

.m26_keyword_slider.is_large::before {
    display: none; /* drop the multiply vignette for the störer variant */
}

/* Hide the soft glow div — for the störer the gradient lives on the band
   itself so it doesn't bleed outside the rotated parallelogram. */
.m26_keyword_slider.is_large .m26_keyword_slider_glow {
    display: none;
}

.m26_keyword_slider.is_large .m26_keyword_slider_band {
    position: relative;
    transform: rotate(-1.5deg);
    transform-origin: center;
    width: 110vw;
    margin: 60px -5vw;
    padding: 36px 0;
    /* Same rainbow colors as the non-rotated default variant — solid stops,
       darkened via a multiply vignette overlay (matches the default look). */
    background:
        linear-gradient(
            90deg,
            rgba(37, 37, 37, 0.30) 0%,
            rgba(37, 37, 37, 0)    50%,
            rgba(37, 37, 37, 0.30) 100%
        ),
        linear-gradient(
            90deg,
            rgb(20,  94, 168) 0%,
            rgb(235, 127, 177) 20%,
            rgb(126, 202, 212) 40%,
            rgb(124, 118,  64) 60%,
            rgb(218, 167,   7) 80%,
            rgb(238, 114,  44) 100%
        );
    background-blend-mode: multiply, normal;
}

.m26_keyword_slider.is_large .m26_keyword_item {
    font-size: clamp(28px, 3.2vw, 50px);
    gap: 1.2em;
    padding: 0 1.2em;
    letter-spacing: -0.01em;
}

.m26_keyword_slider.is_large .m26_keyword_sep {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 768px) {
    .m26_keyword_slider.is_large .m26_keyword_item       { font-size: 24px; }
    .m26_keyword_slider.is_large .m26_keyword_slider_band { padding: 24px 0; margin: 40px -5vw; }
}