/**
 * Hero slideshow: Bootstrap 5 carousel (indicators + captions).
 * Loaded after Bootstrap in includes/bootstrap_css_link.php.
 *
 * Bootstrap’s carousel root is .carousel.slide — must not inherit legacy .slide { opacity:0 }
 * if any unscoped rule slips through; keep hero carousel visible.
 */
#heroSlideshowCarousel.carousel.slide.eff-hero-carousel,
#heroSlideshow .carousel.slide.eff-hero-carousel {
    opacity: 1 !important;
    position: relative !important;
    transform: none !important;
    overflow: hidden;
}

#heroSlideshow .eff-hero-carousel .carousel-item {
    min-height: 420px;
    background-color: #1a1a1a;
}

#heroSlideshow .eff-hero-carousel .carousel-item > img.d-block,
#heroSlideshow .eff-hero-carousel .carousel-item > video.d-block {
    width: 100%;
    min-height: 420px;
    max-height: 70vh;
    object-fit: cover;
}

#heroSlideshow .eff-hero-carousel .carousel-caption {
    text-align: center;
    padding-bottom: 3.25rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

#heroSlideshow .eff-hero-carousel .carousel-caption h2 {
    font-size: clamp(1.5rem, 4vw, 3.25rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #fff;
}

#heroSlideshow .eff-hero-carousel .carousel-caption p {
    font-size: clamp(0.95rem, 2vw, 1.25rem);
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.95);
}

/* Beat common.css `.dark-theme .slideshow-section * { color: inherit !important; }` so captions stay readable */
.dark-theme #heroSlideshow .eff-hero-carousel .carousel-caption,
.dark-theme #heroSlideshow .eff-hero-carousel .carousel-caption h2,
.dark-theme #heroSlideshow .eff-hero-carousel .carousel-caption p,
.dark-theme #heroSlideshow .eff-hero-carousel .carousel-caption .btn {
    color: #fff !important;
}

#heroSlideshow .eff-hero-carousel .carousel-caption .slide-btn,
#heroSlideshow .eff-hero-carousel .carousel-caption .btn {
    text-shadow: none;
}

/* PageSpeed / Lighthouse — tap targets: 48px minimum hit area; visual dot via ::after */
#heroSlideshow .eff-hero-carousel .carousel-indicators {
    margin-bottom: 0.5rem;
    gap: 0.5rem;
    row-gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    box-sizing: border-box;
}

#heroSlideshow .eff-hero-carousel .carousel-indicators [type="button"],
#heroSlideshow .eff-hero-carousel .carousel-indicators [data-bs-target="#heroSlideshowCarousel"] {
    position: relative;
    flex: 0 0 auto !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-clip: border-box !important;
    box-shadow: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
}

#heroSlideshow .eff-hero-carousel .carousel-indicators [type="button"]::after,
#heroSlideshow .eff-hero-carousel .carousel-indicators [data-bs-target="#heroSlideshowCarousel"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

#heroSlideshow .eff-hero-carousel .carousel-indicators [type="button"].active::after,
#heroSlideshow .eff-hero-carousel .carousel-indicators [data-bs-target="#heroSlideshowCarousel"].active::after {
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.28);
}

@media (max-width: 768px) {
    #heroSlideshow .eff-hero-carousel .carousel-item,
    #heroSlideshow .eff-hero-carousel .carousel-item > img.d-block,
    #heroSlideshow .eff-hero-carousel .carousel-item > video.d-block {
        min-height: 360px;
        max-height: 55vh;
    }

    #heroSlideshow .eff-hero-carousel .carousel-caption {
        padding-bottom: 2.75rem;
    }
}

@media (max-width: 576px) {
    #heroSlideshow .eff-hero-carousel .carousel-item,
    #heroSlideshow .eff-hero-carousel .carousel-item > img.d-block,
    #heroSlideshow .eff-hero-carousel .carousel-item > video.d-block {
        min-height: 300px;
        max-height: 50vh;
    }
}

/* After common.css mobile rules: host must not use transform:scale or fixed height (layout vs paint mismatch). */
#heroSlideshow.eff-hero-bootstrap {
    transform: none !important;
    height: auto !important;
}

/* Customer review Bootstrap carousel: css/eff-reviews-bootstrap-carousel.css (footer, after common.css) */