/* COMPONENTS.CSS
   Framework komponente */

@layer components {

    /* TICKER */
    .ticker {
        overflow: hidden;
        padding-block: var(--space-3);
        border-block: 1px solid color-mix(in oklch, var(--color-text) 10%, transparent);
    }

    .ticker .msg {
        display: inline-flex;
        gap: var(--space-5);
        white-space: nowrap;
        animation: ticker-scroll 28s linear infinite;
    }

    @keyframes ticker-scroll {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-50%);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .ticker .msg {
            animation: none;
        }
    }

    /* CAROUSEL */

    /* Wrapper — containing block za absolutne gumbe */
    .carousel-track {
        position: relative;
    }

    .carousel {
        display: flex;
        overflow-x: auto;
        cursor: grab;
        user-select: none;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }

        &.dragging {
            cursor: grabbing;
        }

        &>* {
            flex: 0 0 clamp(260px, 75vw, 340px);
            scroll-snap-align: start;
            scroll-snap-stop: always;
        }
    }

    /* Puščici — skriti na touch, absolutno na .carousel-track */
    .carousel-prev,
    .carousel-next {
        display: none;
    }

    @media (pointer: fine) {

        .carousel-prev,
        .carousel-next {
            position: absolute;
            top: 50%;
            translate: 0 -50%;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            inline-size: 2.5rem;
            block-size: 2.5rem;
            padding: 0;
            border: 1px solid var(--color-border);
            border-radius: 50%;
            background: var(--color-bg);
            box-shadow: var(--shadow-md);
            color: var(--color-text);
            cursor: pointer;
            font-family: remixicon;
            font-size: 1.25rem;
            transition: background var(--transition-fast), opacity var(--transition-fast);

            &:hover {
                background: var(--color-bg-secondary);
            }

            &:disabled {
                opacity: 0;
                pointer-events: none;
            }
        }

        .carousel-prev {
            left: var(--space-3);
        }

        .carousel-next {
            right: var(--space-3);
        }
    }

    /* Slika v fiksnem razmerju — object-fit poskrbi za crop */
    .img-box {
        display: block;
        inline-size: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        transition: transform var(--transition-slow);
    }

    @media (prefers-reduced-motion: reduce) {
        .img-box {
            transition: none;
        }
    }
}