/**
* Style Carousel bloc Boucle De Requête
* 
* Fonctionne sur navigateur chrome & edge & opera
* Source:
*  - principe: https://developer.chrome.com/blog/carousels-with-css
*  - configurateur carrousel: https://chrome.dev/carousel-configurator/
*  - Démo: https://chrome.dev/carousel/horizontal/gallery/
*  - positionnement des boutons: https://frontendmasters.com/blog/quantity-query-slider/
*
* FONCTIONNEMENT:
* • 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
*   La navigation est possible au clic d'un bouton de navigation. 
*
* • Définition d'un nom d'ancre différent pour chaque conteneur de Carrousel
*   en PHP via le hook render-block:
*   On injecte dans le style en ligne du bloc Boucle De Requête une variable CSS
*   --anchor-name = --query-loop-carousel-1 selon la valeur de l'attribut du 
*   bloc boucle de requête: data-wp-key="1",data-wp-key="2" etc...
*
* • Cela va permettre de définir une ancre pour le conteneur du carrousel
*   qu'est le bloc boucle de requête 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)
*
*/

/*---------------------- conteneur du carrousel ----------------------*/

body.single .is-style-rccsql-carousel-query-loop > ul,
body.page .is-style-rccsql-carousel-query-loop > ul{
	
	/* nbr d'élèment a afficher dans le conteneur*/ 
	--items:3;
	--gap:1rem;
	
	/* On force une disposition en grille */
	display:grid!important;
	grid-auto-flow: column; 
	grid-auto-columns: calc((100% - (var(--items) - 1) * var(--gap)) / var(--items));
	
	/* on supprime la disposition établit par le paramètre
	   nbr de colonne max du bloc boucle de requête */
	grid-template-columns:unset!important;

	gap: var(--gap)!important;
	
	/* pour éviter de masquer une ombre portée des éléments */
	padding:calc(var(--gap) * .3)!important;
	
	/* compensation de la régle padding précédente */
	margin:calc(var(--gap) * -.3)!important;

	/* 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 sur PC*/ 
	scrollbar-width: none;

	/* Zone d'accrochage au défilement: 
	   la zone d'accrochage est par défaut le conteneur du carrousel, 
	   mais on peut la préciser avec scroll-padding & scroll-margin.
	   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);
	
	> li	{
		/*calcul de la largeur de chaque items en tenant compte du gap */
		min-width:calc( (100% - (var(--items) - 1) * var(--gap)) / var(--items) );
		/* on désactive l’accroche au défilement sur chaque item */
		scroll-snap-stop: unset; 				
		/* suppression des marges pour les items de liste */ 
		margin:unset;
		box-shadow: 0 2px 4px 2px rgb(0 0 0 / 10%);
	}
	
	/* permettre un défilement par pagination (3 articles par page)*/
	/* 👉 seulement les premiers de chaque page accrochent */
	> li:nth-child(3n+1) {
		/* scroll-snap-align: start ou center 
		 l'acrochage au défilement c'est a dire l'arrêt
		 se fait a l'élément 3n+1
		 donc seuls les articles 1, 4, 7, … deviennent des points d’accroche.
		 Du coup, le scroll va s’arrêter uniquement sur ces éléments
		 dans un sens de défilement comme dans l'autre.*/
		scroll-snap-align: start;
		/*garantit que le défilement s’arrêtent en 1,4,7.. et ne sautent pas au-delà.*/
		scroll-snap-stop: always;		       
	}
	
	> 	li:hover	{
		/* on supprime l'effet de zoom au survol apportée par l'extension ECCP */ 
		transform:none;
	}

	
	/*---- Boutons de défilement ---*/
	&::scroll-button(*) {
		position: fixed;
		position-anchor: var(--anchor-name);
		border: 0;
		font-size: 20px;
		cursor: pointer;
		opacity: 0.7;
		font-family: "dashicons";
		color: #FFFFFF;
		background: #00000066;
		padding:10px;
		margin: 15px;
	}
	
	&::scroll-button(*):hover,
	&::scroll-button(*):focus {
		opacity: 1;
		background: #000000B;
	}
	
	&::scroll-button(*):active {
		
	}
	
	&::scroll-button(*):disabled {
		cursor: unset;
		opacity:0.2;
	}

	&::scroll-button(right) {
		position-area: inline-end center;
		translate: -1rem -0.5rem;
		content: "\f345";
		border-radius:  0 10px 10px 0 ;
		
	}

	&::scroll-button(left) {
		position-area: inline-start center;
		translate: 1rem -0.5rem;
		content: "\f341";
		border-radius: 10px 0 0 10px;
	}
	
}


/*--------------- régles pour les mobiles ---------------------*/

@media (max-width:767px){
	
	body.single .is-style-rccsql-carousel-query-loop > ul,
	body.page .is-style-rccsql-carousel-query-loop > ul{
		
		/* publication pleine largeur */
		--items: 1;
		grid-auto-columns: 100%; 
		
		/* on rétabli la scroll bar*/ 
		scrollbar-width: auto;
	
		/* on n'affiche pas les boutons de navigation */
		&::scroll-button(*) {
			display:none;
		}
		
		/* marqueurs de défilement aprés le carrousel */
		scroll-marker-group: after;
		
		/* conteneur des marqueurs de défilement */ 
		&::scroll-marker-group {
			position: fixed;
			position-anchor: var(--anchor-name);
			position-area: block-end;
			margin: 10px;
			display: grid;
			grid-auto-columns: 20px;
			grid-auto-flow: column;
			gap: 10px;
		}
	
		> li 	{
			
			/* sur mobile on réactive l'accrochage au défilement
			pour chaque item
			alignement centrée ainsi on voit l'ombre portée */ 
			scroll-snap-align: center;
			
			/* style des marqueurs */ 
			&::scroll-marker {
				content: "";
				width: 12px;
				height: 12px;
				background:#CED4DA;
				border-radius: 50%;
			}

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



/*------------- Apparence du carrousel --------------------------*/

/* On masque la pagination du bloc boucle de requête */
body .is-style-rccsql-carousel-query-loop nav.wp-block-query-pagination{
	display:none!important;
}

/* harmoniser le nombre de mots par ligne des titres */
.is-style-rccsql-carousel-query-loop .wp-block-post-template .wp-block-post-title {
	text-wrap: balance;
}

/* Auteur & Date */
.is-style-rccsql-carousel-query-loop  ul.wp-block-post-template li  div.wp-block-post-author,
.is-style-rccsql-carousel-query-loop  ul.wp-block-post-template li  div.wp-block-post-author-name,
.is-style-rccsql-carousel-query-loop	 ul.wp-block-post-template li div.wp-block-post-date{
	display:block;
	padding:0 1.2em 0 1.2em;
}

/* Auteur complément pour Divi & Astra */
.is-style-rccsql-carousel-query-loop ul.wp-block-post-template li  div.wp-block-post-author__content p.wp-block-post-author__name{
	margin-bottom:0!important;
}

/* Catégories Articles */
.is-style-rccsql-carousel-query-loop ul.wp-block-post-template li div.taxonomy-category a{
	display:block;
	padding:0 1.2em 0 1.2em;
}

/* Extrait */
.is-style-rccsql-carousel-query-loop ul.wp-block-post-template li div.wp-block-post-excerpt p{
	display:block;
	padding:0 1.2em 0 1.2em;
}

/* Titre de l'article */
.is-style-rccsql-carousel-query-loop ul.wp-block-post-template li .wp-block-post-title a,
.is-style-rccsql-carousel-query-loop ul.wp-block-post-template li div.wp-block-post-excerpt p{
	display:block;
	padding:0 1em 0 1em;
	text-decoration:none!important;
}

/* Régles CSS complémentaires au script JS 
lorsque le carrousel passe de la fin au début ou vice versa */
.rccsql-carousel-fade-out {
    opacity: 0;
	transition: opacity 0.25s ease;
}