/* -------------------------------------------------------------------------
   Fiche produit — section « À lire sur notre blog ».

   Ne style QUE l'encadrement de la section. La grille (.nvg-content-list) et
   les cartes (.nvg-actu-card) sont habillées par le plugin nvg-blocks
   (build/app.css puis resources/skins/decorem/style.css) : ne rien réécrire
   ici, ce serait une seconde source de vérité.

   Valeurs calées sur `section.related.products` (screen.css) pour que la
   section se lise comme les autres remontées de bas de fiche produit.
   ------------------------------------------------------------------------- */

/* .decorem-produit-articles */
.decorem-produit-articles {
	clear: both;
	width: 100%;
	padding-top: 80px;
}

/* Espacement entre les cartes.

   La grille du plugin expose une variable pour ça — c'est le point d'entrée
   qu'elle documente elle-même (ActuList/styles.scss). On ne réécrit donc aucune
   règle du plugin, on règle sa variable.

   Défaut : --nvg-space-small, que _globals.scss de decorem fixe à 10px — trop
   serré à trois colonnes. --nvg-space-large vaut 40px, et retombe tout seul à
   30px sous le point de rupture du plugin. C'est le réglage qu'a pris grinand.

   POUR CHANGER : une seule ligne, celle du dessous. Paliers disponibles :
   small (10px) · medium (20px) · large (40px) · xlarge (60px) — ou une valeur
   en dur, comme aci-resistance qui a mis 3rem. */
.decorem-produit-articles .wp-block-nvg-actu-list {
	--nvg-content-list-gap: var(--nvg-space-large);
}

/* .decorem-produit-articles__titre */
.decorem-produit-articles__titre {
	margin-bottom: 40px;
	text-align: center;
	letter-spacing: 0;
	font-size: 3em;
	line-height: 1.2em;
	color: var(--color-black, #000);
}

@media (max-width: 768px) {
	.decorem-produit-articles {
		padding-top: 50px;
	}

	.decorem-produit-articles__titre {
		margin-bottom: 25px;
		font-size: 2em;
	}
}

/* -------------------------------------------------------------------------
   Rapprocher la carte du block de celle du blog.

   Le blog (thème decorem-child) ne rend PAS ses articles avec ce block : il a
   son propre markup en dur dans category.php, avec ses classes. Impossible de
   partager le CSS, on porte donc l'identité visuelle, pas la feuille.

   Ce qui n'est PAS reproductible, et pourquoi :
   — la grille en quinconce du blog (48% + margin-top 140px sur les pairs) :
     ici on est en 3 colonnes, c'est voulu ;
   — la barre du bas en position:absolute : elle dépend du gabarit du blog ;
   — la catégorie CLIQUABLE : la carte du block enveloppe tout dans un seul
     <a>, et on n'imbrique pas un lien dans un lien ;
   — la date : le block ne l'émet pas.

   OÙ ÇA DEVRAIT VIVRE À TERME : src/Blocks/ActuCard/skins/decorem.scss, dans
   nvg-blocks — c'est le levier prévu pour l'habillage d'un block sur un site.
   C'est ici en attendant, parce qu'un changement de skin n'atteint la prod
   qu'au prochain déploiement du dépôt partagé. Portée par la section : rien
   ne fuit sur le reste du site, et la règle se retire d'une traite le jour du
   déménagement.
   ------------------------------------------------------------------------- */

/* La carte du blog n'a ni ombre ni fond : elle repose sur la page. */
.decorem-produit-articles .nvg-actu-card {
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.decorem-produit-articles .nvg-actu-card__body {
	padding: 20px 0 0;
	gap: 15px;
}

/* Catégorie : la pastille grise du blog (.wrap_button_categories a). */
.decorem-produit-articles .nvg-actu-card__cat {
	align-self: flex-start;
	padding: 5px 12px;
	background: #f2f2f2;
	color: #000;
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* « Lire l'article » : le bouton bordé du blog (.button-blog). */
.decorem-produit-articles .nvg-actu-card__more {
	align-self: flex-start;
	margin-top: auto;
	padding: 8px 18px;
	border: 2px solid #000;
	background: #fff;
	color: #000;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transition: all 0.3s;
}

.decorem-produit-articles .nvg-actu-card__link:hover .nvg-actu-card__more {
	border-color: var(--nvg-color-primary, #e40f10);
	color: var(--nvg-color-primary, #e40f10);
	text-decoration: none;
}

/* Étiquettes de l'article, sous la catégorie.

   Volontairement plus discrètes que la pastille de catégorie (fond gris plein) :
   contour fin, texte gris, plus petit. La catégorie dit le rayon, les étiquettes
   disent le sujet — la hiérarchie doit se lire sans les compter.

   Trois au maximum, plafond posé dans nvg-wp-produit-articles.php. */
.decorem-produit-articles .decorem-carte-etiquettes {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
}

.decorem-produit-articles .decorem-carte-etiquette {
	padding: 3px 9px;
	border: 1px solid #d5d5d5;
	color: #555;
	font-size: 0.65em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}