/**
 * The Masonry shape for a core gallery.
 *
 * POURQUOI UNE FEUILLE ICI, alors que cette extension n'habille rien. Une
 * forme n'est pas une robe : sans ces règles, le style « Maçonnerie » serait
 * une case qui ne fait rien, et l'option serait un mensonge. C'est la même
 * raison qui fait vivre `gallery-rows.css` à côté. Les couleurs, les filets,
 * les arrondis restent au thème, ici comme ailleurs : cette feuille ne pose
 * pas une seule couleur.
 *
 * `column-count` ET NON UNE BIBLIOTHÈQUE. Le cœur pose la galerie en flex et
 * coupe les images à hauteur égale ; une maçonnerie les laisse respirer,
 * chacune gardant ses proportions. Les colonnes CSS font cela sans un octet
 * de JavaScript, s'impriment correctement, et n'ont rien à recalculer quand
 * la page bouge.
 *
 * L'ORDRE EST LE PRIX, et il faut le dire. Les colonnes CSS se remplissent
 * vers le bas : la deuxième photographie se place SOUS la première, non à
 * côté. Sur une page d'images, où l'on regarde plutôt qu'on ne lit, c'est un
 * échange acceptable — et c'est ce que faisaient déjà les maçonneries à
 * bibliothèque, qui posaient chaque vignette dans la colonne la plus courte.
 *
 * LA VRAIE MAÇONNERIE DU CSS N'EXISTE PAS ENCORE. Mesuré le 28 septembre 2026
 * sur Chrome 152 : `grid-template-rows: masonry`, `display: masonry` et
 * `item-pack` sont refusés tous les trois. La spécification hésite encore
 * entre ces syntaxes ; écrire ici une règle pour l'une d'elles serait écrire
 * du code que personne ne peut essayer, et qui se réveillerait un jour sans
 * que personne l'ait voulu. Le jour où elle sera là, un `@supports` suffira.
 *
 * @package cab-useful-options
 * @since   1.21.0
 */

/*
 * LE NOMBRE DE COLONNES SUIT LE CONTENEUR, PAS LA FENÊTRE.
 *
 * `columns` accepte un nombre ET une largeur, et le navigateur retient le plus
 * petit des deux : au plus ce que la galerie demande, au moins 14 rem par
 * colonne. Une galerie réglée sur cinq colonnes en fait donc cinq au large,
 * trois dans un onglet, deux dans une colonne, une sur un téléphone — sans
 * une seule requête de média.
 *
 * C'est ce qui manquait à la version que le thème portait : ses paliers
 * étaient écrits en largeur de FENÊTRE, si bien qu'une galerie posée dans une
 * colonne étroite gardait ses trois colonnes et écrasait ses photographies.
 */
.wp-block-gallery.is-style-cab-uo-masonry.has-nested-images {
	display: block;
	columns: var( --cab-uo-masonry-cols, 3 ) 14rem;
	column-gap: var( --wp--style--unstable-gallery-gap, var( --wp--style--block-gap, 1.5rem ) );
}

/* Ce que la galerie demande, tel que le cœur l'écrit sur elle. */
.wp-block-gallery.is-style-cab-uo-masonry.columns-1 { --cab-uo-masonry-cols: 1; }
.wp-block-gallery.is-style-cab-uo-masonry.columns-2 { --cab-uo-masonry-cols: 2; }
.wp-block-gallery.is-style-cab-uo-masonry.columns-3 { --cab-uo-masonry-cols: 3; }
.wp-block-gallery.is-style-cab-uo-masonry.columns-4 { --cab-uo-masonry-cols: 4; }
.wp-block-gallery.is-style-cab-uo-masonry.columns-5 { --cab-uo-masonry-cols: 5; }
.wp-block-gallery.is-style-cab-uo-masonry.columns-6 { --cab-uo-masonry-cols: 6; }
.wp-block-gallery.is-style-cab-uo-masonry.columns-7 { --cab-uo-masonry-cols: 7; }
.wp-block-gallery.is-style-cab-uo-masonry.columns-8 { --cab-uo-masonry-cols: 8; }

/*
 * `:not(#individual-image)` NE DÉSIGNE RIEN, et c'est le but. Le cœur emploie
 * lui-même cet identifiant fantôme pour donner à ses règles un poids
 * d'identifiant. Sans lui, la figure restait en flex et l'image montait à
 * toute la hauteur de la colonne : la sienne pèse (0,3,1), celle-ci doit
 * peser davantage.
 */
.wp-block-gallery.is-style-cab-uo-masonry.has-nested-images figure.wp-block-image:not(#individual-image) {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 var( --wp--style--unstable-gallery-gap, var( --wp--style--block-gap, 1.5rem ) );
	/* Une photographie ne doit jamais être coupée par un saut de colonne. */
	break-inside: avoid;
	page-break-inside: avoid;
}

.wp-block-gallery.is-style-cab-uo-masonry.has-nested-images figure.wp-block-image:not(#individual-image) > img,
.wp-block-gallery.is-style-cab-uo-masonry.has-nested-images figure.wp-block-image:not(#individual-image) > a > img {
	display: block;
	width: 100%;
	height: auto;
	/* Le recadrage du cœur n'a plus lieu d'être : c'est tout le propos. */
	flex: none;
	object-fit: initial;
}

/*
 * PAS DE `aspect-ratio` ICI, ET SURTOUT PAS `auto`.
 *
 * Les attributs `width` et `height` du balisage donnent déjà le rapport à
 * l'image, par la feuille du navigateur. Or le cœur pose
 * `contain-intrinsic-size: 3000px 1500px` sur les images en `sizes="auto"`,
 * celles qui se chargent en différé : privée de rapport, chacune réserverait
 * ces 1500 px et la colonne deviendrait une tour. Le défaut ne se voit pas à
 * l'essai, puisque la première image de la page, chargée d'emblée, sort juste.
 */

/*
 * LA LÉGENDE N'EST PAS NOTRE AFFAIRE, et une version l'a oublié.
 *
 * Elle la faisait redescendre sous l'image, sans fond ni couleur, au motif
 * qu'un voile suppose une vignette de hauteur connue. C'était poser une forme
 * que personne n'avait demandée : sur Twenty Twenty-Five, une galerie en
 * maçonnerie montrait sa légende sous l'image quand les deux autres la
 * montraient dessus, sur le dégradé du cœur. Vu par Cyrille le 29 septembre,
 * qui avait basculé le site local sur ce thème exprès.
 *
 * La légende reste donc ce que le cœur en fait, ici comme ailleurs, et le
 * thème en décide. Ce style ne règle que la disposition : combien de colonnes,
 * et des figures qui gardent leurs proportions.
 */