/*
 * ROCK Doorlopende Fotobanner
 *
 * Alle afbeeldingen hebben dezelfde hoogte.
 * De breedte wordt bepaald door de originele beeldverhouding.
 */

.rock-doorlopende-fotobanner {
    --rock-banner-height: 240px;
    --rock-banner-height-tablet: 200px;
    --rock-banner-height-mobile: 160px;
    --rock-banner-gap: 0px;
    --rock-banner-duration: 100s;
    --rock-banner-group-width: 0px;
    --rock-banner-manual-offset: 0px;

    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}


/*
 * Bewegende baan
 */
.rock-doorlopende-fotobanner__track {
    display: flex;
    align-items: flex-start;

    width: max-content;
    min-width: max-content;

    gap: var(--rock-banner-gap);

    will-change: transform;
}


/*
 * De twee identieke afbeeldingsgroepen.
 */
.rock-doorlopende-fotobanner__group {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    width: max-content;
    gap: var(--rock-banner-gap);
}


/*
 * Klikbaar afbeeldingsitem.
 *
 * De breedte wordt door JavaScript bepaald met aspect-ratio.
 */
.rock-doorlopende-fotobanner__link {
    display: block;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--rock-banner-height);
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0;
    line-height: 0;
    overflow: visible;
    cursor: zoom-in;
}

.rock-doorlopende-fotobanner__link:hover,
.rock-doorlopende-fotobanner__link:focus,
.rock-doorlopende-fotobanner__link:active {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit;
    text-decoration: none;
}


/*
 * Afbeelding vult het item volledig.
 *
 * Het item heeft exact dezelfde verhouding als de afbeelding,
 * waardoor er niets wordt afgesneden.
 */
.rock-doorlopende-fotobanner__image {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center;
    padding: 0 !important;
    margin: 0 !important;
    border: 0;
}


/*
 * Automatische beweging
 */
.rock-doorlopende-fotobanner.is-ready
.rock-doorlopende-fotobanner__track {
    animation:
        rock-doorlopende-fotobanner-scroll
        var(--rock-banner-duration)
        linear
        infinite;
}


/*
 * De handmatige verschuiving via de pijlen wordt in beide
 * animatiestanden meegenomen.
 */
@keyframes rock-doorlopende-fotobanner-scroll {
    from {
        transform: translate3d(
            var(--rock-banner-manual-offset),
            0,
            0
        );
    }

    to {
        transform: translate3d(
            calc(
                -1 * var(--rock-banner-group-width) +
                var(--rock-banner-manual-offset)
            ),
            0,
            0
        );
    }
}


/*
 * Pauzeren bij hover of geopende lightbox.
 */
.rock-doorlopende-fotobanner[data-pause-on-hover="true"]:hover
.rock-doorlopende-fotobanner__track,
.rock-doorlopende-fotobanner.is-lightbox-open
.rock-doorlopende-fotobanner__track {
    animation-play-state: paused;
}


/*
 * Omgekeerde richting.
 */
.rock-doorlopende-fotobanner[data-direction="rechts"]
.rock-doorlopende-fotobanner__track {
    animation-direction: reverse;
}


/*
 * Navigatiepijlen
 */
.rock-doorlopende-fotobanner__previous,
.rock-doorlopende-fotobanner__next {
    position: absolute;
    top: 50%;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 60px;

    padding: 0 !important;
    margin: 0;

    border: 0 !important;
    border-radius: 0;

    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: none !important;

    color: #161616;
    font-size: 30px;
    line-height: 1;

    cursor: pointer;

    transform: translateY(-50%);
    transition:
        background-color 200ms ease,
        color 200ms ease,
        opacity 200ms ease;
}

.rock-doorlopende-fotobanner__previous {
    left: 0;
}

.rock-doorlopende-fotobanner__next {
    right: 0;
}

.rock-doorlopende-fotobanner__previous:hover,
.rock-doorlopende-fotobanner__previous:focus,
.rock-doorlopende-fotobanner__next:hover,
.rock-doorlopende-fotobanner__next:focus {
    border: 0 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: none !important;
    color: #DFD0BB;
}

.rock-doorlopende-fotobanner__previous:focus-visible,
.rock-doorlopende-fotobanner__next:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: -4px;
}


/*
 * Tablet
 */
@media (max-width: 1024px) {
    .rock-doorlopende-fotobanner__link {
        height: var(--rock-banner-height-tablet);
    }

    .rock-doorlopende-fotobanner__previous,
    .rock-doorlopende-fotobanner__next {
        width: 42px;
        height: 54px;
        font-size: 27px;
    }
}


/*
 * Mobiel
 */
@media (max-width: 767px) {
    .rock-doorlopende-fotobanner__link {
        height: var(--rock-banner-height-mobile);
    }

    .rock-doorlopende-fotobanner__previous,
    .rock-doorlopende-fotobanner__next {
        width: 36px;
        height: 48px;
        font-size: 24px;
    }
}


/*
 * Verminderde beweging
 */
@media (prefers-reduced-motion: reduce) {
    .rock-doorlopende-fotobanner {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .rock-doorlopende-fotobanner__track {
        animation: none !important;
        transform: none !important;
        will-change: auto;
    }

    .rock-doorlopende-fotobanner__group[aria-hidden="true"] {
        display: none;
    }

    .rock-doorlopende-fotobanner__previous,
    .rock-doorlopende-fotobanner__next {
        display: none;
    }
}

.rock-doorlopende-fotobanner__previous,
.rock-doorlopende-fotobanner__next {
    position: absolute;
    top: 50%;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 60px;

    padding: 0 !important;
    margin: 0;

    border: 0 !important;
    border-radius: 0;

    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: none !important;

    color: #161616;
    font-size: 30px;
    line-height: 1;

    cursor: pointer;

    transform: translateY(-50%);
    transition:
        color 200ms ease,
        background-color 200ms ease;
}

.rock-doorlopende-fotobanner__previous {
    left: 0;
}

.rock-doorlopende-fotobanner__next {
    right: 0;
}

.rock-doorlopende-fotobanner__previous:hover,
.rock-doorlopende-fotobanner__previous:focus,
.rock-doorlopende-fotobanner__next:hover,
.rock-doorlopende-fotobanner__next:focus {
    color: #DFD0BB;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    .rock-doorlopende-fotobanner__previous,
    .rock-doorlopende-fotobanner__next {
        width: 38px;
        height: 48px;
        font-size: 24px;
    }
}