/*********************************************
      Slider bloc Galerie Editeur Gutenberg
	  
1) Bloc Galerie — Grid "justifié"
2) Bloc Galerie — Grid "carré"
3) Bloc Galerie — Style Masonry
4) Bloc Galerie — Style Album

*****************************************/
/**


/* ==========================================================
	Bloc Galerie — Grid "justifié" avec colonnes égales
	et hauteur de ligne dérivée du ratio natif des images 
========================================================== */
@media (min-width: 922px) {
	
	.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-justified-gallery {
		display: grid !important;

		/* 	Gap natif WordPress : priorité à l'espacement de bloc si défini,
			sinon la valeur native, sinon fallback. 
			Ne prend pas en compte un espacement des blocs 
			horizontal & vertical différent.
			C'est la plus grande des valeurs d'espacement de bloc qui l'emporte.
		*/
		row-gap: var(--wp--style--unstable-gallery-gap, var(--wp--style--block-gap, 16px));
		column-gap: var(--wp--style--unstable-gallery-gap, var(--wp--style--block-gap, 16px));
	}

	/* --- Nombre de colonnes selon la classe posée par WordPress --- */
	.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-justified-gallery.columns-1 { grid-template-columns: repeat(1, 1fr); }
	.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-justified-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
	.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-justified-gallery.columns-default,
	.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-justified-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
	.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-justified-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
	.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-justified-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }
	.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-justified-gallery.columns-6 { grid-template-columns: repeat(6, 1fr); }
	.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-justified-gallery.columns-7 { grid-template-columns: repeat(7, 1fr); }
	.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-justified-gallery.columns-8 { grid-template-columns: repeat(8, 1fr); }

	/* --- Cellule de la grille : chaque figure occupe sa case --- */
	.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-justified-gallery .wp-block-image {
		margin: 0!important;
		width: 100%!important;
	}

	/* --- Image : on laisse le ratio natif s'exprimer via width/height HTML --- */
	.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-justified-gallery .wp-block-image img {
		display: block;
		width: 100%!important;
		height: auto!important; /* pas de aspect-ratio forcé, pas de height:100% */
	}
	
}


/* ==========================================================
	Bloc Galerie — Grid "carré" façon Instagram
	Toutes les cellules sont des carrés (1:1), 
	recadrage via object-fit
========================================================== */

.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-square-gallery {
	display: grid !important;

	/* Gap natif WordPress : mêmes règles que pour le style justifié */
	row-gap: var(--wp--style--unstable-gallery-gap, var(--wp--style--block-gap, 16px));
	column-gap: var(--wp--style--unstable-gallery-gap, var(--wp--style--block-gap, 16px));
}

/* --- Nombre de colonnes selon la classe posée par WordPress --- */
.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-square-gallery.columns-1 { grid-template-columns: repeat(1, 1fr); }
.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-square-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-square-gallery.columns-default,
.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-square-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-square-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-square-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }
.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-square-gallery.columns-6 { grid-template-columns: repeat(6, 1fr); }
.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-square-gallery.columns-7 { grid-template-columns: repeat(7, 1fr); }
.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-square-gallery.columns-8 { grid-template-columns: repeat(8, 1fr); }

/* --- Cellule de la grille : figure carrée, on masque tout débordement --- */
.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-square-gallery .wp-block-image {
	margin: 0 !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden;
}

/* --- Image : recadrage en carré, centré, sans déformation --- */
.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-square-gallery .wp-block-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center;
}

/* Régles responsive */	
@media(max-width: 480px){
	.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-square-gallery.is-style-sgnr-square-gallery{
		grid-template-columns: 1fr 1fr;
	}
}

@media(min-width: 481px) and (max-width: 767px) {
	.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-square-gallery.is-style-sgnr-square-gallery{
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media(min-width: 768px) and (max-width: 921px) {
	.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-square-gallery.is-style-sgnr-square-gallery{
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

/* ==========================================================
	Bloc Galerie — Style Masonry
========================================================== */

/*
Source: 
https://www.wppagebuilders.com/create-masonry-image-gallery-in-gutenberg-without-plugin/
*/

/*
Pour avoir une grille masonry, 
si la nouvelle régle display:grid-lanes n'est pas supporté
on utilise la disposition multicolonnes
*/
@supports not (display: grid-lanes) {
	
	@media(min-width:768px){

		/*
		Par défaut lorsqu'on insère un bloc galerie il a la classe columns-default
		qui définit l'élément (bloc Galerie) pour qu'il ait trois colonnes par défaut. 
		On définit la mise en page avec la propriété de colonnes standard:columns et
		les préfixes pour les différents navigateurs
		*/
		.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-masonry-gallery.columns-default {
			-webkit-columns: 3; /* Chrome, Safari, Opera */
			-moz-columns: 3; /* Firefox */
			columns: 3; /* Standard syntax */
		}

		/*
		Garantit que le bloc Galerie s'affiche en tant qu'élément de bloc, 
		remplaçant tous les styles en ligne.
		excepté pour les mobiles ou on garde une disposition en colonne
		*/
		.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-masonry-gallery{
			display:block !important;
		}
		
		/*
		Définit les images dans la largeur de la galerie à 100 % de leur conteneur, 
		remplissant ainsi la colonne. 
		Définit la marge inférieure à l'aide d'une variable personnalisée native a WordPress 
		qui permet d'avoir le même ecartement vertical entre images que celui horizontal:
		--wp--style--unstable-gallery-gap 
		*/
		.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-masonry-gallery .wp-block-image{
			width:100% !important;
			margin-bottom:var(--wp--style--unstable-gallery-gap,16px)!important;
		}

		/* 
		 suppression des marges du block image
		de manière a avoir un style justifié
		c'est a dire un même espacement horizontal & vertical entre les images
		*/
		.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-masonry-gallery .wp-block-image{
			margin-top:0!important;
		}
			
		/*
		Lorsqu'on définit manuellement le nbr de colonne a un bloc galerie
		WordPress ajoute la classe column-1 si on a sélectionné une colonne
		et ainsi de suite.
		.eccp-masonry-image.columns-1 à .eccp-masonry-image.columns-8:
		Chaque classe définit le nombre de colonnes pour différentes 
		mises en page à l'aide de la propriété de colonnes standard
		et des préfixes pour les différents navigateurs
		*/
		.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-masonry-gallery.columns-1 {
			-webkit-columns: 1; /* Chrome, Safari, Opera */
			-moz-columns: 1; /* Firefox */
			columns: 1; /* Standard syntax */
		}

		.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-masonry-gallery.columns-2 {
			-webkit-columns: 2; 
			-moz-columns: 2; 
			columns: 2; 
		}

		.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-masonry-gallery.columns-3 {
			-webkit-columns: 3; 
			-moz-columns: 3; 
			columns: 3; 
		}

		.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-masonry-gallery.columns-4 {
			-webkit-columns: 4; 
			-moz-columns: 4;
			columns: 4; 
		}

		.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-masonry-gallery.columns-5 {
			-webkit-columns: 5; 
			-moz-columns: 5;
			columns: 5; 
		}

		.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-masonry-gallery.columns-6 {
			-webkit-columns: 6; 
			-moz-columns: 6; 
			columns: 6;
		}

		.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-masonry-gallery.columns-7 {
			-webkit-columns: 7;
			-moz-columns: 7; 
			columns: 7;
		}

		.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-masonry-gallery.columns-8 {
			-webkit-columns: 8;
			-moz-columns: 8; 
			columns: 8;
		}
	
	}
	
}


/* 
Pour avoir une grille masonry
Grid Lanes pour les navigateurs compatibles

On définit des colonnes rigides via grid-template-columns, 
et les éléments s'empilent librement du haut vers le bas dans l'axe vertical
L'algorithme de Grid Lanes cherche en permanence à combler le vide le plus 
haut possible. Cependant, une différence infime d'un seul pixel entre deux 
colonnes peut contraindre l'algorithme à propulser un élément dans une 
colonne inattendue.
C'est là qu'intervient la propriété flow-tolerance. 
Elle permet d'indiquer au navigateur un seuil de tolérance 
(une marge d'erreur admissible). Si deux colonnes ont des hauteurs proches 
comprises dans cette fourchette, le navigateur considère qu'il y a "égalité" 
et choisit de respecter l'ordre naturel d'écriture du document plutôt 
que d'optimiser l'espace au pixel près.

auto-fit evite d'avoir des colonnes vide.
Si on a trois images de 300px et une résolution de 1200px:
- avec auto-fill on va avoir trois colonnes de 300px remplies et une colonne vide.
- avec auto-fit on va avoir trois colonnes de 400px remplies.
*/
@supports (display: grid-lanes) {
	
	/*
	Pour les mobiles on garde une disposition 
	en colonne par la régle css native du bloc galerie:
	display:flex
	*/
	@media(min-width:768px){

		/* disposition Masonry */
		.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-masonry-gallery {
			
			display: grid-lanes!important;
			
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			
			flow-tolerance: 20px;
			/* Aligne l'ordre de navigation clavier et des revues d'écran 
			sur la disposition visuelle générée par la grille */
			
			reading-flow: grid-rows;
			
		}
		
		.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-masonry-gallery .wp-block-image{
			width:100% !important;
		}
		
	}
	
}

/* ==========================================================
	Bloc Galerie — Style Album
========================================================== */

/* On masque toutes les images du bloc galerie exceptée la 1ère
  qui sera la couverture de l'album
*/
.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-gallery-album  .wp-block-image:not(:first-child) {
   display: none!important;
}

/* 
   On a définit le nom de l'album avec la légende de la galerie
   que l'on positionne au centre du bloc galerie.
   La balise <figcaption> occupe toute la hauteur de la galerie 
   et sert d'overlay pour le titre de l'album.
   La couleur du nom de l'album est définit avec le menu format
   de la barre d'outils:"Mettre en évidence".
*/
.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-gallery-album figcaption.blocks-gallery-caption {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	/* Overlay semi-transparent sur toute la couverture */
	background-color: rgba(0, 0, 0, 0.1);

	/* Centrage du texte (horizontal + vertical) via flexbox */
	display: flex;
	align-items: center;
	justify-content: center;

	box-sizing: border-box;
	text-align: center;
	font-size: 24px;
	z-index: 1;
	color: #FFFFFF;
	
	/* effet texte shadow pour le nom de l'album */
	text-shadow: 1px 1px 2px rgba(0,0,0,1);
}

/* Régles pour les mobiles
*/
@media(max-width:480px) {
	.editor-styles-wrapper .wp-block-gallery.is-style-sgnr-gallery-album figcaption.blocks-gallery-caption {
		font-size: 20px;
	}
}