/**
 * Testimonials Video - Responsive CSS
 * Media queries para mobile e tablet
 */

/* Tablet */
@media (max-width: 1024px) {
    .sslp-testimonials-video {
        padding: 60px 0;
    }

    .sslp-testimonials-video__grid--cols-3,
    .sslp-testimonials-video__grid--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .sslp-testimonials-video__stats {
        gap: 32px;
    }

    /* Variante D - layout horizontal */
    .sslp-testimonials-video--d .sslp-testimonials-video__grid {
        grid-template-columns: 1fr;
    }

    /* Variante E - featured video */
    .sslp-testimonials-video--e .sslp-testimonials-video__grid--cols-3 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .sslp-testimonials-video--e .sslp-testimonials-video__item:first-child {
        grid-row: auto;
    }

    .sslp-testimonials-video--e .sslp-testimonials-video__item:first-child .sslp-testimonials-video__thumbnail {
        aspect-ratio: 16 / 9;
        height: auto;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .sslp-testimonials-video {
        padding: 48px 0;
    }

    .sslp-testimonials-video__header {
        margin-bottom: 32px;
    }

    .sslp-testimonials-video__title {
        font-size: 28px;
    }

    .sslp-testimonials-video__subtitle {
        font-size: 16px;
    }

    .sslp-testimonials-video__grid {
        gap: 16px;
    }

    .sslp-testimonials-video__grid--cols-2,
    .sslp-testimonials-video__grid--cols-3,
    .sslp-testimonials-video__grid--cols-4 {
        grid-template-columns: 1fr;
    }

    .sslp-testimonials-video__grid--carousel .sslp-testimonials-video__item {
        flex: 0 0 calc(100% - 32px);
    }

    .sslp-testimonials-video__item {
        border-radius: 12px;
    }

    .sslp-testimonials-video__thumbnail {
        border-radius: 12px 12px 0 0;
    }

    .sslp-testimonials-video__play {
        width: 56px;
        height: 40px;
    }

    .sslp-testimonials-video__info {
        padding: 12px;
        gap: 10px;
    }

    .sslp-testimonials-video__avatar {
        width: 40px;
        height: 40px;
    }

    .sslp-testimonials-video__name {
        font-size: 14px;
    }

    .sslp-testimonials-video__role {
        font-size: 12px;
    }

    .sslp-testimonials-video__quote {
        padding: 12px;
        font-size: 13px;
    }

    .sslp-testimonials-video__stats {
        flex-direction: column;
        gap: 16px;
    }

    .sslp-testimonials-video__stat-number {
        font-size: 28px;
    }

    .sslp-testimonials-video__nav {
        margin-top: 24px;
    }

    .sslp-testimonials-video__nav-btn {
        width: 40px;
        height: 40px;
    }

    /* Variante B - carrossel */
    .sslp-testimonials-video--b .sslp-testimonials-video__item {
        flex: 0 0 280px;
    }

    /* Variante D - compacto no mobile */
    .sslp-testimonials-video--d .sslp-testimonials-video__item {
        grid-template-columns: 120px 1fr;
    }

    /* Variante F - gamificado */
    .sslp-testimonials-video--f .sslp-testimonials-video__item {
        flex: 0 0 260px;
    }

    .sslp-testimonials-video--f .sslp-testimonials-video__item::before {
        width: 40px;
        height: 40px;
        font-size: 20px;
        top: -12px;
        right: 12px;
    }

    /* Variante G - social proof */
    .sslp-testimonials-video--g .sslp-testimonials-video__avatar {
        width: 48px;
        height: 48px;
    }

    /* Variante H - urgência */
    .sslp-testimonials-video--h .sslp-btn--primary {
        font-size: 16px;
        padding: 16px 32px;
        width: 100%;
    }

    /* Lightbox */
    .sslp-video-lightbox__container {
        width: 95%;
    }

    .sslp-video-lightbox__close {
        top: -40px;
        width: 36px;
        height: 36px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .sslp-testimonials-video__title {
        font-size: 24px;
    }

    .sslp-testimonials-video--b .sslp-testimonials-video__item,
    .sslp-testimonials-video--f .sslp-testimonials-video__item {
        flex: 0 0 calc(100vw - 60px);
    }

    .sslp-testimonials-video--d .sslp-testimonials-video__item {
        grid-template-columns: 1fr;
    }

    .sslp-testimonials-video--d .sslp-testimonials-video__thumbnail {
        aspect-ratio: 16 / 9;
    }

    .sslp-testimonials-video--c .sslp-testimonials-video__title {
        font-size: 28px;
    }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sslp-testimonials-video__item,
    .sslp-testimonials-video__thumb-img,
    .sslp-testimonials-video__play,
    .sslp-video-lightbox,
    .sslp-video-lightbox__container {
        transition: none;
    }

    .sslp-testimonials-video--h .sslp-testimonials-video__badge,
    .sslp-testimonials-video--h .sslp-testimonials-video__thumbnail::before,
    .sslp-testimonials-video--h::before {
        animation: none;
    }

    .sslp-btn--pulse {
        animation: none;
    }
}

/* Carousel responsive */
@media (max-width: 1024px) {
    .sslp-testimonials-video__grid--carousel .sslp-testimonials-video__item {
        flex: 0 0 calc(50% - 12px);
    }
}

@media (max-width: 640px) {
    .sslp-testimonials-video__grid--carousel .sslp-testimonials-video__item {
        flex: 0 0 100%;
        margin-right: 0;
    }

    .sslp-testimonials-video__dots {
        gap: 6px;
    }

    .sslp-testimonials-video__dot {
        width: 8px;
        height: 8px;
    }
}