/*********************************************
      Slider bloc Galerie
*****************************************/
/*
Fonctionne sur navigateur chrome & edge & opera
On utilise les fonctionnalités de la spécification CSS Overflow 5 
qui ont été conçues pour créer des expériences de défilement et de carrousel.
Les boutons & marqueurs de défilement sont fournis par le navigateur,
et sont accessible par les pseudos classes:
::scroll-button(right) & ::scroll-button(left) & ::scroll-marker
*/

/* 
   Définition d'un nom d'ancre différent pour chaque conteneur de slider
   en PHP via le hook render-block.
   • On injecte dans le style en ligne du bloc galerie une variable CSS
   --anchor-name = --gallery-slider-1 selon l'ID du bloc galerie
   récupéré dans la classe wp-block-gallery-1,wp-block-gallery-2 etc...
   cela va permettre de définir une ancre pour le conteneur du slider
   qu'est le bloc galerie afin de positionner les boutons et marqueur de défilement.
   l'ancre est définit par la régle CSS:  anchor-name: var(--anchor-name)
   • On injecte aussi la variable CSS: --first-img-width dont la valeur est   
   la taille medium_large de la 1ère image du bloc Galerie.
   Cela va nous permettre de régler la largeur du Slider. 
*/

/* Animations fondu entrant */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Animations fondu sortant */
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}


/* conteneur du slider */
.wp-block-gallery.is-style-sngr-gallery-slider {
	
	display: grid!important;
    grid-auto-columns: 100%;
    grid-auto-flow: column;
    place-items: center;
	gap:1rem;
	/* important masque lors de la transition
       entre deux images une barre verticale qui
	   à la couleur d'arrière plan du site */ 
	background:#AB9F98;
	
	/* Largeur du slider a la taille medium_large */
	width:var(--first-img-width);
	
	
	/* permet d'avoir une scroll bar horizontale 
	   donc active le défilement horizontal*/ 
	overflow-X: auto;
	/*définit le comportement du navigateur lorsque la limite horizontale 
	  d'une zone de défilement est atteinte; ici on désactive le balayage horizontal*/ 
    overscroll-behavior-x: contain;
	/*on définit un défilement fluide */ 
    scroll-behavior: smooth;
	/* on masque la scroll bar */
	scrollbar-width: none;

	/* Zone d'accrochage au défilement: 
	   la zone d'accrochage est par défaut le conteneur du slider, 
	   On définit une limite pour l'arrêt du défilement: 
	   mandatory ou proximity  
	*/
	scroll-snap-type: x mandatory; 
	
	/* définition d'une ancre pour le conteneur afin de positionner
	   les boutons et marqueur de défilement */
	anchor-name: var(--anchor-name);
   
   > .wp-block-image{
	   
	   /* l'accrochage au défilement se fait au centre 
	      valeurs possibles: start ou center ou end */
		scroll-snap-align: center;
		
		/* 	Animation fondu entrant & sortant
			lorsque le images entrent ou sortent du conteneur de défilement
			Les images clés fadein seront appliquées à la plage entry 
			et les images clés fade-out à la plage exit*/
		animation: linear fade-in, linear fade-out;
		/* faire que la timeline pilote l'animation*/
		animation-duration: auto;
		animation-timeline: view(inline);
		animation-range: entry 10%, exit 90%;
	}

	/*---- Boutons de défilement ---*/
    &::scroll-button(*) {
      position: fixed;
	  position-anchor: var(--anchor-name);
      background: none;
      border: 0;
      padding: 0;
      font-size: 30px;
	  cursor: pointer;
	  color:#FFFFFF;
	  opacity: 0.7;
	  z-index: 1
    }
	
	&::scroll-button(*):hover,
	&::scroll-button(*):focus {
		opacity: 1;
	}
	
	&::scroll-button(*):disabled {
		opacity:0.2;
		cursor: not-allowed;
	}
	
    &::scroll-button(right) {
      position-area: inline-end center;
      translate: -3rem -0.5rem;
	  content: "►" / attr(data-caption);
    }
	
    &::scroll-button(left) {
      position-area: inline-start center;
      translate: 3rem -0.5rem;
	  content: "◄" / attr(data-caption);
    }
	
	
	/*---- Marqueurs de défilement ----*/
	
	/*marqueur de défilement aprés le slider */
	scroll-marker-group: after;
	
	/* conteneur marqueur de défilement */
	&::scroll-marker-group {
		position: fixed;
		position-anchor: var(--anchor-name);
		position-area: block-end;
		/* on remonte le conteneur des marqueurs
		au bas des images de la galerie*/
		margin: -18px;
		display: grid;
		grid-auto-columns: 20px;
		grid-auto-flow: column;
		gap: 20px;
	}
	
	> .wp-block-image {
		
		/* style marqueur de défilement */
		&::scroll-marker {
			content: "";
			width: 10px;
			height: 10px;
			background:rgba(0,0,0,.2);
			border-radius: 50%;
		}

		/* style marqueur de défilement actif */
		&::scroll-marker:target-current {
		  background: #FFFFFF;
		}
		
    }

}

/* image pleine largeur dans la vue active */
.wp-block-gallery.has-nested-images.columns-default.is-style-sngr-gallery-slider figure.wp-block-image:not(#individual-image) {
    width: 100%!important;
}

/* régles mobile */
@media (max-width:950px){
	
	/* largeur du slider a 70% */
	.wp-block-gallery.is-style-sngr-gallery-slider{
		width:70%;
	}
	
}

@media (max-width:480px){
	
	/* largeur du slider a 100% sur mobile */
	.wp-block-gallery.is-style-sngr-gallery-slider{
		width:100%;
		&::scroll-marker-group {
			grid-auto-columns: 15px;
			gap: 15px;
		}
	}
	
}