/*
 * Loop Property — [loop_property_slideshow] structural CSS
 *
 * Background-image slideshow layer. Drop the shortcode into any
 * positioned container (hero, banner, panel) and it fills the
 * container via absolute positioning, sitting behind the existing
 * content. The theme is responsible for ensuring the parent
 * carries `position: relative` (or any non-static position) — see
 * the shortcode's PHPDoc for an example.
 *
 * Default behaviour without JS: only the first slide is visible
 * (.is-active set server-side). A theme module rotates .is-active
 * between slides on a timer; the CSS transition handles the fade.
 *
 * prefers-reduced-motion: the opacity transition is dropped so the
 * crossfade becomes an instant cut. Users who've opted out of
 * motion still see the slides change — just without the sustained
 * mid-transition low-contrast frame.
 */

.loop-property-slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* z-index 0 keeps the slideshow inside the positioned ancestor's
       stacking context but at the back. Following siblings in DOM
       order paint above it naturally (no z-index battle with the
       content the slideshow sits behind). */
    z-index: 0;
    /* Defensive background fallback so the frame is visible before
       the first image paints — avoids a brief blank frame on slow
       connections or while the image is loading. */
    background: #1a1a1a;
    /* Slideshow is decorative — never let it intercept pointer events
       that should reach the hero content sitting on top. */
    pointer-events: none;
}

.loop-property-slideshow .lps-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    /* 0.8s feels editorial without dragging; theme can shorten/lengthen
       by overriding this declaration. */
    transition: opacity 0.8s ease;
}

.loop-property-slideshow .lps-slide.is-active {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .loop-property-slideshow .lps-slide {
        transition: none;
    }
}