/**
 * Oioo — Native Gallery Masonry
 *
 * Masonry CSS pour les galeries natives WordPress.
 *
 * - Respecte columns-X de Gutenberg
 * - Conserve les proportions originales
 * - Conserve l'espacement horizontal Gutenberg
 * - Conserve l'espacement vertical
 * - Ne modifie pas la typographie
 * - Aucun JavaScript
 */


/* =========================================================
   GALERIE
   ========================================================= */

.wp-block-gallery {

	/*
	 * Le masonry CSS fonctionne avec les colonnes.
	 */
	display: block !important;

	width: 100% !important;

	/*
	 * On neutralise uniquement le wrapping Flex.
	 */
	flex-wrap: unset !important;

	/*
	 * IMPORTANT :
	 * on récupère l'espacement Gutenberg existant.
	 */
	column-gap: var(--wp--style--block-gap, 20px);
}


/* =========================================================
   NOMBRE DE COLONNES
   ========================================================= */

.wp-block-gallery.columns-1 {
	column-count: 1;
}

.wp-block-gallery.columns-2 {
	column-count: 2;
}

.wp-block-gallery.columns-3 {
	column-count: 3;
}

.wp-block-gallery.columns-4 {
	column-count: 4;
}

.wp-block-gallery.columns-5 {
	column-count: 5;
}

.wp-block-gallery.columns-6 {
	column-count: 6;
}

.wp-block-gallery.columns-7 {
	column-count: 7;
}

.wp-block-gallery.columns-8 {
	column-count: 8;
}


/* =========================================================
   ÉLÉMENTS
   ========================================================= */

.wp-block-gallery > .wp-block-image {

	display: inline-block !important;

	width: 100% !important;

	/*
	 * Espacement vertical.
	 *
	 * On utilise la variable Gutenberg lorsqu'elle existe.
	 */
	margin-bottom: var(--wp--style--block-gap, 20px) !important;

	vertical-align: top;

	box-sizing: border-box;

	break-inside: avoid;
	page-break-inside: avoid;
}


/* =========================================================
   IMAGES
   ========================================================= */

.wp-block-gallery > .wp-block-image > img {

	display: block !important;

	width: 100% !important;

	height: auto !important;

	max-width: 100% !important;

	margin: 0 !important;

	aspect-ratio: auto !important;

	object-fit: contain !important;
}


/* =========================================================
   IS-CROPPED
   ========================================================= */

.wp-block-gallery.is-cropped
> .wp-block-image
> img {

	height: auto !important;

	aspect-ratio: auto !important;

	object-fit: contain !important;
}


/* =========================================================
   LIENS
   ========================================================= */

.wp-block-gallery > .wp-block-image > a {

	display: block;

	width: 100%;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 1024px) {

	.wp-block-gallery {

		column-gap: var(
			--wp--style--block-gap,
			16px
		);
	}


	.wp-block-gallery > .wp-block-image {

		margin-bottom: var(
			--wp--style--block-gap,
			16px
		) !important;
	}


	.wp-block-gallery.columns-1 {
		column-count: 1;
	}

	.wp-block-gallery.columns-2 {
		column-count: 2;
	}

	.wp-block-gallery.columns-3,
	.wp-block-gallery.columns-4,
	.wp-block-gallery.columns-5,
	.wp-block-gallery.columns-6,
	.wp-block-gallery.columns-7,
	.wp-block-gallery.columns-8 {
		column-count: 3;
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.wp-block-gallery {

		column-gap: var(
			--wp--style--block-gap,
			12px
		);
	}


	.wp-block-gallery > .wp-block-image {

		margin-bottom: var(
			--wp--style--block-gap,
			12px
		) !important;
	}


	.wp-block-gallery.columns-1 {
		column-count: 1;
	}

	.wp-block-gallery.columns-2,
	.wp-block-gallery.columns-3,
	.wp-block-gallery.columns-4,
	.wp-block-gallery.columns-5,
	.wp-block-gallery.columns-6,
	.wp-block-gallery.columns-7,
	.wp-block-gallery.columns-8 {
		column-count: 2;
	}
}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media (max-width: 480px) {

	.wp-block-gallery {

		column-count: 1 !important;

		column-gap: 0;
	}


	.wp-block-gallery > .wp-block-image {

		margin-bottom: var(
			--wp--style--block-gap,
			16px
		) !important;
	}
}