/* 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;
    }
}

/* Phase 53 layered slider enhancements: shared background, foreground slide images and fade timing. */
.cms-slider .carousel-item {
    transition-duration: var(--cms-slider-transition, 800ms);
}

.cms-slider-shared-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.cms-slider-layered {
    position: relative;
    background: #111;
}

.cms-slider-layered .cms-slider-slide {
    background: transparent;
}

.cms-slider-layered .cms-slider-overlay {
    z-index: 1;
}

.cms-slider-foreground {
    position: absolute;
    top: 50%;
    right: 2rem;
    z-index: 2;
    width: min(42vw, 520px);
    max-height: calc(var(--cms-slider-height, 520px) - 4rem);
    transform: translateY(-50%);
    pointer-events: none;
}

.cms-slider-foreground picture {
    position: static;
    display: block;
}

.cms-slider-foreground-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(var(--cms-slider-height, 520px) - 4rem);
    object-fit: contain;
}

.cms-slider-foreground-left {
    left: 2rem;
    right: auto;
}

.cms-slider-foreground-center {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    opacity: .28;
}

.cms-slider-foreground-top {
    top: 2rem;
    transform: none;
}

.cms-slider-foreground-bottom {
    top: auto;
    bottom: 2rem;
    transform: none;
}

.cms-slider-layered .cms-slider-content {
    position: relative;
    z-index: 3;
}

@media (max-width: 991.98px) {
    .cms-slider-foreground {
        width: min(45vw, 360px);
        right: 1rem;
        opacity: .75;
    }
}

@media (max-width: 767.98px) {
    .cms-slider-foreground {
        width: min(68vw, 300px);
        max-height: calc(var(--cms-slider-mobile-height, 360px) - 2rem);
        right: 50%;
        top: auto;
        bottom: .75rem;
        transform: translateX(50%);
        opacity: .38;
    }

    .cms-slider-foreground-img {
        max-height: calc(var(--cms-slider-mobile-height, 360px) - 2rem);
    }
}