/* ─── Heroslider (FlexSlider / Canvas) ───────────────────────────────────── */

/* Reset flexslider.css defaults */
.fslider .flexslider {
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    /* No overflow:hidden here – FlexSlider sets it internally,
       and we need the direction-nav arrows to slide in from outside */
}

/* ─── Caption – Canvas's captionPosition() JS only runs on .slider-element;
       replicate vertical centring via CSS instead                            ─ */

.fslider .flex-caption {
    top: 50% !important;
    transform: translateY(-50%);
    left: 40px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .fslider.hero-size-flat .slide img { height: 260px; }
    .fslider.hero-size-big  .slide img { height: 360px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .fslider.hero-size-flat .slide img { height: 340px; }
    .fslider.hero-size-big  .slide img { height: 500px; }
}


.heroslider {

    .hero-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        &.dark {
            filter: brightness(0.75);
        }
    }

    .caption {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        text-align: center;
        h2 {
            font-size: 4rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 700;
            line-height: 1;
            margin-bottom: 0;
            color: inherit;
        }

        p {
            margin-top: 30px;
            margin-bottom: 10px;
            font-size: 24px;
        }


    }

    .splide__arrows {
        position: absolute;
        z-index: 1;
        top: 50%;
        width: 100%;
        .splide__arrow {
            position: absolute;
            z-index: 1;
            top: 50%;
            width: 52px;
            height: 52px;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.3);
            border: 0;
            svg {
                fill: white;
                width: 16px;
            }
            &:hover {
                background: rgba(0, 0, 0, 0.6);
            }
        }
        .splide__arrow--prev {
            left: 0;
            svg {
                transform: rotate(180deg);
            }
        }
        .splide__arrow--next {
            right: 0;
        }
    }
}