/* LeaveLens hero screenshot carousel
   Drop this file at: wwwroot/css/hero-frame-carousel.css */

.ll-seo-home--v3 {
    overflow-x: clip;
}

.ll-seo-v3-hero {
    overflow: visible;
}

.ll-seo-v3-hero .container {
    overflow: visible;
}

.ll-seo-v3-hero-grid {
    overflow: visible;
    align-items: start;
    grid-template-columns: minmax(520px, 0.96fr) minmax(520px, 1.04fr);
    gap: clamp(1.35rem, 2.4vw, 3rem);
}

.ll-seo-v3-hero-copy {
    max-width: 720px;
    min-width: 0;
}

.ll-seo-v3-hero-carousel-wrap {
    position: relative;
    align-self: start;
    justify-self: start;
    z-index: 2;
    width: min(980px, 56vw);
    max-width: none;
    margin-top: clamp(4.45rem, 5.7vw, 6.25rem);
    margin-left: 0;
    transform: translateX(clamp(0.9rem, 2.9vw, 4rem));
}

.ll-hero-frame-carousel {
    width: 100%;
    max-width: none;
}

.ll-hero-frame-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    filter: drop-shadow(0 12px 20px rgba(15, 23, 42, 0.09));
}

.ll-hero-slide {
    position: absolute;
    left: 3.1%;
    right: 3.1%;
    top: 12%;
    bottom: 4.1%;
    overflow: hidden;
    border-radius: 0 0 1.05rem 1.05rem;
    opacity: 0;
    transform: scale(0.992);
    transition: opacity 720ms ease, transform 720ms ease;
    background: #ffffff;
    z-index: 1;
}

.ll-hero-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.ll-hero-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: none;
}

.ll-hero-frame-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 3;
}

.ll-hero-frame-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.48rem;
    margin-top: 0.7rem;
}

.ll-hero-frame-dots button {
    width: 0.52rem;
    height: 0.52rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: width 240ms ease, background-color 240ms ease, opacity 240ms ease;
    opacity: 0.85;
}

.ll-hero-frame-dots button.is-active {
    width: 1.5rem;
    background: #ffcf78;
    opacity: 1;
}

.ll-hero-frame-dots button:focus-visible {
    outline: 3px solid rgba(255, 207, 120, 0.45);
    outline-offset: 3px;
}

@media (min-width: 1400px) {
    .ll-seo-v3-hero-grid {
        grid-template-columns: minmax(600px, 0.98fr) minmax(540px, 1.02fr);
    }

    .ll-seo-v3-hero-copy {
        max-width: 780px;
    }

    .ll-seo-v3-hero-carousel-wrap {
        width: min(1080px, 58vw);
        margin-top: clamp(4.75rem, 5.4vw, 6.35rem);
        transform: translateX(clamp(1rem, 3.5vw, 5.25rem));
    }
}

@media (max-width: 1199.98px) {
    .ll-seo-v3-hero-grid {
        grid-template-columns: 1fr;
    }

    .ll-seo-v3-hero-copy {
        max-width: 760px;
    }

    .ll-seo-v3-hero-carousel-wrap {
        width: min(980px, 100%);
        margin: 2rem auto 0;
        justify-self: center;
        transform: none;
    }
}

@media (max-width: 767.98px) {
    .ll-hero-frame-dots {
        margin-top: 0.65rem;
    }

    .ll-seo-v3-hero-carousel-wrap {
        width: min(720px, 108vw);
        margin-left: 50%;
        transform: translateX(-50%);
    }
}


/* v9 minor carousel containment so the hero text keeps enough room */
@media (max-width: 767.98px) {
    .ll-seo-v3-hero-carousel-wrap {
        width: min(720px, 100%);
        margin: 1.35rem auto 0;
        transform: none;
    }
}