/*
 * Style de bloc « Items ronds », posé sur core/columns.
 * Réf design : Figma 14371:23065 (bureau), 14670:5696 (mobile).
 *
 * Structure attendue dans chaque colonne : une image, puis un paragraphe. Deux
 * enfants distincts et non une image légendée, parce que c'est ce qui permet à
 * la mise en page mobile de les séparer à gauche et à droite.
 *
 * core/columns apporte le reste : l'empilement sous 781 px (le seuil du
 * thème), le réglage d'écart, et un nombre de colonnes libre. Ce fichier
 * n'ajoute que ce que WordPress ne sait pas faire : inverser la direction au
 * point de rupture.
 * ------------------------------------------------------------------------- */

/* Bureau : visuel au-dessus, légende dessous, l'ensemble centré. */
.wp-block-columns.is-style-items-ronds .wp-block-column {
	text-align: center;
}

.wp-block-columns.is-style-items-ronds .wp-block-image {
	margin-block: 0 var(--wp--preset--spacing--sm, 0.75rem);
}

.wp-block-columns.is-style-items-ronds img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border: 1rem solid var(--wp--preset--color--blanc, #fff);
	border-radius: var(--wp--custom--radius--full, 9999px);
}

.wp-block-columns.is-style-items-ronds p {
	margin-block: 0;
	color: var(--wp--preset--color--violet-bolder, #28076e);
	font-family: var(--wp--preset--font-family--headings);
	font-size: var(--wp--preset--font-size--xl, 1.5rem);
	line-height: var(--wp--custom--typography--headings--h5--line-height, 1.3333);
	letter-spacing: var(--wp--custom--typography--headings--h5--letter-spacing, -2px);
}

/*
 * Mobile : le visuel passe à GAUCHE et la légende à droite.
 *
 * C'est la seule chose que le bloc natif ne sait pas faire, et la raison d'être
 * de ce style. 781 et non 782 : on se cale juste sous le seuil où WordPress
 * empile lui-même les colonnes, pour que les deux bascules aient lieu au même
 * moment.
 */
@media (max-width: 781px) {

	.wp-block-columns.is-style-items-ronds .wp-block-column {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--md, 1rem);
		text-align: start;
	}

	.wp-block-columns.is-style-items-ronds .wp-block-image {
		flex: 0 0 7.5rem;
		margin-block: 0;
	}

	.wp-block-columns.is-style-items-ronds img {
		border-width: 0.25rem;
	}
}