/**
 * Testimonial Video Carousel - Responsive Styles
 */

/* ===== Desktop (1024px+) ===== */
@media (min-width: 1024px) {
    .tvc-nav-arrow {
        display: flex;
    }
}

/* ===== Tablet (768px - 1023px) ===== */
@media (max-width: 1023px) {
    .tvc-nav-arrow {
        width: 36px;
        height: 36px;
    }

    .tvc-nav-prev {
        left: -10px;
    }

    .tvc-nav-next {
        right: -10px;
    }

    .tvc-item-name {
        font-size: 14px;
    }

    .tvc-item-role,
    .tvc-item-company {
        font-size: 12px;
    }

    .tvc-item-text {
        font-size: 13px;
    }
}

/* ===== Mobile (below 768px) ===== */
@media (max-width: 767px) {
    .tvc-carousel-wrapper {
        padding: 10px 0;
    }

    .tvc-nav-arrow {
        display: none;
    }

    .tvc-item {
        border-radius: 6px;
    }

    .tvc-video-wrapper {
        border-radius: 6px 6px 0 0;
    }

    .tvc-muted-indicator {
        width: 28px;
        height: 28px;
        top: 8px;
        right: 8px;
    }

    .tvc-item-customer {
        padding: 10px 12px;
        gap: 8px;
    }

    .tvc-item-logo {
        width: 36px;
        height: 36px;
    }

    .tvc-item-name {
        font-size: 14px;
    }

    .tvc-item-text {
        padding: 6px 12px;
        font-size: 13px;
    }

    .tvc-item-cta {
        margin: 0 12px 12px;
        padding: 8px 12px;
        font-size: 13px;
    }

    .tvc-pagination {
        margin-top: 12px;
        gap: 6px;
    }

    .tvc-dot {
        width: 8px;
        height: 8px;
    }

    /* Grid layout on mobile */
    .tvc-layout-grid .tvc-grid-wrapper {
        grid-template-columns: 1fr;
    }
}

/* ===== Small Mobile (below 480px) ===== */
@media (max-width: 479px) {
    .tvc-item-customer {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .tvc-item-logo {
        width: 32px;
        height: 32px;
    }

    .tvc-watch-story {
        font-size: 12px;
        padding: 6px 12px;
    }

    .tvc-watch-story svg {
        width: 16px;
        height: 16px;
    }
}

/* ===== Touch Devices ===== */
@media (hover: none) and (pointer: coarse) {
    .tvc-item:hover {
        transform: none;
    }

    .tvc-watch-story {
        opacity: 1;
        transform: translateY(0);
        font-size: 12px;
        padding: 6px 12px;
    }

    .tvc-video-overlay {
        background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
    }
}