/* Market page "Producers attending" carousel — scoped to .hfm-attendee-carousel only. */

/* Arrows sit in a row below the cards rather than over the images. */
.hfm-attendee-carousel .hfm-attendee-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.hfm-attendee-carousel .hfm-attendee-carousel__controls .splide__arrow {
    position: static;
    transform: none;
    width: 3rem;
    height: 3rem;
    opacity: 1;
    background: var(--wp--preset--color--dark-green);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.hfm-attendee-carousel .hfm-attendee-carousel__controls .splide__arrow svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: #fff;
}

.hfm-attendee-carousel .hfm-attendee-carousel__controls .splide__arrow:hover:not(:disabled) {
    opacity: 1;
    transform: scale(1.08);
}

.hfm-attendee-carousel .hfm-attendee-carousel__controls .splide__arrow:focus-visible {
    outline: 3px solid var(--wp--preset--color--dark-green);
    outline-offset: 3px;
}

.hfm-attendee-carousel .hfm-attendee-carousel__counter {
    min-width: 7ch;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Nothing to scroll to: hide the controls. */
.hfm-attendee-carousel:not(.is-overflow) .hfm-attendee-carousel__controls {
    display: none;
}

/* Heading lives outside .splide__track; restore the spacing it had inside the track. */
.hfm-attendee-carousel.splide > h3.wp-block-heading {
    margin-top: 3rem;
    margin-bottom: 2rem;
}

/*
 * Mobile: let the peeking next card run to the right edge of the screen instead of
 * being cropped at the page gutter. The Events Calendar wraps the event in a
 * container with overflow:hidden, so on market pages with this carousel we let
 * that wrapper overflow and clip horizontally one level up (at the screen edge)
 * instead, which keeps the page from scrolling sideways.
 */
@media screen and (max-width: 640px) {
    .tribe-events-single:has(.hfm-attendee-carousel) {
        overflow-x: clip;
    }

    .tribe-events-single > .tribe_events:has(.hfm-attendee-carousel) {
        overflow: visible;
    }

    .hfm-attendee-carousel .splide__track {
        margin-right: calc(50% - 50vw);
    }
}