/**
 * Qantum Related Posts
 *
 * Force une grille CSS Grid sur le conteneur de cartes généré par Avada afin
 * de figer le sizing 1/N par carte, même lorsqu'il y a moins de cartes que de
 * colonnes (les cellules vides restent vides, les cartes ne s'étirent pas).
 *
 * Structure réelle d'Avada (Post Cards) :
 *   .qantum-related-wrapper
 *     > .fusion-post-cards
 *         > ul.fusion-grid.fusion-grid-posts-cards   <-- conteneur des cartes
 *             > li.fusion-layout-column.post-card     <-- une carte
 *                 > .fusion-column-inner-bg           <-- fond arrondi + ombre
 *                 > .fusion-column-wrapper            <-- image + contenu
 *
 * Variables ajustables (surchargeables inline sur .qantum-related-wrapper) :
 *   --qrp-cols   : nombre de colonnes (injecté par le shortcode)
 *   --qrp-gap    : espacement entre les cartes
 *   --qrp-radius : rayon des coins des cartes (doit matcher le design Avada)
 */

.qantum-related-wrapper {
	--qrp-cols: 4;
	--qrp-gap: 30px;
	--qrp-radius: 6px;
	display: block;
	width: 100%;
}

/* Conteneur réel des cartes (la liste <ul>). */
.qantum-related-wrapper .fusion-post-cards .fusion-grid {
	display: grid !important;
	grid-template-columns: repeat(var(--qrp-cols, 4), 1fr) !important;
	gap: var(--qrp-gap, 30px) !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	align-items: stretch;
}

/* Masque les paragraphes vides injectés par wpautop (sinon ils prennent des cellules). */
.qantum-related-wrapper .fusion-post-cards .fusion-grid > p {
	display: none !important;
}

/*
 * Annule le sizing flex / inline / float ET la gouttière de colonne d'Avada
 * (padding du <li> + marge du fond .fusion-column-inner-bg) afin que chaque
 * carte occupe exactement une cellule de la grille, soit alignée flush sur
 * les bords du conteneur, et que l'espacement soit géré uniquement par le
 * gap de la grille.
 */
.qantum-related-wrapper .fusion-post-cards .fusion-grid > li.fusion-layout-column,
.qantum-related-wrapper .fusion-post-cards .fusion-grid > .fusion-post-cards-grid-column {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	flex: unset !important;
	margin: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	float: none !important;
}

.qantum-related-wrapper .fusion-post-cards .fusion-grid > li .fusion-column-inner-bg {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * Arrondit les coins supérieurs de l'image de la carte pour matcher le rayon
 * du fond (.fusion-column-inner-bg) : l'image est un calque distinct laissé
 * carré car l'overflow de la colonne est volontairement « visible » (pour
 * laisser sortir l'ombre au survol).
 */
.qantum-related-wrapper .fusion-post-card-image,
.qantum-related-wrapper .fusion-post-card-image .fusion-image-wrapper,
.qantum-related-wrapper .fusion-post-card-image img {
	border-top-left-radius: var(--qrp-radius, 6px) !important;
	border-top-right-radius: var(--qrp-radius, 6px) !important;
	overflow: hidden !important;
}

/* Tablette : 2 colonnes. */
@media (max-width: 900px) {
	.qantum-related-wrapper .fusion-post-cards .fusion-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Mobile : 1 colonne. */
@media (max-width: 500px) {
	.qantum-related-wrapper .fusion-post-cards .fusion-grid {
		grid-template-columns: 1fr !important;
	}
}