/* Promo banner carousel — shared by the post-login overlay (CMS layout) and the landing strip.
   Deliberately framework-neutral: the two layouts load different Bootstrap builds and completely
   different design systems, so nothing here may lean on a theme variable from either. */

.promo-banner {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #0d0d0f;
}

/* The strip sits in the page flow and needs its own edge; inside the modal that edge would
   double up with the modal-content's. */
.promo-banner--inline {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.promo-banner--overlay {
    border-radius: 0;
}

/* Slides are admin-uploaded artwork of unpredictable proportions. Pinning the frame to a fixed
   ratio and cropping to it is what stops the overlay resizing itself mid-rotation, which would
   otherwise move the ✕ out from under the pointer. */
.promo-banner__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.promo-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Corner controls sit above the slides rather than inside them, so they stay put across a
   rotation instead of sliding in and out with the artwork. */
.promo-banner__actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    gap: 8px;
}

.promo-banner__action {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Artwork is arbitrary, so the controls carry their own contrast rather than trusting the
       image behind them to be dark. */
    background: rgba(15, 15, 20, .62);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .15s ease, transform .15s ease;
}

.promo-banner__action:hover,
.promo-banner__action:focus-visible {
    background: rgba(15, 15, 20, .85);
    color: #fff;
    transform: scale(1.06);
}

.promo-banner__action:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* The CTA is the only text the carousel renders. It is anchored bottom-left rather than
   centred so it never lands on a face or a logo in the middle of the artwork. */
.promo-banner__cta {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font: 600 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.promo-banner__cta:hover {
    color: #111;
    transform: translateY(-1px);
}

/* Bootstrap's default indicators are near-invisible on light artwork. */
.promo-banner .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .45);
}

.promo-banner .carousel-indicators .active {
    background: #fff;
}

/* The CTA lives bottom-left, so keep the arrows off it. */
.promo-banner .carousel-control-prev,
.promo-banner .carousel-control-next {
    width: 9%;
}

@media (max-width: 575.98px) {
    /* Portrait phones: a 16:9 crop of a banner designed for desktop loses too much. Squarer
       frame keeps the subject in shot. */
    .promo-banner__frame {
        aspect-ratio: 4 / 3;
    }

    .promo-banner__cta {
        left: 12px;
        bottom: 12px;
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* Honour the OS setting: auto-advance is disabled in JS, and this kills the slide transition
   itself so a manual click doesn't animate either. */
@media (prefers-reduced-motion: reduce) {
    .promo-banner .carousel-item {
        transition: none !important;
    }

    .promo-banner__action,
    .promo-banner__cta {
        transition: none;
    }
}

/* Landing-page strip wrapper. */
.promo-banner-strip {
    max-width: 1120px;
    margin: 0 auto;
    padding: 8px 20px 40px;
}