/* 
 * Mobile Vertical Scroll Override
 * Convierte los carruseles Owl Carousel a scroll vertical en dispositivos móviles
 */

/* Solo aplicar en dispositivos móviles (max-width: 768px) */
@media only screen and (max-width: 768px) {

    /* Hacer que toda la sección tenga scroll vertical (incluyendo el título) */
    .all-lifting-inner {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: calc(100vh - 120px) !important;
        height: auto !important;
    }

    /* Asegurar que el contenedor de la sección permita scroll completo */
    #about-lifting,
    #services-lifting,
    #works-lifting,
    #news-lifting {
        overflow: visible !important;
    }

    /* Desactivar Owl Carousel en móvil y convertir a layout vertical */
    #about-carousel,
    #services-carousel,
    #works-carousel,
    #news-carousel {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        max-height: none !important;
    }

    /* Hacer que todos los items del carousel se muestren verticalmente */
    #about-carousel .owl-stage-outer,
    #services-carousel .owl-stage-outer,
    #works-carousel .owl-stage-outer,
    #news-carousel .owl-stage-outer {
        overflow: visible !important;
        height: auto !important;
    }

    #about-carousel .owl-stage,
    #services-carousel .owl-stage,
    #works-carousel .owl-stage,
    #news-carousel .owl-stage {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        transition: none !important;
    }

    /* Cada item del carousel ocupa el 100% del ancho y se apila verticalmente */
    #about-carousel .owl-item,
    #services-carousel .owl-item,
    #works-carousel .owl-item,
    #news-carousel .owl-item {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin-bottom: 30px !important;
        opacity: 1 !important;
        position: relative !important;
    }

    /* IMPORTANTE: Ocultar los items clonados de Owl Carousel para evitar duplicación */
    #about-carousel .owl-item.cloned,
    #services-carousel .owl-item.cloned,
    #works-carousel .owl-item.cloned,
    #news-carousel .owl-item.cloned {
        display: none !important;
        visibility: hidden !important;
    }

    /* Ocultar las flechas de navegación del carousel en móvil */
    .owl-nav,
    .owl-nav-custom-about,
    .owl-nav-custom-services,
    .owl-nav-custom-works,
    .owl-nav-custom-news {
        display: none !important;
        visibility: hidden !important;
    }

    /* Ocultar los dots de navegación */
    .owl-dots {
        display: none !important;
        visibility: hidden !important;
    }

    /* Asegurar que los bloques de contenido se muestren correctamente */
    .post-block-second {
        display: block !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* Mejorar el espaciado entre elementos */
    .post-block-correction {
        margin-bottom: 20px !important;
    }

    /* Asegurar que las imágenes y videos se vean bien */
    .post-box-photo-works,
    .post-box-photo-about,
    .post-box-photo-news {
        width: 100% !important;
        height: auto !important;
        min-height: 250px !important;
    }

    /* Estilo del scrollbar para móvil (webkit) */
    #about-carousel::-webkit-scrollbar,
    #services-carousel::-webkit-scrollbar,
    #works-carousel::-webkit-scrollbar,
    #news-carousel::-webkit-scrollbar,
    .all-lifting-inner::-webkit-scrollbar {
        width: 4px;
    }

    #about-carousel::-webkit-scrollbar-track,
    #services-carousel::-webkit-scrollbar-track,
    #works-carousel::-webkit-scrollbar-track,
    #news-carousel::-webkit-scrollbar-track,
    .all-lifting-inner::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
    }

    #about-carousel::-webkit-scrollbar-thumb,
    #services-carousel::-webkit-scrollbar-thumb,
    #works-carousel::-webkit-scrollbar-thumb,
    #news-carousel::-webkit-scrollbar-thumb,
    .all-lifting-inner::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
    }

    #about-carousel::-webkit-scrollbar-thumb:hover,
    #services-carousel::-webkit-scrollbar-thumb:hover,
    #works-carousel::-webkit-scrollbar-thumb:hover,
    #news-carousel::-webkit-scrollbar-thumb:hover,
    .all-lifting-inner::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }

    /* Ajustar el padding para mejor visualización en móvil */
    .the-first-lift {
        padding: 0 15px !important;
    }

    /* Asegurar que el contenido no se corte */
    .post-inner {
        width: 100% !important;
        overflow: visible !important;
    }

    /* Mejorar la visualización de títulos y textos */
    .post-title,
    .post-heading {
        margin-bottom: 15px !important;
    }
}

/* Tablets (768px - 1024px) - mantener comportamiento original */
@media only screen and (min-width: 769px) and (max-width: 1024px) {

    /* En tablets, mantener el carousel horizontal pero con mejor espaciado */
    .owl-item {
        padding: 0 10px;
    }
}