/* 
 * CSS Grid flexible pour l'affichage des produits
 * Remplace le système Bootstrap à 12 colonnes
 * Supporte n'importe quel nombre de colonnes (2, 3, 4, 5, 6, 7, 8...)
 */

.products-grid-container {
    display: grid;
    gap: var(--grid-gap, 20px);
    width: 100%;
}

/* Desktop: utilise le nombre de colonnes défini par l'admin */
@media (min-width: 992px) {
    .products-grid-container {
        grid-template-columns: repeat(var(--desktop-columns, 4), 1fr);
    }
}

/* Tablette: 2-4 colonnes */
@media (min-width: 768px) and (max-width: 991px) {
    .products-grid-container {
        grid-template-columns: repeat(var(--tablet-columns, 3), 1fr);
    }
}

/* Mobile: 1-2 colonnes */
@media (max-width: 767px) {
    .products-grid-container {
        grid-template-columns: repeat(var(--mobile-columns, 2), 1fr);
    }
}

/* Cartes produits avec ratio configurable */
.products-grid-container .product-card-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.products-grid-container .product-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.products-grid-container .product-card-image-wrapper {
    aspect-ratio: var(--card-aspect-ratio, 4/3);
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    position: relative;
}

.products-grid-container .product-card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.products-grid-container .product-card:hover .product-card-image-wrapper img {
    transform: scale(1.05);
}

.products-grid-container .product-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.products-grid-container .product-card-title {
    font-size: clamp(0.9rem, 1vw + 0.5rem, 1.1rem);
    margin-bottom: 0.5rem;
    flex-grow: 1;
}

.products-grid-container .product-card-price {
    font-weight: bold;
    font-size: clamp(1rem, 1.2vw + 0.6rem, 1.25rem);
    color: #28a745;
}

/* Ajustements pour petits écrans */
@media (max-width: 576px) {
    .products-grid-container {
        gap: var(--grid-gap-mobile, 15px);
    }
}

/* Animation d'apparition */
.products-grid-container .product-card-wrapper {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Support pour les différents ratios */
.aspect-ratio-1-1 {
    --card-aspect-ratio: 1/1;
}

.aspect-ratio-4-3 {
    --card-aspect-ratio: 4/3;
}

.aspect-ratio-16-9 {
    --card-aspect-ratio: 16/9;
}

.aspect-ratio-3-4 {
    --card-aspect-ratio: 3/4;
}