/**
 * Karts Video Carousel — style front-endu.
 * Pionowe kafle wideo (9:16) w stylu Reels/TikTok, ze strzałkami, kropkami i swipe.
 */

.kvc-carousel {
        --kvc-gap: 16px;
        --kvc-radius: 16px;
        --kvc-pad: 177.78%;
        --kvc-arrow-color: #ffffff;
        --kvc-arrow-bg: rgba(0, 0, 0, 0.35);
        --kvc-dot: #c9c9c9;
        --kvc-dot-active: #ff0033;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
}

.kvc-carousel *,
.kvc-carousel *::before,
.kvc-carousel *::after {
        box-sizing: border-box;
}

/* Obszar widoczny — ukrywa nadmiar. */
.kvc-viewport {
        overflow: hidden;
        width: 100%;
        cursor: grab;
        -webkit-user-select: none;
        user-select: none;
}

.kvc-viewport.kvc-dragging {
        cursor: grabbing;
}

/* Tor z kaflami. */
.kvc-track {
        display: flex;
        gap: var(--kvc-gap);
        will-change: transform;
        transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.kvc-track.kvc-no-anim {
        transition: none;
}

/* Pojedynczy slajd — szerokość wyliczana przez JS. */
.kvc-slide {
        flex: 0 0 auto;
        width: 200px;
}

/* Kontener mediów z proporcjami pionowymi. */
.kvc-media {
        position: relative;
        width: 100%;
}

.kvc-thumb-wrap {
        position: relative;
        width: 100%;
        padding-bottom: var(--kvc-pad);
        border-radius: var(--kvc-radius);
        overflow: hidden;
        background: #111;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.kvc-thumb {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

.kvc-thumb-empty {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #2b2b2b, #444);
}

/* Tytuł na górze kafla + gradient dla czytelności. */
.kvc-title {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 3;
        padding: 14px 14px 28px;
        color: #fff;
        font-weight: 700;
        font-size: 15px;
        line-height: 1.25;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
}

.kvc-title span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

/* Podpis na dole kafla. */
.kvc-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 3;
        padding: 28px 14px 14px;
        color: #fff;
        font-weight: 600;
        font-size: 14px;
        line-height: 1.3;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
}

/* Przycisk odtwarzania na środku. */
.kvc-play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 4;
        border: 0;
        background: transparent;
        padding: 0;
        cursor: pointer;
        transition: transform 0.15s ease, opacity 0.15s ease;
}

.kvc-play svg {
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.kvc-play:hover {
        transform: translate(-50%, -50%) scale(1.08);
}

.kvc-play .kvc-play-bg {
        transition: fill 0.15s ease;
}

/* Osadzony odtwarzacz po kliknięciu. */
.kvc-thumb-wrap .kvc-player {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        z-index: 5;
}

/* Strzałki nawigacji. */
.kvc-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: #ffffff;
        color: #1a1a1a;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
        transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.kvc-arrow:hover {
        transform: translateY(-50%) scale(1.06);
}

.kvc-arrow-prev {
        left: -8px;
}

.kvc-arrow-next {
        right: -8px;
}

/* W trybie wyśrodkowania strzałki odsunięte o 24px od krawędzi (nad przyciętymi kaflami). */
.kvc-carousel.kvc-center .kvc-arrow-prev {
        left: 24px;
}

.kvc-carousel.kvc-center .kvc-arrow-next {
        right: 24px;
}

.kvc-arrow[disabled] {
        opacity: 0.35;
        cursor: default;
        pointer-events: none;
}

/* Kropki paginacji. */
.kvc-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 16px;
        flex-wrap: wrap;
}

.kvc-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 0;
        padding: 0;
        background: var(--kvc-dot);
        cursor: pointer;
        transition: transform 0.15s ease, background 0.15s ease, width 0.15s ease;
}

.kvc-dot.is-active {
        background: var(--kvc-dot-active);
        width: 22px;
        border-radius: 5px;
}

@media (max-width: 782px) {
        .kvc-arrow {
                width: 38px;
                height: 38px;
        }
}