/**
 * File Name: cards.css
 * Description: Objets CARDS 
 * Author: Gianmarco
 * Version: 0.3
 * Date: 2026-01-04
 */

/*Variables pour les Cards*/
:root {	
	--amn-card-width: var(--amn-3-column-width);
	--amn-card-grid-columns: repeat(4, 1fr);
	
	--amn-cards-font-size-large : 25px; 
	--amn-cards-font-size-medium : 18px; 

	--shadow-card-hover: 4px 4px 15px rgba(0, 0, 0, 0.6);
	
	--shadow-image: 2px 2px 5px 1px rgba(0, 0, 0, 0.3);
	--filter-drop-shadow-image: 2px 2px 5px rgba(0, 0, 0, 0.3);
	
	--shadow-image-container: 0px 2px 10px -0px rgba(0, 0, 0, 0.3);

	--card-image-bg-color: var(--light-gray);
	--card-text-bg-color: white;
	--card-border-color: var(--mid-gray);
	--badge-bg-color: rgba(255, 0, 0, 0.8);
	--badge-text-color: white;
}

/* Responsive Adjustments */
@media (max-width: 350px) {
	:root {
		--amn-card-width: var(--amn-12-column-width);
		--amn-card-grid-columns: repeat(1, 1fr);
		 
		--amn-cards-font-size-medium : 6vw; 
  }
}

@media (min-width: 351px) and (max-width: 479px)  {
	:root {
		--amn-card-width: var(--amn-6-column-width);
		--amn-card-grid-columns: repeat(2, 1fr);
		
		--amn-cards-font-size-medium : 3.6vw; 
  }
}

@media (min-width: 480px) and (max-width: 639px) {
	:root {
		--amn-card-width: var(--amn-6-column-width);
		--amn-card-grid-columns:repeat(2, 1fr);
		
		--amn-cards-font-size-large : 20px; 
		--amn-cards-font-size-medium : 16px; 
  }
}

@media (min-width: 640px) and (max-width: 767px) {
	:root {
		--amn-card-width: var(--amn-4-column-width);
		--amn-card-grid-columns:repeat(3, 1fr);
		
		--amn-cards-font-size-large : 20px; 
		--amn-cards-font-size-medium : 16px; 
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	:root {

		--amn-card-width: var(--amn-4-column-width);
		--amn-card-grid-columns: repeat(3, 1fr);
	}
}
/*@media (min-width: 1024px) and (max-width: 1279px) {
	:root {

	}
}
@media (min-width: 1280px) and (max-width: 1535px ) {
	:root {

	}
}
@media (min-width: 1536px) {
	:root {
	}
}*/

/* ==================================
   STYLES DES CARTES PRODUITS 
   ================================== */

/* Animation d'apparition des cartes produits */
.custom-product-card {
    opacity: 0;
    animation: fadein 0.4s forwards;
    margin: 0;
    max-width: var(--amn-card-width);
    border: 1px solid var(--card-border-color);
    border-radius: 3px;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

.custom-product-card:hover {
    box-shadow: var(--shadow-card-hover);
}

/* ----------------------------------------------------
   REFONTE DE LA STRUCTURE DE L'IMAGE (LE CŒUR DU CHANGEMENT)
   ---------------------------------------------------- */

/* 1. Le "Cadre" extérieur : garde son rôle de créer un carré parfait. */
.custom-product-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* LA technique qui force un ratio 1:1 */
    background-color: var(--card-image-bg-color);
}

/* 2. Le lien <a> contenant l'image : on lui donne une nouvelle vie. */
.custom-product-image-container {
    /* On le fait remplir le cadre carré qui le contient */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* On crée l'espace de 10px à l'intérieur, qui était géré par PHP avant. */
    padding: 10px;
    box-sizing: border-box; /* Crucial pour que le padding n'augmente pas la taille */
    
    /* On s'assure qu'il se comporte bien */
    display: block; 
}

/* 3. L'image <img> elle-même : c'est elle qui fait la magie de l'affichage. */
.custom-product-image {
    width: 100%;
    height: 100%;
    
    /* La propriété qui remplace tout ton script PHP : */
    object-fit: contain;     /* Garantit que l'image est entièrement visible */
    object-position: center; /* La centre dans l'espace disponible */

    filter: drop-shadow(var(--filter-drop-shadow-image));
}

/* ----------------------------------------------------
   FIN DE LA REFONTE - Le reste ne change pas
   ---------------------------------------------------- */

/* Texte des cartes */
.custom-product-text {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 0px;
    font-size: var(--amn-cards-font-size-medium);
}

.custom-product-text .custom-product-title h2 {
    font-size: var(--amn-cards-font-size-medium);
    margin: 0;
}

/* Badge "Sold" */
.custom-product-card .sold-badge {
    position: absolute;
    top: 20px; /* Positionné par rapport à .custom-product-image-wrapper */
    right: 20px;
    background-color: var(--badge-bg-color);
    color: var(--badge-text-color);
    font-family: var(--title-font-family);
    font-size: var(--amn-cards-font-size-medium);
    padding: 5px 10px; /* Un peu plus d'air */
    border-radius: 3px;
    z-index: 10;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}