/* ============================================================================
   RSL Carousel Component
   ============================================================================
   Image slideshow with navigation controls, indicators, and auto-rotation.
   Supports pause on hover/focus and visibility-based auto-play.

   Structure:
   .carousel / .slider
   ├── .carousel-slide (multiple)
   │   └── img
   └── .slider-indicators-container
       ├── .carousel-prev-arrow
       ├── .slider-indicators
       │   └── .slider-indicator (multiple)
       └── .carousel-next-arrow
   ============================================================================ */

/* ──────────────────────────────────────────────
   Carousel Container
   ────────────────────────────────────────────── */

.carousel {
    position: relative;
    overflow: hidden;
}

.slider {
    position: relative;
}

/* ──────────────────────────────────────────────
   Carousel Slides
   ────────────────────────────────────────────── */

.carousel-slide {
    display: none;
    width: 100%;
    height: auto;
}

.carousel-slide img {
    width: 100%;
    height: auto;
}

.carousel-slide.active {
    display: block;
}

/* ──────────────────────────────────────────────
   Indicators Container
   ────────────────────────────────────────────── */

.slider-indicators-container {
    position: absolute;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.5);
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    overflow-x: auto;
}

.slider-indicators {
    top: 10px;
    left: 10px;
    width: 14em;
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.slider-indicators-scroll {
    overflow-x: auto;
    width: calc(100% - 80px);
}

/* ──────────────────────────────────────────────
   Indicator Buttons
   ────────────────────────────────────────────── */

.slider-indicator {
    width: 30px;
    height: 30px;
    border: 1px solid #000;
    border-radius: 50%;
    margin-right: 5px;
    text-align: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #000;
    background-color: #f3eded;
    opacity: 0.5;
    transition: opacity 0.3s;
    flex-shrink: 0;
}

.slider-indicator.active,
.slider-indicator:hover {
    opacity: 1;
}

.carousel-indicator {
    width: 30px;
    height: 30px;
    border: 1px solid #000;
    border-radius: 50%;
    margin-right: 5px;
    text-align: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #fff;
    opacity: 0.5;
    transition: opacity 0.3s;
}

/* ──────────────────────────────────────────────
   Navigation Arrows
   ────────────────────────────────────────────── */

.carousel-prev-arrow,
.carousel-next-arrow {
    background-color: #f3eded;
    color: #000;
}

.carousel-prev-arrow {
    margin-right: 5px;
}

.carousel-next-arrow {
    margin-left: 5px;
}

/* ──────────────────────────────────────────────
   Pause/Resume States
   ────────────────────────────────────────────── */

.pause-carousel > * {
    pointer-events: none;
}

.pause-carousel:focus,
.pause-carousel:hover {
    opacity: 1;
}

/* Pause notification banner */
.temporarily-pause {
    height: 20px;
    background-color: rgba(220, 53, 69, 0.5);
    color: #fff;
    position: absolute;
    z-index: 9;
    width: 350px;
    text-align: center;
    margin-top: 52px;
    margin-left: 10px;
}

/* Resume notification banner */
.temporarily-resume {
    height: 20px;
    background-color: rgba(40, 167, 69, 0.5);
    color: #fff;
    position: absolute;
    z-index: 9;
    width: 350px;
    text-align: center;
    margin-top: 52px;
    margin-left: 10px;
}

/* ──────────────────────────────────────────────
   Overlay
   ────────────────────────────────────────────── */

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

/* ──────────────────────────────────────────────
   Custom Scrollbar Styles
   ────────────────────────────────────────────── */

/* Container background */
.slider-indicators-container,
.slider-indicators-scroll {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Firefox scrollbar */
.slider-indicators-container,
.slider-indicators-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* WebKit (Chrome, Edge, Safari) scrollbar */
.slider-indicators-container::-webkit-scrollbar,
.slider-indicators-scroll::-webkit-scrollbar {
    height: 6px;
    background: transparent;
}

.slider-indicators-container::-webkit-scrollbar-track,
.slider-indicators-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.slider-indicators-container::-webkit-scrollbar-thumb,
.slider-indicators-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
}

.slider-indicators-container::-webkit-scrollbar-thumb:hover,
.slider-indicators-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

.slider-indicators-container::-webkit-scrollbar-corner,
.slider-indicators-scroll::-webkit-scrollbar-corner {
    background: transparent;
}

.slider-indicators-container::-webkit-scrollbar-button,
.slider-indicators-scroll::-webkit-scrollbar-button {
    display: none;
}

/* ============================================================================
   CAROUSEL CAPTIONS — overlay variants
   ============================================================================
   The carousel-caption div is rendered by V2 inside each .carousel-slide.
   By default (no data-caption-style on the slider), it sits below the image
   in normal flow — that's the right call for galleries / portfolios where
   the image is the content and the caption is factual metadata.

   For hero-style and marketing slideshows, set data-caption-style on the
   .slider element to position the caption OVER the image. Three variants:
     - overlay-bottom: caption sits in the lower portion, gradient mask above
     - overlay-center: caption is centered (zoo-template style)
     - side-card:      caption is a translucent card pinned bottom-left

   ADA: every variant guarantees 4.5:1 minimum contrast for body copy and
   3:1 for large text via a combination of gradient-darkened backdrop +
   text-shadow. Captions remain in DOM order (not visual-only) so screen
   readers read them with the slide. prefers-reduced-motion disables the
   subtle entry animation. */

.slider .carousel-slide {
    position: relative;
}

/* Default/below (no data-caption-style) — keep existing flow behavior. */
.slider:not([data-caption-style]) .carousel-caption,
.slider[data-caption-style="below"] .carousel-caption {
    /* Lives below the image in normal block flow. */
    padding: 1rem 1.25rem;
}

/* Overlay variants — all share absolute positioning + white text + shadow. */
.slider[data-caption-style="overlay-bottom"] .carousel-caption,
.slider[data-caption-style="overlay-center"] .carousel-caption,
.slider[data-caption-style="side-card"] .carousel-caption {
    position: absolute;
    z-index: 2;
    color: #ffffff;
    pointer-events: none; /* let arrow/indicator clicks pass through caption area */
}

/* Inside the caption, restore pointer events for any actionable children. */
.slider[data-caption-style="overlay-bottom"] .carousel-caption a,
.slider[data-caption-style="overlay-center"] .carousel-caption a,
.slider[data-caption-style="side-card"] .carousel-caption a,
.slider[data-caption-style="overlay-bottom"] .carousel-caption button,
.slider[data-caption-style="overlay-center"] .carousel-caption button,
.slider[data-caption-style="side-card"] .carousel-caption button {
    pointer-events: auto;
}

.slider[data-caption-style="overlay-bottom"] .carousel-caption *,
.slider[data-caption-style="overlay-center"] .carousel-caption *,
.slider[data-caption-style="side-card"] .carousel-caption * {
    color: inherit;
}

/* Gradient backdrop to guarantee text contrast on any photo.
   Painted via ::before on the slide so it doesn't capture pointer events.

   Uses --rsl-carousel-overlay-rgb (a "R, G, B" triple, e.g. "0, 0, 0")
   so authors can tint the overlay to match the site's brand color
   without rewriting the gradient stops. The default is plain black for
   maximum contrast on any photo. Override per-carousel via the inline
   style attribute on .slider, which V2 _renderCarousel writes from
   config.captionOverlayColor. */
.slider {
    --rsl-carousel-overlay-rgb: 0, 0, 0;
}

.slider[data-caption-style="overlay-bottom"] .carousel-slide::before,
.slider[data-caption-style="overlay-center"] .carousel-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Lift indicators / arrows / pause-button ABOVE the gradient overlay so
   they remain visible (and clickable) when the dark gradient covers the
   top-left corner of the slide. The base .slider-indicators-container
   z-index is 1, same as the gradient — without this bump they hide
   behind it on overlay-style carousels. Scoped to caption-overlay
   variants so non-overlay carousels keep their original stacking. */
.slider[data-caption-style="overlay-bottom"] .slider-indicators-container,
.slider[data-caption-style="overlay-center"] .slider-indicators-container,
.slider[data-caption-style="side-card"] .slider-indicators-container,
.slider[data-caption-style="overlay-bottom"] .pause-container,
.slider[data-caption-style="overlay-center"] .pause-container,
.slider[data-caption-style="side-card"] .pause-container {
    z-index: 3;
}

.slider[data-caption-style="overlay-bottom"] .carousel-slide::before {
    background: linear-gradient(
        to top,
        rgba(var(--rsl-carousel-overlay-rgb), 0.85) 0%,
        rgba(var(--rsl-carousel-overlay-rgb), 0.6) 30%,
        rgba(var(--rsl-carousel-overlay-rgb), 0.2) 60%,
        rgba(var(--rsl-carousel-overlay-rgb), 0) 80%
    );
}

.slider[data-caption-style="overlay-center"] .carousel-slide::before {
    /* Center variant darkens the whole slide a bit so text is readable
       against any photo (sky, snow, beach, anything bright). */
    background: linear-gradient(
        135deg,
        rgba(var(--rsl-carousel-overlay-rgb), 0.65) 0%,
        rgba(var(--rsl-carousel-overlay-rgb), 0.45) 50%,
        rgba(var(--rsl-carousel-overlay-rgb), 0.65) 100%
    );
}

/* Variant 1: overlay-bottom */
.slider[data-caption-style="overlay-bottom"] .carousel-caption {
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 5vw, 4rem);
    text-align: left;
    max-width: 900px;
}

.slider[data-caption-style="overlay-bottom"] .carousel-caption h3 {
    font-size: clamp(1.5rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.slider[data-caption-style="overlay-bottom"] .carousel-caption p {
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    line-height: 1.5;
    margin: 0;
    max-width: 60ch;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Variant 2: overlay-center (zoo-template style) */
.slider[data-caption-style="overlay-center"] .carousel-caption {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 2rem;
    max-width: 900px;
    width: 90%;
}

.slider[data-caption-style="overlay-center"] .carousel-caption h3 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 1rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.slider[data-caption-style="overlay-center"] .carousel-caption p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.5;
    margin: 0 auto;
    max-width: 700px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Variant 3: side-card (editorial / corporate feel) */
.slider[data-caption-style="side-card"] .carousel-caption {
    left: clamp(1rem, 4vw, 3rem);
    bottom: clamp(1rem, 4vw, 3rem);
    max-width: min(440px, 80%);
    padding: 1.5rem 1.75rem;
    background: rgba(var(--rsl-carousel-overlay-rgb), 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.slider[data-caption-style="side-card"] .carousel-caption h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

.slider[data-caption-style="side-card"] .carousel-caption p {
    font-size: clamp(0.875rem, 1.4vw, 1rem);
    line-height: 1.5;
    margin: 0;
    opacity: 0.95;
}

/* Eyebrow badge — appears above the heading in any overlay variant.
   Optional: emitted only when slide.eyebrow is set in the V2 config. */
.carousel-caption .carousel-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.95rem;
    margin-bottom: 0.85rem;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Subtle entry animation when a slide becomes active. Disabled under
   prefers-reduced-motion for ADA compliance. */
@media (prefers-reduced-motion: no-preference) {
    .slider[data-caption-style="overlay-bottom"] .carousel-slide.active .carousel-caption,
    .slider[data-caption-style="overlay-center"] .carousel-slide.active .carousel-caption,
    .slider[data-caption-style="side-card"] .carousel-slide.active .carousel-caption {
        animation: rsl-carousel-caption-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}

@keyframes rsl-carousel-caption-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Center variant has its own transform for centering — animate from a
   slightly different start so the centering math doesn't fight the
   animation translateY. */
@media (prefers-reduced-motion: no-preference) {
    .slider[data-caption-style="overlay-center"] .carousel-slide.active .carousel-caption {
        animation: rsl-carousel-caption-in-center 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}

@keyframes rsl-carousel-caption-in-center {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 12px));
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Mobile responsive — overlay variants get tighter padding so text doesn't
   hit the screen edges. */
@media (max-width: 600px) {
    .slider[data-caption-style="overlay-bottom"] .carousel-caption,
    .slider[data-caption-style="overlay-center"] .carousel-caption {
        padding: 1.25rem;
    }

    .slider[data-caption-style="side-card"] .carousel-caption {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        max-width: none;
    }
}

/* CTA buttons inside captions. Sit below the body text, wrap on small
   screens, restore pointer events (parent caption is pointer-events:none
   for arrow click-through). The standard RSL .btn classes provide colors
   and hover states — we just lay them out here. */
.carousel-caption .carousel-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
    pointer-events: auto;
}

.slider[data-caption-style="overlay-center"] .carousel-caption .carousel-buttons {
    justify-content: center;
}

.slider[data-caption-style="overlay-bottom"] .carousel-caption .carousel-buttons,
.slider[data-caption-style="side-card"] .carousel-caption .carousel-buttons {
    justify-content: flex-start;
}

/* Below-style captions (gallery/portfolio mode) get buttons too, in
   normal block flow. */
.slider:not([data-caption-style]) .carousel-caption .carousel-buttons,
.slider[data-caption-style="below"] .carousel-caption .carousel-buttons {
    margin-top: 0.75rem;
}

@media (max-width: 600px) {
    .carousel-caption .carousel-buttons .btn {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
    }
}

/* Button color overrides for overlay variants. The overlay is dark
   (gradient) so a brand-color outline button blends in. Force white
   text + white border + transparent bg on outline buttons in overlay
   mode (same pattern hero buttons use over hero photos). On hover,
   fill with white and let the text take the brand color for visual
   contrast. Primary buttons keep their solid brand color — they read
   well against any overlay because the fill is opaque. */
.slider[data-caption-style="overlay-bottom"] .carousel-caption .btn-outline,
.slider[data-caption-style="overlay-center"] .carousel-caption .btn-outline,
.slider[data-caption-style="side-card"] .carousel-caption .btn-outline {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    background: transparent !important;
}

.slider[data-caption-style="overlay-bottom"] .carousel-caption .btn-outline:hover,
.slider[data-caption-style="overlay-bottom"] .carousel-caption .btn-outline:focus-visible,
.slider[data-caption-style="overlay-center"] .carousel-caption .btn-outline:hover,
.slider[data-caption-style="overlay-center"] .carousel-caption .btn-outline:focus-visible,
.slider[data-caption-style="side-card"] .carousel-caption .btn-outline:hover,
.slider[data-caption-style="side-card"] .carousel-caption .btn-outline:focus-visible {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* Imageless slides — applied by V2 when slide.image is missing.
   Without an <img> the slide has no intrinsic dimensions, so it
   collapses to 0 and the absolute-positioned caption renders
   against nothing. Give it a sensible min-height + a colored bg
   using the same overlay color variable (brand-tinted), so an
   AI-emitted text-only carousel still shows its content. The
   ::before gradient below still paints over this; net result is
   a subtle solid-color slide instead of an invisible one. */
.carousel-slide-imageless {
    min-height: 320px;
    background: linear-gradient(
        135deg,
        rgba(var(--rsl-carousel-overlay-rgb), 0.88) 0%,
        rgba(var(--rsl-carousel-overlay-rgb), 0.95) 100%
    );
    /* When no image is present, also fall back to a default deep
       neutral so a carousel with no captionOverlayColor still has
       SOMETHING to look at (instead of pure black). */
    background-color: #1f2937;
}

@media (min-width: 768px) {
    .carousel-slide-imageless {
        min-height: 420px;
    }
}