/* Lightweight CMS slider styles. Loaded only as a small site CSS file. */
.cms-slider-wrap.full-bleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
}

.cms-slider,
.cms-slider .carousel-inner,
.cms-slider .carousel-item,
.cms-slider-slide {
    min-height: var(--cms-slider-height, 520px);
}

.cms-slider-slide {
    position: relative;
    overflow: hidden;
    background: #111;
}

.cms-slider picture {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 0;
}

.cms-slider-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.cms-slider-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--cms-slider-overlay, .45);
    z-index: 1;
}

/* The content container needs an actual slider-height so Bootstrap flex can centre captions vertically. */
.cms-slider .cms-slider-slide > .container {
    position: relative;
    z-index: 2;
    min-height: var(--cms-slider-height, 520px);
}

.cms-slider-content {
    max-width: 760px;
    color: #fff;
    padding: 2rem;
    border-radius: 1.25rem;
    background: rgba(0, 0, 0, .22);
    backdrop-filter: blur(2px);
}

.cms-slider-content h1,
.cms-slider-content h2,
.cms-slider-content h3,
.cms-slider-content p {
    color: inherit;
}

.cms-slider .carousel-indicators {
    z-index: 4;
}

.cms-slider .carousel-control-prev,
.cms-slider .carousel-control-next {
    z-index: 4;
}

@media (max-width: 767.98px) {
    .cms-slider,
    .cms-slider .carousel-inner,
    .cms-slider .carousel-item,
    .cms-slider-slide {
        min-height: var(--cms-slider-mobile-height, 360px);
    }

    .cms-slider .cms-slider-slide > .container {
        min-height: var(--cms-slider-mobile-height, 360px);
    }

    .cms-slider-content {
        padding: 1.25rem;
        border-radius: 1rem;
    }

    .cms-slider-content .display-5 {
        font-size: 2rem;
    }
}


.cms-slider-focus-center { object-position: center; }
.cms-slider-focus-top { object-position: top center; }
.cms-slider-focus-bottom { object-position: bottom center; }
.cms-slider-focus-left { object-position: left center; }
.cms-slider-focus-right { object-position: right center; }

.cms-slider-admin-preview .cms-slider-wrap.full-bleed {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 1rem;
}

.cms-slider-admin-preview .cms-slider,
.cms-slider-admin-preview .cms-slider .carousel-inner,
.cms-slider-admin-preview .cms-slider .carousel-item,
.cms-slider-admin-preview .cms-slider-slide {
    min-height: 320px;
}

@media (max-width: 767.98px) {
    .cms-slider-content .btn-lg {
        --bs-btn-padding-y: .5rem;
        --bs-btn-padding-x: .9rem;
        --bs-btn-font-size: 1rem;
    }
}