/* Hero Slideshow Frontend Styles */

/* Slideshow wrapper - positioned relative to parent figure */
.hero-slideshow-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none; /* Prevent interfering with hero content */
    z-index: 1; /* Below hero content */
}

/* Individual slide containers (picture elements) */
.hero-slideshow-wrapper .hero-slideshow-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: none;
    pointer-events: none;
}

/* Active slide */
.hero-slideshow-wrapper .hero-slideshow-image.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Images within slides */
.hero-slideshow-wrapper .hero-slideshow-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ensure picture element takes full space */
.hero-slideshow-wrapper picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* Fade Transition - only affects the picture elements */
.hero-slideshow-wrapper .hero-slideshow-image.fade-in {
    animation: heroSlideshowFadeIn 1s ease-in-out;
}

.hero-slideshow-wrapper .hero-slideshow-image.fade-out {
    animation: heroSlideshowFadeOut 1s ease-in-out;
}

@keyframes heroSlideshowFadeIn {
    from {
        opacity: 0;
        visibility: visible;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes heroSlideshowFadeOut {
    from {
        opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: visible;
    }
}

/* Slide Transition - only affects the picture elements */
.hero-slideshow-wrapper .hero-slideshow-image.slide-in {
    animation: heroSlideshowSlideIn 1s ease-in-out;
    visibility: visible;
}

.hero-slideshow-wrapper .hero-slideshow-image.slide-out {
    animation: heroSlideshowSlideOut 1s ease-in-out;
    visibility: visible;
}

@keyframes heroSlideshowSlideIn {
    from {
        transform: translateX(100%);
        opacity: 1;
        visibility: visible;
    }
    to {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }
}

@keyframes heroSlideshowSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }
    to {
        transform: translateX(-100%);
        opacity: 1;
        visibility: visible;
    }
}

/* Ensure hero overlay stays above slideshow but below content */
.hero__background {
    position: relative;
}

/* Keep the overlay above the slideshow */
.hero__background::after {
    position: absolute;
    z-index: 5; /* Above slideshow images but below hero content */
}

/* Ensure hero content stays above everything */
.hero__inner {
    position: relative;
    z-index: 10;
}

/* Fix for image-fit class if needed */
.hero__background.image-fit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .hero-slideshow-wrapper .hero-slideshow-image,
    .hero-slideshow-wrapper .hero-slideshow-image.fade-in,
    .hero-slideshow-wrapper .hero-slideshow-image.fade-out,
    .hero-slideshow-wrapper .hero-slideshow-image.slide-in,
    .hero-slideshow-wrapper .hero-slideshow-image.slide-out {
        animation: none !important;
        transition: none !important;
    }

    /* Instant switch for reduced motion */
    .hero-slideshow-wrapper .hero-slideshow-image.active {
        opacity: 1;
        visibility: visible;
    }
}

/* Mobile responsiveness */
@media (max-width: 767px) {
    .hero-slideshow-wrapper {
        height: 100%;
    }

    .hero-slideshow-wrapper picture,
    .hero-slideshow-wrapper .hero-slideshow-image,
    .hero-slideshow-wrapper .hero-slideshow-image img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

/* Debug helper - remove in production */
.hero-slideshow-debug {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 10px;
    z-index: 9999;
    font-size: 12px;
    font-family: monospace;
}