/* =========================
   SLIDER BASE
========================= */

.gjs-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #111;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
}

/* Sätts enbart på canvas-vyn av slider-pluginet. Den publiceras därför inte
   till webbplatsen, men gör ett markerat bildspel lätt att urskilja även med
   avrundade hörn. */
.gjs-slider.we-slider-editor-selected {
    box-shadow: 0 0 0 3px #1685ff, 0 0 0 6px rgba(22, 133, 255, .22) !important;
}

/* =========================
   SLIDES
========================= */

.gjs-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .46s ease;
    z-index: 1;
    pointer-events: none;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
}


.gjs-slide.is-active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

/* Fixed-height sliders need every image rendered throughout the transition.
   This also neutralizes an old auto-height display:none rule saved on a page. */
.gjs-slider[autoheight="false"] > .gjs-slide,
.gjs-slider:not([autoheight]) > .gjs-slide {
    display: block !important;
}

/* En äldre, sparad CSS-regel kunde lämna .slide-inner med naturlig
   bildhöjd i mobilcanvasen. Då fyllde sliden bara toppen av den fasta
   sliderhöjden och resten blev svart. */
.gjs-slider[autoheight="false"] > .gjs-slide,
.gjs-slider:not([autoheight]) > .gjs-slide,
.gjs-slider[autoheight="false"] > .gjs-slide > .slide-inner,
.gjs-slider:not([autoheight]) > .gjs-slide > .slide-inner {
    height: 100% !important;
}

.gjs-slider[autoheight="false"] > .gjs-slide > .slide-inner > .slide-img,
.gjs-slider:not([autoheight]) > .gjs-slide > .slide-inner > .slide-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Keep the outgoing slide mounted during a fade. This gives the incoming
   image its own composited layer and prevents a visible jump between slides. */
.gjs-slider[transition="fade"] .gjs-slide,
.gjs-slider:not([transition]) .gjs-slide {
    will-change: opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.gjs-slider[transition="fade"] .gjs-slide.is-leaving,
.gjs-slider:not([transition]) .gjs-slide.is-leaving {
    /* Auto-height sliders otherwise hide inactive slides with a generated
       display:none rule before the fade has finished. */
    display: block !important;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

/* =========================
   TRANSITIONS
========================= */

.gjs-slider[transition="none"] .gjs-slide {
    transition: none;
}

.gjs-slider[transition="slide-left"] .gjs-slide,
.gjs-slider[transition="slide-right"] .gjs-slide {
    opacity: 1;
    transition: transform .48s cubic-bezier(.22,.8,.26,1);
}

.gjs-slider[transition="slide-left"] .gjs-slide {
    transform: translateX(100%);
}

.gjs-slider[transition="slide-left"] .gjs-slide.is-active {
    transform: translateX(0);
}

.gjs-slider[transition="slide-right"] .gjs-slide {
    transform: translateX(-100%);
}

.gjs-slider[transition="slide-right"] .gjs-slide.is-active {
    transform: translateX(0);
}

/* =========================
   INNER
========================= */

.slide-inner {
    position: relative;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.slide-content-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    pointer-events: none;
}

.slide-content {
    max-width: 800px;
    width: 100%;
    pointer-events: auto;
    text-align: center;
    color: #fff;
    z-index: 3;
}

/* =========================
   IMAGE (🔥 korrekt)
========================= */

.slide-img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
}

/* =========================
   OVERLAY
========================= */

.slide-overlay { position: absolute; inset: 0; /*    background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%);*/ }

/* =========================
   CONTENT
========================= */



.slide-content h2 {
    display: block !important;
    width: 100%;
    margin: 0 0 12px;
    font-size: 42px;
}

.slide-content p {
    display: block !important;
    width: 100%;
    margin: 0 0 20px;
    font-size: 18px;
}

.slide-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.slide-content .btn {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 8px;
    background: #a855f7;
    color: #fff;
}

.gjs-slider.slider-auto-height {
    height: auto !important;
    overflow: visible;
}

    .gjs-slider.slider-auto-height .gjs-slide {
        position: relative !important;
        inset: auto !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

        .gjs-slider.slider-auto-height .gjs-slide:not(.is-active) {
            display: none;
        }

    .gjs-slider.slider-auto-height .slide-img {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }