/* Director Films - Minimal CSS (usa estilos nativos de PrestaShop) */

/* Solo añadimos ajustes para móvil de 2 columnas */

.director-films-section {
    margin: 2rem 0;
}

.director-films-section .products-section-title {
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #ff6b00;
    padding-bottom: 0.5rem;
}

/* Desktop - Mantener estilo nativo (4 columnas) */
@media (min-width: 992px) {
    .director-films-section .products > div {
        /* PrestaShop ya lo maneja con col-xl-3 = 4 columnas */
    }
}

/* Tablet - 3 columnas */
@media (min-width: 769px) and (max-width: 991px) {
    .director-films-section .products > div {
        /* PrestaShop ya lo maneja con col-lg-4 = 3 columnas */
    }
}

/* Móvil - FORZAR 2 columnas */
@media (max-width: 768px) {
    .director-films-section .products > div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .director-films-section .product-miniature {
        margin-bottom: 1rem;
    }
    
    .director-films-section .product-title {
        font-size: 0.85rem;
    }
    
    .director-films-section .price {
        font-size: 1rem;
    }
}

/* Móvil pequeño - mantener 2 columnas */
@media (max-width: 480px) {
    .director-films-section .products > div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    
    .director-films-section .thumbnail-container {
        margin-bottom: 0.5rem;
    }
}