/*
Bloc « Carrousel » (blocks/carousel/).

La piste est soit le <ul> d'une boucle de contenus, soit un conteneur ajouté au
rendu ; dans les deux cas elle porte .sixclicks-carousel__track. Le nombre
d'éléments visibles vient des variables posées par le bloc.

Sans JavaScript, le carrousel reste utilisable au doigt, à la molette et au
clavier : assets/js/slider.js n'ajoute que le glisser-souris et le défilement
automatique.
*/

.sixclicks-carousel {
	--carousel-items: 3;
	--carousel-items-mobile: 1;
	--carousel-gap: var(--wp--style--block-gap, 1.5rem);

	position: relative;

	/* Un carrousel posé dans un conteneur en rangée refuserait de rétrécir
	   sous la largeur de son contenu, et s'étalerait au lieu de défiler. */
	min-width: 0;
	max-width: 100%;
}

.sixclicks-carousel__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--carousel-gap);
	margin: 0;
	padding: 0 0 var(--wp--preset--spacing--30, 1rem);
	list-style: none;

	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	cursor: grab;
}

/* Le bloc Requête impose sa grille : la piste doit rester une rangée. */
.sixclicks-carousel__track.is-layout-grid {
	grid-template-columns: none;
}

/* La largeur d'un élément se déduit du nombre visible et des espaces entre
   eux : n éléments laissent n-1 intervalles à retirer de la largeur totale. */
.sixclicks-carousel__track > * {
	flex: 0 0
		calc(
			(100% - (var(--carousel-items-mobile) - 1) * var(--carousel-gap)) /
				var(--carousel-items-mobile)
		);
	margin: 0;
	scroll-snap-align: start;
}

@media (min-width: 782px) {
	.sixclicks-carousel__track > * {
		flex-basis: calc(
			(100% - (var(--carousel-items) - 1) * var(--carousel-gap)) /
				var(--carousel-items)
		);
	}
}

.sixclicks-carousel__track:focus-visible {
	outline: 2px solid var(--wp--preset--color--violet);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.sixclicks-carousel__track {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------------- Glisser à la souris */

.sixclicks-carousel .is-dragging {
	cursor: grabbing;
	user-select: none;
}

.sixclicks-carousel .is-dragging a,
.sixclicks-carousel .is-dragging img {
	pointer-events: none;
}

/* ------------------------------------- Boutons de défilement, si le navigateur
   les gère (CSS Overflow 5). Sinon il reste le défilement natif. */

@supports selector(::scroll-button(right)) {
	.sixclicks-carousel__track::scroll-button(left),
	.sixclicks-carousel__track::scroll-button(right) {
		position: absolute;
		top: 40%;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 2.5rem;
		height: 2.5rem;
		border: 1px solid currentColor;
		border-radius: 50%;
		background-color: var(--wp--preset--color--snow);
		color: var(--wp--preset--color--ink);
		font-size: 1.25rem;
		line-height: 1;
		cursor: pointer;
	}

	.sixclicks-carousel__track::scroll-button(left) {
		content: "\2039";
		left: 0;
	}

	.sixclicks-carousel__track::scroll-button(right) {
		content: "\203A";
		right: 0;
	}

	.sixclicks-carousel__track::scroll-button(*):disabled {
		opacity: 0.35;
		cursor: default;
	}

	@media (max-width: 768px) {
		.sixclicks-carousel__track::scroll-button(left),
		.sixclicks-carousel__track::scroll-button(right) {
			display: none;
		}
	}
}

/* --------------------------------------------- Pastilles de position, si gérées */

@supports selector(::scroll-marker) {
	.sixclicks-carousel__track {
		scroll-marker-group: after;
	}

	.sixclicks-carousel__track::scroll-marker-group {
		display: flex;
		justify-content: center;
		gap: 0.5rem;
		padding-block-start: var(--wp--preset--spacing--30, 1rem);
	}

	.sixclicks-carousel__track > *::scroll-marker {
		content: "";
		width: 0.6rem;
		height: 0.6rem;
		border: 1px solid currentColor;
		border-radius: 50%;
		cursor: pointer;
	}

	.sixclicks-carousel__track > *::scroll-marker:target-current {
		background-color: currentColor;
	}
}

/* -------------------------------------------------------------- Éditeur

   La piste ne défile pas dans l'éditeur : chaque élément doit rester
   atteignable pour être modifié. */

.editor-styles-wrapper .sixclicks-carousel__track {
	overflow-x: visible;
	flex-wrap: wrap;
	cursor: default;
}