/* Front-end styles for BA Reels & Shorts module */

/* Contenedor común para los bloques de vídeo */
.ba-video-block-wrapper {
    margin-bottom: 2rem;
}

/* Título del bloque */
.ba-video-block-heading {
    margin-bottom: 1rem;
    font-size: 1.4rem;
    font-weight: 600;
}

/* Estilos compartidos */
.ba-video-widget {
    width: 100%;
    margin: 0 auto;
}

/* Elemento individual de vídeo */
.ba-video-item {
    margin: 0 auto;
    text-align: center;
}

.ba-video-item iframe {
    width: 100%;
    height: 530px;
    max-width: 100%;
    border: none;
}

.ba-video-item .ba-video-title {
    font-weight: bold;
    margin-top: 0.5rem;
}

/* Modo carrusel: OwlCarousel tomará el control del ancho y la
   disposición.  Sólo nos aseguramos de que el contenedor se centre */
.ba-video-carousel {
    width: 100%;
    margin: 0 auto;
}

/* Modo cuadrícula */
.ba-video-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* Definir columnas según la clase columns-N */
.ba-video-grid.columns-1 .ba-video-item { flex: 0 0 calc(100% - 1rem); }
.ba-video-grid.columns-2 .ba-video-item { flex: 0 0 calc(50% - 1rem); }
.ba-video-grid.columns-3 .ba-video-item { flex: 0 0 calc(33.333% - 1rem); }
.ba-video-grid.columns-4 .ba-video-item { flex: 0 0 calc(25% - 1rem); }
.ba-video-grid.columns-5 .ba-video-item { flex: 0 0 calc(20% - 1rem); }
.ba-video-grid.columns-6 .ba-video-item { flex: 0 0 calc(16.666% - 1rem); }

/* Responsive: en pantallas pequeñas mostrar una sola columna */
@media (max-width: 992px) {
    .ba-video-grid .ba-video-item { flex: 0 0 calc(50% - 1rem); }
}

@media (max-width: 600px) {
    .ba-video-grid .ba-video-item { flex: 0 0 100%; }
}