/**
 * Page Blog - Styles Spécifiques
 *
 * Uniformisation des images des articles en format carré (1:1)
 * Ce fichier est chargé en dernier pour surcharger tous les autres styles
 *
 * @package madara
 * @version 1.0
 */

/* ===============================================
   IMAGES UNIFORMES - FORMAT CARRÉ 1:1
   =============================================== */

/* Force le ratio carré pour TOUS les conteneurs d'images du blog */
.blog-grid .product-image-enhanced,
.blog-post-card .product-image-enhanced,
article.blog-post-card .product-image-enhanced,
.products-grid.blog-grid .product-image-enhanced,
.products-grid.blog-grid article.blog-post-card .product-image-enhanced,
div.products-grid.blog-grid article.product-card-enhanced.blog-post-card div.product-image-enhanced {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Force les images à remplir le conteneur carré */
.blog-grid .product-image-enhanced img,
.blog-post-card .product-image-enhanced img,
article.blog-post-card .product-image-enhanced img,
.blog-grid .product-image-enhanced > a > img,
.blog-post-card .product-image-enhanced > a > img,
article.blog-post-card .product-image-enhanced > a > img,
.products-grid.blog-grid .product-image-enhanced img,
.products-grid.blog-grid article.blog-post-card .product-image-enhanced img,
.products-grid.blog-grid article.blog-post-card .product-image-enhanced > a > img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* Annule les attributs inline de WordPress */
.blog-grid img[width],
.blog-grid img[height],
.blog-post-card img[width],
.blog-post-card img[height] {
    width: 100% !important;
    height: 100% !important;
}

/* Garantir que le lien ne déforme pas l'image */
.blog-grid .product-image-enhanced > a,
.blog-post-card .product-image-enhanced > a,
article.blog-post-card .product-image-enhanced > a {
    width: 100%;
    height: 100%;
    display: block;
}

/* ===============================================
   RESPONSIVE - MAINTIEN DU RATIO CARRÉ
   =============================================== */

@media (max-width: 768px) {
    .blog-grid .product-image-enhanced,
    .blog-post-card .product-image-enhanced,
    article.blog-post-card .product-image-enhanced {
        aspect-ratio: 1 / 1 !important;
    }
}

@media (max-width: 480px) {
    .blog-grid .product-image-enhanced,
    .blog-post-card .product-image-enhanced,
    article.blog-post-card .product-image-enhanced {
        aspect-ratio: 1 / 1 !important;
    }
}