/*
 * Siteware Properties - Property Marquee
 * Design zachowany 1:1 z zaakceptowanej sekcji Elementora.
 */

.na-photo-marquee {
    --na-marquee-gap: 8px;
    --na-marquee-speed: 55s;

    /*
     * Full-bleed bez 100vw. Wartości są ustawiane przez full-bleed.js
     * na podstawie document.documentElement.clientWidth, więc pionowy
     * scrollbar nie dodaje kilku pikseli szerokości do dokumentu.
     */
    --swp-full-bleed-width: 100%;
    --swp-full-bleed-offset: 0px;

    width: var(--swp-full-bleed-width);
    max-width: none;
    height: 42vh;

    position: relative;
    left: auto;

    margin: 0;
    margin-left: var(--swp-full-bleed-offset);
    padding: 0;

    box-sizing: border-box;

    overflow: hidden;

    background: var(--e-global-color-secondary);

    color: inherit;
    text-decoration: none;
}

.na-photo-marquee__track {
    width: max-content;
    height: 100%;

    display: flex;

    will-change: transform;

    animation: na-photo-marquee-right var(--na-marquee-speed) linear infinite;
}

.na-photo-marquee__group {
    height: 100%;

    display: flex;
    flex-shrink: 0;

    gap: var(--na-marquee-gap);
    padding-right: var(--na-marquee-gap);

    box-sizing: border-box;
}

.na-photo-marquee__item {
    position: relative;

    display: block;

    height: 100%;
    aspect-ratio: 9 / 16;

    flex: 0 0 auto;

    overflow: hidden;

    background: var(--e-global-color-secondary);
}

.na-photo-marquee__item::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 2;

    background: rgba(7, 6, 6, .20);

    pointer-events: none;

    transition: background-color .6s cubic-bezier(.22,.61,.36,1);
}

.na-photo-marquee__item::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 3;

    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);

    pointer-events: none;
}

.na-photo-marquee__item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    transition:
        transform .9s cubic-bezier(.22,.61,.36,1),
        filter .6s cubic-bezier(.22,.61,.36,1);
}

.na-photo-marquee__item:hover::after {
    background: rgba(7, 6, 6, .08);
}

.na-photo-marquee__item:hover img {
    transform: scale(1.025);
    filter: contrast(1.025) saturate(1.03);
}

@keyframes na-photo-marquee-right {
    from {
        transform: translate3d(-50%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@media (max-width: 1024px) {
    .na-photo-marquee {
        --na-marquee-gap: 7px;
        height: 40vh;
    }
}

@media (max-width: 767px) {
    .na-photo-marquee {
        --na-marquee-gap: 6px;
        height: 38vh;
    }

    .na-photo-marquee__item:hover::after {
        background: rgba(7, 6, 6, .20);
    }

    .na-photo-marquee__item:hover img {
        transform: scale(1.001);
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .na-photo-marquee {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .na-photo-marquee__track {
        animation: none;
        transform: none;
    }

    .na-photo-marquee__group[aria-hidden="true"] {
        display: none;
    }
}