/*
 * OWG slider — CSS scroll-snap carousel.
 * Native touch scrolling on mobile: no scroll hijacking, no height jumps.
 * Styled to match the Bootstrap 5 carousel it replaced (one full-width card,
 * grey indicator bars overlaid at the bottom, chevrons in 15% side zones).
 * Used by templates/partials/owg_carousel.html.twig.
 */

.owg-slider {
    position: relative;
}

.owg-slider__viewport {
    overflow: hidden;
}

.owg-slider__track {
    display: flex;
    gap: 0.75rem;                              /* only visible mid-swipe */
    margin: 0;
    padding: 0;

    overflow-x: auto;
    overscroll-behavior-x: contain;            /* don't chain to page/browser back */
    scroll-snap-type: x mandatory;
    scroll-behavior: auto;                     /* the JS wrap sets scrollLeft directly */
    scrollbar-width: none;                     /* Firefox */
}
.owg-slider__track::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

.owg-slider__slide {
    flex: 0 0 auto;
    width: 100%;                               /* one card fills the frame, as before */
    scroll-snap-align: center;
    scroll-snap-stop: always;                  /* one card per flick — no skating past */
    display: flex;                             /* stretch inner .col/.card to equal height */
}

/* the generator partials emit  <div class="col"><div class="card">… */
.owg-slider__slide > .col {
    width: 100%;
    max-width: none;
    padding: 0;
    display: flex;
}
.owg-slider__slide .card {
    width: 100%;
    height: 100%;
}

/* ---- prev / next ---------------------------------------------------------
   Compact discs by default so they stay usable on a phone without eating the
   swipe area; Bootstrap's full-height 15% side zones from 700px up.          */
.owg-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0 0.25rem;

    color: #fff;
    background: none;
    border: 0;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}
.owg-slider__nav:hover,
.owg-slider__nav:focus { opacity: 1; }

/* BS drew a bare white chevron, which disappears on a white card. Sit it on a
   dark scrim so it reads over both card and photo — but as a radial fade, not
   a flat disc: at this size a solid circle lies on the card like a sticker and
   blots out the text or photo behind it, while a fade only darkens what is
   directly under the chevron and dissolves into the card at the rim. No
   box-shadow for the same reason — it would draw a hard ring exactly where the
   fill has already gone. */
.owg-slider__nav svg {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.65rem;
    background: radial-gradient(closest-side,
                                rgba(0, 0, 0, 0.72),
                                rgba(0, 0, 0, 0.66) 40%,
                                rgba(0, 0, 0, 0) 100%);
    border-radius: 50%;                        /* keeps the hit area circular */
    transition: transform 0.12s ease;
}
/* The old hover cue was a darker background-color, which a gradient can't
   transition. A slight swell does the same job and animates cleanly, on top of
   the 0.85 -> 1 opacity fade the button already carries. */
.owg-slider__nav:hover svg { transform: scale(1.08); }
.owg-slider__nav:active svg { transform: scale(0.92); }
.owg-slider__nav--prev { left: 0; }
.owg-slider__nav--next { right: 0; }
.owg-slider__nav[hidden] { display: none !important; }

@media (min-width: 700px) {
    .owg-slider__nav {
        top: 0;
        bottom: 0;
        transform: none;
        width: 15%;
        padding: 0;
    }
    /* Bootstrap's 15% side zones only exist to place the chevron; as a click
       target they swallowed everything under them — the workshop cards' own
       "Details" toggle sits right inside the left zone. Keep the geometry (it
       centres the disc), but let only the visible disc take the pointer.
       :hover / :active still reach the button: they match ancestors of the
       hit element. Keyboard focus and clicks are unaffected. */
    .owg-slider__nav { pointer-events: none; }
    .owg-slider__nav svg { pointer-events: auto; }

    /* With the pointer confined to the disc, the disc is the whole button and
       has to carry that weight on a big screen. It only grows here: on a phone
       the arrows stay compact so they don't sit in the way of the swipe. */
    .owg-slider__nav svg {
        width: 3.5rem;
        height: 3.5rem;
        padding: 0.85rem;
    }
}

/* ---- indicators — Bootstrap's bars, greyed as custom.css did ------------- */
.owg-slider__dots {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;

    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0 15% 1rem;
}
.owg-slider__dots:empty { display: none; }

.owg-slider__dot {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    padding: 0;
    margin: 0 3px;

    background-color: gray;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;        /* enlarges the tap target */
    border-bottom: 10px solid transparent;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
.owg-slider__dot[aria-current="true"] { opacity: 1; }

/* keyboard focus */
.owg-slider__nav:focus-visible,
.owg-slider__dot:focus-visible {
    outline: 2px solid #486144;
    outline-offset: 2px;
}