/* ============================================================
   Prémices Video Carousel — pvc-style.css
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────────── */
.pvc-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* small side padding so arrows don't clip */
    padding: 0 0 36px;
}

/* ── Track ───────────────────────────────────────────────────── */
.pvc-track {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    /* left/right margin is set inline per widget (gap compensation) */
}

/* ── Slides ──────────────────────────────────────────────────── */
.pvc-slide {
    flex: 0 0 auto;
    box-sizing: border-box;
    /* width is set by JS dynamically */
}

/* ── Video wrapper (9:16 ratio) ──────────────────────────────── */
.pvc-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    cursor: pointer;
    background: #0d0b1a;
    /* border-radius set inline per widget */
}

.pvc-video-wrapper video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* no controls — driven by hover JS */
}

/* ── Labels ──────────────────────────────────────────────────── */
.pvc-label {
    position: absolute;
    z-index: 3;
    white-space: nowrap;
    line-height: 1.3;
    letter-spacing: 0.01em;
    pointer-events: none;
    /* All visual properties are set inline per widget */
}

.pvc-label--top-right {
    top: 10px;
    right: 10px;
}

.pvc-label--bottom-left {
    bottom: 10px;
    left: 10px;
}

/* ── Navigation buttons ─────────────────────────────────────── */
.pvc-btn {
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 18px)); /* -18px compensates for the dots padding-bottom */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: opacity 0.25s ease, transform 0.2s ease;
    /* size / colors set inline per widget */
    outline: none;
}

.pvc-btn:hover {
    transform: translateY(calc(-50% - 18px)) scale(1.1);
}

.pvc-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.pvc-btn-prev { left: 6px; }
.pvc-btn-next { right: 6px; }

.pvc-btn.pvc-btn--hidden {
    opacity: 0 !important;
    pointer-events: none;
}

.pvc-btn.pvc-btn--disabled {
    opacity: 0.25;
    cursor: default;
}

/* ── Dots ────────────────────────────────────────────────────── */
.pvc-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}

.pvc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s ease, transform 0.2s ease;
    /* colors set inline per widget */
}

.pvc-dot.pvc-dot--active {
    transform: scale(1.3);
}

/* ── Hide dots & buttons on desktop when not needed ─────────── */
.pvc-carousel-wrapper.pvc-no-scroll .pvc-btn,
.pvc-carousel-wrapper.pvc-no-scroll .pvc-dots {
    display: none;
}

/* ── Responsive: hide arrows on very small screens (swipe only) */
@media (max-width: 400px) {
    .pvc-btn-prev { left: 2px; }
    .pvc-btn-next { right: 2px; }
}