/* =========================================
   Parallel Video Swiper
   ========================================= */

.pvs-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    -webkit-user-select: none;
    user-select: none;
}

.pvs-columns {
    display: flex;
    height: 100%;
    width: 100%;
}

.pvs-column {
    flex: 1;
    position: relative;
    overflow: hidden;
    height: 100%;
}

/* Swiper overrides */
.pvs-column .pvs-swiper {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.pvs-column .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* Card */
.pvs-card {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    cursor: default;
    pointer-events: none;
    border-radius: 12px;
}

.pvs-card .pvs-poster,
.pvs-card .pvs-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Hover scale — desktop only */
@media (hover: hover) and (pointer: fine) {
    .pvs-card:hover {
        transform: scale(1.02);
        transition: transform 0.3s ease;
    }
}

.pvs-card {
    transition: transform 0.3s ease;
}

/* Mute indicator */
.pvs-mute-indicator {
    display: none;
}

.pvs-mute-indicator .pvs-icon-unmuted {
    display: none;
}

.pvs-mute-indicator .pvs-icon-muted {
    display: block;
}

/* Show mute icon on hover (desktop) */
@media (hover: hover) and (pointer: fine) {
    .pvs-card:hover .pvs-mute-indicator {
        opacity: 1;
    }
}

/* Show unmuted icon when active */
.pvs-card.is-unmuted .pvs-mute-indicator {
    opacity: 1;
}

.pvs-card.is-unmuted .pvs-mute-indicator .pvs-icon-muted {
    display: none;
}

.pvs-card.is-unmuted .pvs-mute-indicator .pvs-icon-unmuted {
    display: block;
}

/* Label */
.pvs-label {
    display: none;
}

/* Slide spacing */
.pvs-swiper .swiper-slide {
    height: auto;
    padding: 4px 0;
    box-sizing: border-box;
}

/* Transparent backgrounds */
.pvs-wrapper,
.pvs-columns,
.pvs-column,
.pvs-swiper {
    background: transparent;
}

/* =========================================
   Responsive column hiding
   ========================================= */
.pvs-column.pvs-hidden {
    display: none;
}

/* =========================================
   Mobile horizontal swiper (peek layout)
   ========================================= */
@media (max-width: 767px) {
    .pvs-columns.swiper > .swiper-wrapper {
        height: 100%;
    }
    .pvs-columns.swiper > .swiper-wrapper > .pvs-column.swiper-slide {
        width: 70%;
        height: 100%;
        flex: none;
    }
}