/*
 * Carousel — a looping, scrollable row of cards.
 * Loaded on every page (see functions.php enqueue()): the schedule, the past
 * events and the blog use it, and so does the global partners section.
 *
 * Markup contract (js/pages/home.js drives it):
 *   .carousel[data-carousel] > [data-carousel-prev] , [data-carousel-track] , [data-carousel-next]
 */

/* Shared by the schedule and the past events: same card width, same gap, same
   looping behaviour (see js/pages/home.js). A section only adds what differs. */
.carousel {
    position: relative;
    width:    100%;
}

/* A scrolling track rather than a transformed one: touch swipe, trackpad and
   keyboard all come for free, and the arrows just call scrollTo(). */
.carousel__track {
    display:          flex;
    align-items:      stretch;
    gap:              24px;
    margin:           0;
    padding:          0;
    list-style:       none;
    overflow-x:       auto;
    scroll-snap-type: x mandatory;
    scrollbar-width:  none;
}

.carousel__track::-webkit-scrollbar {
    display: none;
}

.carousel__item {
    flex:              0 0 286px;
    scroll-snap-align: start;
}

.carousel__arrow {
    position:         absolute;
    top:              50%;
    z-index:          1;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            32px;
    height:           32px;
    padding:          0;
    border:           1px solid rgba(192, 156, 77, .2);
    border-radius:    50%;
    background-color: var(--color-bg-alt);
    color:            var(--color-accent);
    cursor:           pointer;
    transform:        translateY(-50%);
    transition:       border-color var(--transition), color var(--transition);
}

.carousel__arrow:hover,
.carousel__arrow:focus-visible {
    border-color: var(--color-primary);
    color:        var(--color-text);
}

/* The artwork's 32×32 box holds the ring the button now draws as a border, so
   the icon simply fills the button's content box and the chevron stays centred
   instead of being squeezed on one axis only. */
.carousel__arrow .icon {
    width:  100%;
    height: 100%;
}

/* With no overflow to scroll there is nothing to point at. */
.carousel.is-static .carousel__arrow {
    display: none;
}

.carousel__arrow--prev {
    left:      0;
    transform: translateY(-50%) scaleX(-1);
}

.carousel__arrow--next {
    right: 0;
}

/* Only once the viewport can spare the room do the arrows step outside the
   column, where the design puts them; below that they ride the track's edge. */
@media (min-width: 1628px) {

    .carousel__arrow--prev {
        left: -52px;
    }

    .carousel__arrow--next {
        right: -52px;
    }
}


/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* The row bleeds into the page gutter so a card edge stays visible and the
       strip reads as scrollable. */
    .carousel__track {
        margin:  0 -16px;
        padding: 0 16px;
        /* Without this the snap would align the first card to the scrollport
           edge and leave the strip scrolled by the gutter. */
        scroll-padding-left: 16px;
    }

    .carousel__item {
        flex-basis: 260px;
    }

    .carousel__arrow {
        display: none;
    }

}