/**
 * Bloc « Top 3 produits » — cartes de produits en grille, ordre éditorial.
 *
 * Ne porte que sa mise en page : la grille, la carte et les rythmes internes.
 * Le visuel, la note (avec son qualificatif et le lien vers le test) et le
 * bouton de meilleure offre viennent de composants partagés, dont l'apparence
 * vit dans la feuille des composants — le bloc n'en redéfinit aucun, il ne fait
 * qu'en régler la place et l'alignement dans la carte.
 *
 * La grille répond à la largeur réelle du bloc, non à la fenêtre : le bloc porte
 * un conteneur de requête, et le nombre de colonnes se règle sur lui. Chaque
 * carte est elle-même un conteneur, afin que la note s'adapte à sa colonne
 * comme dans la fiche produit.
 *
 * Encapsulation : chaque règle est portée par .artefact-block afin de primer sur
 * les styles globaux du thème sans recourir à !important.
 */

.artefact-block.artefact-top3 {
	container-type: inline-size;
}

/* Trois cartes par rang à pleine largeur. Les rangs se réduisent selon la
   largeur du bloc, non de la fenêtre : un bloc placé dans une colonne étroite
   passe à deux puis une carte sans dépendre du viewport. */
.artefact-block .artefact-top3__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@container (max-width: 48rem) {
	.artefact-block .artefact-top3__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container (max-width: 30rem) {
	.artefact-block .artefact-top3__grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
 * Carte
 *
 * Blanche sur le fil éditorial, bordure fine, grand rayon. Conteneur de requête
 * pour que la note interne se règle sur la largeur de la carte. Contenu centré :
 * visuel, nom, note puis offre s'empilent au centre, chaque carte restant
 * équilibrée même si les noms diffèrent en longueur.
 * ----------------------------------------------------------------------- */

.artefact-block .artefact-top3__card {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--artefact-separator);
	border-radius: 16px;
	background-color: #ffffff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	text-align: center;
}

/* Le visuel occupe une bande de hauteur fixe : les packshots, de proportions
   variables, y sont contenus et centrés, si bien que les noms démarrent à la
   même hauteur d'une carte à l'autre. */
.artefact-block .artefact-top3__card .artefact-product-media {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 12rem;
}

.artefact-block .artefact-top3__card .artefact-product-media img {
	inline-size: auto;
	max-inline-size: 100%;
	block-size: auto;
	max-block-size: 100%;
	border-radius: 0;
}

.artefact-block .artefact-top3__name {
	margin: 0;
	color: var(--artefact-color-value);
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* Note centrée dans la carte. Le composant product-score est rendu à l'identique
   de la fiche produit : note et qualificatif côte à côte, puis le même bouton
   contouré « Lire le test complet » avec son icône de livre, à sa largeur
   naturelle — il passe seul sous la note lorsque la carte est trop étroite pour
   tout tenir sur un rang. */
.artefact-block .artefact-top3__card .artefact-product-score {
	justify-content: center;
	inline-size: 100%;
}

/* L'offre clôt la carte : le bouton s'étire sur toute la largeur, le prix
   poussé à l'opposé du libellé (règle portée par le composant). */
.artefact-block .artefact-top3__offer {
	inline-size: 100%;
	margin-block-start: auto;
}

.artefact-block .artefact-top3__card .artefact-offer-cta {
	inline-size: 100%;
}