/* Auto Carousel Base Styles */
.auto-carousel {
    position: relative;
    margin: 1rem auto !important;
    max-width: 900px;
    border-radius: 8px;
    overflow: hidden;
}

.auto-carousel ul {
    /* Horizontal scroll only. overflow-y:hidden locks the strip from being
       nudged vertically -- the 3D swivel can project a card past the height
       and make the container scrollable, which offsets the whole carousel. */
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    scroll-snap-points-y: repeat(100%);
    scroll-behavior: smooth;
    /* Letterbox behind slides that do not fill the strip. Only visible below
       992px -- the peek breakpoints set this transparent. Exposed as a custom
       property so a site can put its own surface behind the slides; the
       defaults are theme-reactive so it is never a dark band on a light page. */
    background: var(--ac-strip-bg, #1a1a1a);
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin: 0 !important;
    padding: 0;
    cursor: grab;
    user-select: none;
}

/* Light-mode default for the strip letterbox. This sets no custom property of
   its own -- it only re-consumes --ac-strip-bg with a different fallback. If
   the light default were assigned ON the ul, it would shadow any site value
   set at :root (a nearer element always wins for custom properties), so a
   consuming site could override the dark strip but never the light one.

   POSITION IS LOAD-BEARING: this must stay ABOVE the peek breakpoints, which
   set `background: transparent`. Appended after them it out-ordered those
   rules and painted the strip at every width in light mode only -- the strip
   showed through as a band that fought whatever block the carousel sat in,
   while dark mode (whose default is set in the base rule above) behaved. */
[data-bs-theme="light"] .auto-carousel ul {
    background: var(--ac-strip-bg, #e9e9ee);
}

.auto-carousel ul.grabbing {
    cursor: grabbing;
    scroll-snap-type: none;
}

.auto-carousel ul::-webkit-scrollbar {
    display: none;
}

/* Default: Full-width slides (mobile/tablet) */
.auto-carousel ul li {
    position: relative;
    min-width: 100%;
    list-style: none;
    background: url() center center / cover no-repeat;
    scroll-snap-align: start;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* During the loop teleport, kill transitions so the destination slide snaps
   straight to its selected state (no replayed enlarge). See handleSettle(). */
.auto-carousel ul.no-anim li {
    transition: none !important;
}

.auto-carousel ul li > img {
    border-radius: 0;
    width: 100%;
    height: auto;
    display: block;
}

.auto-carousel ul li > div {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 20px;
}

/* Navigation dots */
.auto-carousel ol {
    position: absolute;
    bottom: 15px;
    display: flex;
    justify-content: center;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    margin: 0 !important;
    padding: 0;
}

.auto-carousel ol li {
    list-style: none;
    padding: 0 5px;
}

.auto-carousel ol li a {
    display: block;
    height: 10px;
    width: 10px;
    border: 2px solid white;
    background: transparent;
    border-radius: 100%;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.auto-carousel ol li.selected a {
    background: white;
}

/* Arrow navigation */
.auto-carousel .prev,
.auto-carousel .next {
    display: none;
    user-select: none;
    cursor: pointer;
    font-size: 50px;
    color: white;
    position: absolute;
    left: 0;
    padding: 25px 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    line-height: 0;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.auto-carousel .next {
    left: auto;
    right: 0;
}

.auto-carousel .prev:hover,
.auto-carousel .next:hover {
    color: #ddd;
}

/* ===========================================
   PEEK EFFECT: Show prev/next slides at edges
   Only on screens wider than 1200px
   =========================================== */
@media (min-width: 1200px) {
    .auto-carousel {
        max-width: 1100px;
        overflow: visible;
    }

    /* Container for the peek effect.
       The mask fades the scrolling strip to transparent at the left/right
       window extents, so the peeking neighbours dissolve softly at the edges
       instead of hard-cutting. It's anchored to the viewport (not the
       content), so the fade always sits at the window edges as slides pass. */
    .auto-carousel ul {
        padding: 0;
        background: transparent;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
                mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    }

    /* Leading / trailing spacers.
       These are REAL flex items, not container padding: a flex scroll
       container drops its trailing padding from scrollWidth, so padding
       alone never lets the last slide scroll far enough to reach centre.
       A flex item's width always counts, so these extend the scroll range
       by (viewport - slide)/2 on each end -- exactly enough for the first
       and last slides to sit dead-centre. Sized to match the 58% slide. */
    .auto-carousel ul::before,
    .auto-carousel ul::after {
        content: '';
        flex: 0 0 21%;
    }

    /* Slides take 58% width, so a generous slice of each neighbour shows */
    .auto-carousel ul li {
        min-width: 58%;
        scroll-snap-align: center;
        border-radius: 8px;
        overflow: hidden;
        margin: 0 1%;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);

        /* Non-focused: still clearly visible, just eased back and dimmed.
           rotateY(var(--lean)) is 0 unless the .swivel option sets --lean. */
        opacity: 0.55;
        transform: perspective(var(--persp, 1400px)) rotateY(var(--lean, 0deg)) scale(0.85);
        transform-origin: center center;
        transition: opacity 0.45s ease, transform 0.45s ease, box-shadow 0.45s ease;
        will-change: transform, opacity;
    }

    /* Focused slide: full opacity, full size (enlarged vs neighbours),
       lifted above them */
    .auto-carousel ul li.selected {
        opacity: 1;
        transform: perspective(var(--persp, 1400px)) rotateY(0deg) scale(1);
        box-shadow: 0 8px 30px rgba(0,0,0,0.45);
        z-index: 2;
    }

    /* Adjust arrow positions for peek layout */
    .auto-carousel .prev {
        left: 2%;
    }

    .auto-carousel .next {
        right: 2%;
    }
}

/* Medium screens: subtle peek */
@media (min-width: 992px) and (max-width: 1199px) {
    .auto-carousel {
        max-width: 800px;
    }

    .auto-carousel ul {
        padding: 0;
        background: transparent;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
                mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    }

    /* End spacers so the first/last slide can reach centre (see 1200px note) */
    .auto-carousel ul::before,
    .auto-carousel ul::after {
        content: '';
        flex: 0 0 18%;
    }

    .auto-carousel ul li {
        min-width: 66%;
        scroll-snap-align: center;
        margin: 0 0.5%;
        border-radius: 6px;
        overflow: hidden;

        /* Focus pass (milder than desktop; overflow is clipped here so the
           focused slide stays at natural size and neighbours shrink) */
        opacity: 0.6;
        transform: perspective(var(--persp, 1200px)) rotateY(var(--lean, 0deg)) scale(0.9);
        transform-origin: center center;
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .auto-carousel ul li.selected {
        opacity: 1;
        transform: perspective(var(--persp, 1200px)) rotateY(0deg) scale(1);
    }
}

/* ===========================================
   CUSTOM SIZE: opt-in larger carousel (maxwidth="..." on the shortcode).
   Breaks out of the page container, centred on the viewport, capped at the
   custom width OR the content width (--ac-vw) -- whichever is smaller -- so it
   can grow past the container yet never overflow. Peek breakpoints only;
   mobile is full-bleed regardless.
   =========================================== */
@media (min-width: 992px) {
    .auto-carousel.wide {
        --carousel-w: min(var(--carousel-max, 1100px), var(--ac-vw, 100%));
        max-width: none;
        width: var(--carousel-w);
        margin: 1rem calc(50% - var(--carousel-w) / 2) !important;
    }
}

/* ===========================================
   SWIVEL: opt-in coverflow lean (swivel="true" on the shortcode).
   Side slides tilt in 3D toward the centre; as a slide reaches the middle it
   swivels flat -- cards spinning into place. Pure CSS 3D transform
   (GPU-composited), animated by the class transition -- no per-frame JS.
   The .side-left / .side-right direction classes are set in setSelected();
   --lean feeds the rotateY() already baked into the peek transforms above.
   =========================================== */
.auto-carousel.swivel ul li.side-left  { --lean:  22deg; }  /* right edge recedes */
.auto-carousel.swivel ul li.side-right { --lean: -22deg; }  /* left edge recedes  */

/* Springier ease so the flatten reads as a snap/settle into place. */
.auto-carousel.swivel ul li {
    transition: opacity 0.45s ease,
                transform 0.55s cubic-bezier(0.33, 1.15, 0.5, 1),
                box-shadow 0.45s ease;
}

/* Coverflow tuning (peek breakpoints only): a tighter perspective for a much
   stronger tilt, dimmed + overlapping side cards drawn in close, and the focused
   card lifted above them. The edge fade stays only on the largest view (below). */
@media (min-width: 992px) {
    .auto-carousel.swivel ul {
        /* No CSS scroll-snap here: snap centres the TRANSFORMED (skewed) box,
           whose centre shifts as a leaned card flattens -- so it would chase the
           card sideways after the swivel. The JS centres off layout geometry
           (offsetLeft = the card's rotation axis = its image centre), which is
           stable, and re-centres on drag-end (see endDrag). */
        scroll-snap-type: none;
    }

    .auto-carousel.swivel ul li {
        --persp: 850px;          /* closer vanishing point = deeper 3D */
        margin: 0 -8%;           /* pull the cards in close / overlap */
        opacity: 0.65;
    }

    .auto-carousel.swivel ul li.selected {
        opacity: 1;
        z-index: 3;              /* focused card sits above the tucked sides */
    }
}

/* Edge fade lives only on the largest view: >=1200 inherits the base ul mask.
   At medium the carousel is effectively full-width, so hard-edge it (drop the
   inherited mask). Narrow/mobile has no mask to begin with. */
@media (min-width: 992px) and (max-width: 1199px) {
    .auto-carousel.swivel ul {
        -webkit-mask-image: none;
                mask-image: none;
    }
}

/* Small screens: full-bleed edge-to-edge, dots below the slides.
   No peek here -- the mobile slides run the full viewport width, and the loop
   (driven by auto-carousel.js, which is viewport-agnostic) works the same as
   on desktop; centre snap just makes the teleport land exactly on a snap point. */
@media (max-width: 991px) {
    .auto-carousel {
        /* Break out of all container padding to span the full CONTENT width --
           i.e. the viewport minus any scrollbar. --ac-vw is set from JS to
           document.documentElement.clientWidth (excludes the scrollbar, unlike
           100vw, which overshoots by the scrollbar width on desktop-narrow and
           forces a horizontal scrollbar). Falls back to 100% (contained) until
           JS runs, so there is never any horizontal overflow. */
        width: var(--ac-vw, 100%);
        max-width: none;
        margin: 1rem calc(50% - var(--ac-vw, 100%) / 2) !important;
        border-radius: 0;
    }

    .auto-carousel ul li {
        min-width: 100%;
        scroll-snap-align: center;
    }

    /* Dots below the image instead of overlaid, so nothing covers the
       screenshot. currentColor (via color:inherit) keeps them legible on
       whatever section sits behind, rather than the over-image white. */
    .auto-carousel ol {
        position: static;
        transform: none;
        left: auto;
        width: 100%;
        margin: 0.75rem 0 0 !important;
    }

    .auto-carousel ol li a {
        color: inherit;
        border-color: currentColor;
        box-shadow: none;
    }

    .auto-carousel ol li.selected a {
        background: currentColor;
    }
}

/* ===========================================
   SLIDE LINKS & CAPTIONS
   Two styles: caption-bar and clickable-slide
   =========================================== */

/* Enable pointer events on slides with links */
.auto-carousel ul li:has(a),
.auto-carousel ul li:has(.caption) {
    pointer-events: auto;
}

/* --- STYLE 1: Caption Bar Overlay --- */
.auto-carousel .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    padding: 2rem 1.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.auto-carousel .caption-title {
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.auto-carousel .caption-subtitle {
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
}

.auto-carousel .caption-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--bs-primary, #007bff);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease;
}

.auto-carousel .caption-btn:hover {
    background: var(--bs-primary-dark, #0056b3);
    transform: translateY(-2px);
    color: white;
}

/* --- STYLE 2: Clickable Slide with Title Overlay --- */
.auto-carousel .slide-link {
    display: block;
    position: relative;
    text-decoration: none;
}

.auto-carousel .slide-link img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.auto-carousel .slide-link:hover img {
    transform: scale(1.02);
}

.auto-carousel .slide-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    padding: 3rem 1.5rem 1rem;
    color: white;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    transition: padding 0.3s ease;
}

.auto-carousel .slide-link:hover .slide-title {
    padding-bottom: 1.25rem;
}

/* Move navigation dots up when captions are present */
.auto-carousel:has(.caption) ol,
.auto-carousel:has(.slide-title) ol {
    bottom: 70px;
}

@media (max-width: 991px) {
    .auto-carousel .caption {
        padding: 1.5rem 1rem 0.75rem;
    }

    .auto-carousel .caption-title {
        font-size: 1rem;
    }

    .auto-carousel .caption-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }

    .auto-carousel .slide-title {
        font-size: 0.95rem;
        padding: 2rem 1rem 0.75rem;
    }

    .auto-carousel:has(.caption) ol,
    .auto-carousel:has(.slide-title) ol {
        bottom: 55px;
    }
}

/* ===========================================
   THEME-PAIRED SLIDES
   A slide whose image is half of a light/dark pair (see
   layouts/partials/gs/carousel-slide.html) ships BOTH files; this picks the
   one matching the active theme. Docsy stamps data-bs-theme on <html>, so
   no script is involved -- the correct variant is painted on first frame and
   the toggle costs nothing.

   Dark is the default so a slide is correct before any theme attribute
   exists, matching the cover-hero wordmark fallback.

   The selectors are this long on purpose: `.auto-carousel ul li > img` above
   sets display:block at (0,1,3), so a bare `.ac-img--light` would lose to it.
   =========================================== */

.auto-carousel ul li > img.ac-img--light {
    display: none;
}

[data-bs-theme="light"] .auto-carousel ul li > img.ac-img--dark {
    display: none;
}

[data-bs-theme="light"] .auto-carousel ul li > img.ac-img--light {
    display: block;
}