/**
 * Qemetica Carousel - Styles CSS
 *
 * Transform any WordPress block into a carousel with the .qe class
 * Compatible with post loops and all WordPress blocks
 * Compatible with Block Editor and frontend
 *
 * @package QemeticaCarousel
 * @version 1.0.4.1
 * @author weblazer35
 */

/* ==========================================================================
   VARIABLES CSS
   ========================================================================== */

:root {
	--carousel-button-size: 2.8rem;
	--carousel-button-offset: 0px;
	--carousel-marker-size: 0.75rem;
	--carousel-marker-gap: 0.75rem;
	--carousel-marker-bottom-offset: -2rem;
	--carousel-z-index: 5;
	--carousel-transition-duration: 0.3s;
	--carousel-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);

	/* Colors - automatically detected from theme styles by PHP */
	/* Values below act as fallbacks if no theme styles are found */
	--carousel-button-bg: transparent;
	--carousel-button-color: #1E1E26;
	--carousel-marker-color: var(--carousel-button-color);
	--carousel-marker-active-color: var(--carousel-button-color);
	--carousel-shadow: 0 0 0 rgba(0, 0, 0, 0);
	--carousel-nav-gap: 0.75rem;

	/* Carousel padding - automatically set by PHP/JavaScript */
	--carousel-padding-left: 0px;
	--carousel-padding-right: 0px;
	--carousel-padding-top: 0px;
	--carousel-padding-bottom: var(--wp--preset--spacing--medium, 1.5rem);
}

/* ==========================================================================
   CAROUSEL PRINCIPAL
   ========================================================================== */

/* Force every parent containing a carousel to use position: relative */
/* Required so navigation buttons and markers are positioned correctly */

.qe {
	position: relative !important;
}

/* Ensure the direct parent is also positioned relative */
*:has(> .qe) {
	position: relative !important;
	overflow: visible;
	box-sizing: border-box;
}

/* Main carousel styles - grouped selectors for editor compatibility */
.qe,
.block-editor-block-list__layout .qe,
.editor-styles-wrapper .qe {
	position: relative !important;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	justify-content: flex-start;

	overflow-x: scroll;
	overflow-y: visible;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;

	scroll-padding-left: var(--carousel-scroll-padding-left, 0);
	scroll-padding-right: var(--carousel-scroll-padding-right, 0);

	-ms-overflow-style: none;
	scrollbar-width: none;
	-webkit-scrollbar: none;

	isolation: isolate;
	contain: layout !important;
	transform: translateZ(0);
}

/* ==========================================================================
   CAROUSEL ITEMS
   ========================================================================== */

.qe>*,
.block-editor-block-list__layout .qe>*,
.editor-styles-wrapper .qe>* {
	position: relative;
	flex: 0 0 auto;
	/* width: 100%; */
	height: auto;
	scroll-snap-align: start;
	/* scroll-snap-stop: always; */
	margin: 0px !important;
	padding: 0px;
}

.qe .wp-block-group[style*="border-radius"] {
	overflow: hidden;
}

.qe .wp-block-group.has-global-padding {
	padding-left: initial;
	padding-right: initial;
}


.qe .has-background,
.block-editor-block-list__layout .qe .has-background,
.editor-styles-wrapper .qe .has-background {
	height: 100%;
}

/* ==========================================================================
   GALERIES EN MODE CAROUSEL
   ========================================================================== */

.wp-block-gallery.qe,
.block-editor-block-list__layout .wp-block-gallery.qe,
.editor-styles-wrapper .wp-block-gallery.qe {
	flex-wrap: nowrap !important;
	columns: auto !important;
}

.wp-block-gallery.qe>.wp-block-image,
.block-editor-block-list__layout .wp-block-gallery.qe>.wp-block-image,
.editor-styles-wrapper .wp-block-gallery.qe>.wp-block-image {
	flex: 0 0 auto;
	width: calc(16.666% - var(--wp--style--block-gap, 1rem) * 5 / 6);
	min-width: calc(16.666% - var(--wp--style--block-gap, 1rem) * 5 / 6);
	max-width: 100%;
	scroll-snap-align: start;
}

.wp-block-gallery.qe>.wp-block-image img,
.block-editor-block-list__layout .wp-block-gallery.qe>.wp-block-image img,
.editor-styles-wrapper .wp-block-gallery.qe>.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   GRILLES (GRID LAYOUT) EN MODE CAROUSEL
   ========================================================================== */

.is-layout-grid.qe,
.block-editor-block-list__layout .is-layout-grid.qe,
.editor-styles-wrapper .is-layout-grid.qe {
	display: flex !important;
	grid-template-columns: none !important;
	flex-wrap: nowrap !important;
}

.is-layout-grid.qe>*,
.block-editor-block-list__layout .is-layout-grid.qe>*,
.editor-styles-wrapper .is-layout-grid.qe>* {
	flex: 0 0 auto;
	width: initial;
	min-width: initial;
	max-width: initial;
}

/* Grid Item Position - Respecter grid-column span */
.is-layout-grid.qe>*[style*="grid-column-end:span 2"],
.is-layout-grid.qe>*[style*="grid-column:span 2"] {
	width: calc(var(--carousel-grid-item-width, 33.333%) * 2 + var(--wp--style--block-gap, 1rem)) !important;
}

.is-layout-grid.qe>*[style*="grid-column-end:span 3"],
.is-layout-grid.qe>*[style*="grid-column:span 3"] {
	width: calc(var(--carousel-grid-item-width, 33.333%) * 3 + var(--wp--style--block-gap, 1rem) * 2) !important;
}

.is-layout-grid.qe>*[style*="grid-column-end:span 4"],
.is-layout-grid.qe>*[style*="grid-column:span 4"] {
	width: calc(var(--carousel-grid-item-width, 33.333%) * 4 + var(--wp--style--block-gap, 1rem) * 3) !important;
}

/* Helper classes to define the number of visible columns in the carousel grid */
/* Simplified: use a generic rule with --carousel-grid-item-width variable */
.is-layout-grid.qe[class*="qe-cols-"]>* {
	width: var(--carousel-grid-item-width);
	min-width: var(--carousel-grid-item-width);
}

/* Define --carousel-grid-item-width for each column count */
.is-layout-grid.qe.qe-cols-1>* {
	--carousel-grid-item-width: 100%;
}

.is-layout-grid.qe.qe-cols-2>* {
	--carousel-grid-item-width: calc(50% - var(--wp--style--block-gap, 1rem) / 2);
}

.is-layout-grid.qe.qe-cols-3>* {
	--carousel-grid-item-width: calc(33.333% - var(--wp--style--block-gap, 1rem) * 2 / 3);
}

.is-layout-grid.qe.qe-cols-4>* {
	--carousel-grid-item-width: calc(25% - var(--wp--style--block-gap, 1rem) * 3 / 4);
}

.is-layout-grid.qe.qe-cols-5>* {
	--carousel-grid-item-width: calc(20% - var(--wp--style--block-gap, 1rem) * 4 / 5);
}

.is-layout-grid.qe.qe-cols-6>* {
	--carousel-grid-item-width: calc(16.666% - var(--wp--style--block-gap, 1rem) * 5 / 6);
}

.is-layout-grid.qe.qe-cols-7>* {
	--carousel-grid-item-width: calc(14.285% - var(--wp--style--block-gap, 1rem) * 6 / 7);
}

.is-layout-grid.qe.qe-cols-8>* {
	--carousel-grid-item-width: calc(12.5% - var(--wp--style--block-gap, 1rem) * 7 / 8);
}

.is-layout-grid.qe.qe-cols-9>* {
	--carousel-grid-item-width: calc(11.111% - var(--wp--style--block-gap, 1rem) * 8 / 9);
}

.is-layout-grid.qe.qe-cols-10>* {
	--carousel-grid-item-width: calc(10% - var(--wp--style--block-gap, 1rem) * 9 / 10);
}

.is-layout-grid.qe.qe-cols-11>* {
	--carousel-grid-item-width: calc(9.090% - var(--wp--style--block-gap, 1rem) * 10 / 11);
}

.is-layout-grid.qe.qe-cols-12>* {
	--carousel-grid-item-width: calc(8.333% - var(--wp--style--block-gap, 1rem) * 11 / 12);
}

.is-layout-grid.qe.qe-cols-13>* {
	--carousel-grid-item-width: calc(7.692% - var(--wp--style--block-gap, 1rem) * 12 / 13);
}

.is-layout-grid.qe.qe-cols-14>* {
	--carousel-grid-item-width: calc(7.142% - var(--wp--style--block-gap, 1rem) * 13 / 14);
}

.is-layout-grid.qe.qe-cols-15>* {
	--carousel-grid-item-width: calc(6.666% - var(--wp--style--block-gap, 1rem) * 14 / 15);
}

.is-layout-grid.qe.qe-cols-16>* {
	--carousel-grid-item-width: calc(6.25% - var(--wp--style--block-gap, 1rem) * 15 / 16);
}

/* qe-min-width: use the minimum width defined in the grid */
.is-layout-grid.qe.qe-min-width>*,
.block-editor-block-list__layout .is-layout-grid.qe.qe-min-width>*,
.editor-styles-wrapper .is-layout-grid.qe.qe-min-width>*,
.wp-block-post-template.qe.qe-min-width .wp-block-post,
.block-editor-block-list__layout .wp-block-post-template.qe.qe-min-width .wp-block-post,
.editor-styles-wrapper .wp-block-post-template.qe.qe-min-width .wp-block-post,
.wp-block-group.qe.qe-min-width>*,
.block-editor-block-list__layout .wp-block-group.qe.qe-min-width>*,
.editor-styles-wrapper .wp-block-group.qe.qe-min-width>* {
	flex: 0 0 auto !important;
	width: initial;
	min-width: initial;
	max-width: initial;
}

/* ==========================================================================
   SCROLL SNAP POUR MODE AUTO (Grid item position: Auto)
   ========================================================================== */

.qe.qe-min-width>*,
.block-editor-block-list__layout .qe.qe-min-width>*,
.editor-styles-wrapper .qe.qe-min-width>*,
.wp-block-post-template.qe:not(.is-layout-grid) .wp-block-post,
.block-editor-block-list__layout .wp-block-post-template.qe:not(.is-layout-grid) .wp-block-post,
.editor-styles-wrapper .wp-block-post-template.qe:not(.is-layout-grid) .wp-block-post,
.wp-block-post-template.qe.qe-min-width .wp-block-post,
.block-editor-block-list__layout .wp-block-post-template.qe.qe-min-width .wp-block-post,
.editor-styles-wrapper .wp-block-post-template.qe.qe-min-width .wp-block-post,
.wp-block-group.qe.qe-min-width>*,
.block-editor-block-list__layout .wp-block-group.qe.qe-min-width>*,
.editor-styles-wrapper .wp-block-group.qe.qe-min-width>*,
.wp-block-gallery.qe.qe-min-width>.wp-block-image,
.block-editor-block-list__layout .wp-block-gallery.qe.qe-min-width>.wp-block-image,
.editor-styles-wrapper .wp-block-gallery.qe.qe-min-width>.wp-block-image {
	scroll-snap-align: start !important;
}

/* ==========================================================================
   NAVIGATION BUTTONS
   ========================================================================== */

.qe-nav {
	z-index: var(--carousel-z-index);
	pointer-events: none;
	display: flex;
	align-items: center;
	gap: var(--carousel-nav-gap);
	color: var(--carousel-button-color, #1E1E26);
}

.qe-nav--overlay-sides {
	position: absolute;
	inset: 0;
}

.qe-nav[data-qe-arrow-placement^="bottom-"] {
	position: relative;
	inset: auto;
	padding-block: var(--wp--preset--spacing--small);
	width: 100%;
	box-sizing: border-box;
	/* padding-inline-start: var(--carousel-padding-left, 0px); */
	/* padding-inline-end: var(--carousel-padding-right, 0px); */
	margin-block-start: 0;
	max-width: 100% !important;
}

.qe-nav--bottom-right {
	justify-content: flex-end;
}

.qe-nav--bottom-center {
	justify-content: center;
}

.qe-nav--bottom-left {
	justify-content: flex-start;
}

.qe-nav-btn {
	position: relative;
	z-index: var(--carousel-z-index);
	width: var(--carousel-button-size);
	height: var(--carousel-button-size);
	border-radius: 100rem;
	background-color: var(--carousel-button-bg, transparent);
	border: 1px solid var(--carousel-button-color, #1E1E26);
	color: var(--carousel-button-color, #1E1E26);
	opacity: 1;
	visibility: visible;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--carousel-shadow);
	transition: all 100ms ease;
	padding: 0;
	margin: 0;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
	line-height: 1;
	pointer-events: auto;
	outline: 0 solid currentColor;
	outline-offset: 0;
	
}

.qe-nav-btn svg {
	width: 50%;
	height: 50%;
	fill: currentColor;
	pointer-events: none;
	flex-shrink: 0;
}

.qe-nav-btn:hover {
	box-shadow: var(--carousel-shadow), 0 0 0 rgba(0, 0, 0, 0);
	background-color: var(--carousel-button-bg);
	outline: 1px solid currentColor;
	outline-offset: -2px;
}

.qe-nav-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.qe-nav-btn:disabled {
	pointer-events: none;
	cursor: default;
}

.qe-nav[data-qe-disabled-arrow-mode="hide"] .qe-nav-btn:disabled {
	display: none;
}

.qe-nav[data-qe-disabled-arrow-mode="dim"] .qe-nav-btn:disabled {
	opacity: 0.5;
}

.qe-nav--overlay-sides .qe-nav-btn {
	position: absolute;
	top: 50%;
}

.qe-nav--overlay-sides .qe-nav-btn--prev {
	left: calc(var(--carousel-padding-left, 0px) + var(--carousel-button-offset, 0px));
	transform: translate(-50%, -50%);
}

.qe-nav--overlay-sides .qe-nav-btn--next {
	right: calc(var(--carousel-padding-right, 0px) + var(--carousel-button-offset, 0px));
	left: auto;
	transform: translate(50%, -50%);
}

/* Hide navigation buttons */
.qe.qe-hide-arrows ~ .qe-nav {
	display: none !important;
}

/* ==========================================================================
   PAGINATION MARKERS (DOTS)
   ========================================================================== */

.qe-markers {
	position: absolute;
	z-index: var(--carousel-z-index);
	bottom: calc(var(--carousel-marker-bottom-offset) + var(--carousel-padding-bottom, 1rem));
	left: var(--carousel-padding-left, 0);
	width: calc(100% - var(--carousel-padding-left, 0px) - var(--carousel-padding-right, 0px));
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--carousel-marker-gap);
	transform: translate(0, 100%);
	transition: opacity var(--carousel-transition-duration) var(--carousel-transition-easing);
}

.qe-marker {
	width: var(--carousel-marker-size);
	height: var(--carousel-marker-size);
	background: var(--carousel-marker-color, var(--carousel-button-bg));
	border-radius: 50%;
	opacity: 0.5;
	box-shadow: var(--carousel-shadow);
	transition: opacity var(--carousel-transition-duration) var(--carousel-transition-easing);
	cursor: pointer;
	border: none;
	padding: 0;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.qe-marker:hover {
	opacity: 0.75;
}

.qe-marker:focus-visible {
	outline: 2px solid var(--carousel-marker-active-color, var(--carousel-button-bg));
	outline-offset: 2px;
}

.qe-marker.is-active {
	background: var(--carousel-marker-active-color, var(--carousel-marker-color, var(--carousel-button-bg)));
	opacity: 1;
	cursor: default;
}

/* Hide pagination markers */
.qe.qe-hide-markers ~ .qe-markers {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* ==========================================================================
   SNAP STOP, ALIGNMENT & STYLE OPTIONS
   ========================================================================== */

/* Snap Stop */
.qe.qe-snap-stop > *,
.block-editor-block-list__layout .qe.qe-snap-stop > *,
.editor-styles-wrapper .qe.qe-snap-stop > * {
	scroll-snap-stop: always !important;
}

/* Markers alignment options */
.qe.qe-markers-align-left ~ .qe-markers {
	justify-content: flex-start !important;
}

.qe.qe-markers-align-center ~ .qe-markers {
	justify-content: center !important;
}

.qe.qe-markers-align-right ~ .qe-markers {
	justify-content: flex-end !important;
}

/* Markers style options (dots/lines) */
.qe.qe-markers-style-lines ~ .qe-markers .qe-marker {
	border-radius: 2px !important;
	width: 24px !important;
	height: 4px !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN - ALIGNMENT WITH WORDPRESS
   ========================================================================== */

/* Rules derived from analysing WordPress CSS:
   - Primary breakpoint: 600px (mobile/tablet)
   - Secondary breakpoint: 782px (tablet/desktop)
   - Behaviour matches native WordPress blocks
*/

/* ==========================================================================
   POST TEMPLATE, GALLERY, GROUP - RESPONSIVE COLUMNS
   ========================================================================== */

/* Mobile/tablet fallback widths when responsive slides are not active */
.wp-block-post-template.is-layout-grid.qe:not(.qe-min-width):not([data-qe-has-responsive-slides="true"]) .wp-block-post,
.wp-block-group.is-layout-grid.qe:not(.qe-min-width):not([data-qe-has-responsive-slides="true"])>* {
	width: 100% !important;
	min-width: 100% !important;
}

/* Mobile (default) - 2 columns for Gallery */
.wp-block-gallery.qe:not([data-qe-has-responsive-slides="true"]) .wp-block-image {
	width: calc(50% - var(--wp--style--block-gap, 1rem) / 2) !important;
	min-width: calc(50% - var(--wp--style--block-gap, 1rem) / 2) !important;
}

/* From 600px onwards - behaviour determined by column count */
/* Generic rule for all block types with column classes */
@media (min-width: 600px) {

	/* Post Template columns */
	.wp-block-post-template.is-layout-grid.qe.qe-cols-2:not([data-qe-has-responsive-slides="true"]) .wp-block-post {
		--carousel-grid-item-width: calc(50% - var(--wp--style--block-gap, 1.25em) / 2);
	}

	.wp-block-post-template.is-layout-grid.qe.qe-cols-3:not([data-qe-has-responsive-slides="true"]) .wp-block-post {
		--carousel-grid-item-width: calc(33.33333% - var(--wp--style--block-gap, 1.25em) * 2 / 3);
	}

	.wp-block-post-template.is-layout-grid.qe.qe-cols-4:not([data-qe-has-responsive-slides="true"]) .wp-block-post {
		--carousel-grid-item-width: calc(25% - var(--wp--style--block-gap, 1.25em) * 3 / 4);
	}

	.wp-block-post-template.is-layout-grid.qe.qe-cols-5:not([data-qe-has-responsive-slides="true"]) .wp-block-post {
		--carousel-grid-item-width: calc(20% - var(--wp--style--block-gap, 1.25em) * 4 / 5);
	}

	.wp-block-post-template.is-layout-grid.qe.qe-cols-6:not([data-qe-has-responsive-slides="true"]) .wp-block-post {
		--carousel-grid-item-width: calc(16.66667% - var(--wp--style--block-gap, 1.25em) * 5 / 6);
	}

	.wp-block-post-template.is-layout-grid.qe.qe-cols-7:not([data-qe-has-responsive-slides="true"]) .wp-block-post {
		--carousel-grid-item-width: calc(14.285% - var(--wp--style--block-gap, 1.25em) * 6 / 7);
	}

	.wp-block-post-template.is-layout-grid.qe.qe-cols-8:not([data-qe-has-responsive-slides="true"]) .wp-block-post {
		--carousel-grid-item-width: calc(12.5% - var(--wp--style--block-gap, 1.25em) * 7 / 8);
	}

	.wp-block-post-template.is-layout-grid.qe.qe-cols-9:not([data-qe-has-responsive-slides="true"]) .wp-block-post {
		--carousel-grid-item-width: calc(11.111% - var(--wp--style--block-gap, 1.25em) * 8 / 9);
	}

	.wp-block-post-template.is-layout-grid.qe.qe-cols-10:not([data-qe-has-responsive-slides="true"]) .wp-block-post {
		--carousel-grid-item-width: calc(10% - var(--wp--style--block-gap, 1.25em) * 9 / 10);
	}

	.wp-block-post-template.is-layout-grid.qe.qe-cols-11:not([data-qe-has-responsive-slides="true"]) .wp-block-post {
		--carousel-grid-item-width: calc(9.090% - var(--wp--style--block-gap, 1.25em) * 10 / 11);
	}

	.wp-block-post-template.is-layout-grid.qe.qe-cols-12:not([data-qe-has-responsive-slides="true"]) .wp-block-post {
		--carousel-grid-item-width: calc(8.333% - var(--wp--style--block-gap, 1.25em) * 11 / 12);
	}

	.wp-block-post-template.is-layout-grid.qe.qe-cols-13:not([data-qe-has-responsive-slides="true"]) .wp-block-post {
		--carousel-grid-item-width: calc(7.692% - var(--wp--style--block-gap, 1.25em) * 12 / 13);
	}

	.wp-block-post-template.is-layout-grid.qe.qe-cols-14:not([data-qe-has-responsive-slides="true"]) .wp-block-post {
		--carousel-grid-item-width: calc(7.142% - var(--wp--style--block-gap, 1.25em) * 13 / 14);
	}

	.wp-block-post-template.is-layout-grid.qe.qe-cols-15:not([data-qe-has-responsive-slides="true"]) .wp-block-post {
		--carousel-grid-item-width: calc(6.666% - var(--wp--style--block-gap, 1.25em) * 14 / 15);
	}

	.wp-block-post-template.is-layout-grid.qe.qe-cols-16:not([data-qe-has-responsive-slides="true"]) .wp-block-post {
		--carousel-grid-item-width: calc(6.25% - var(--wp--style--block-gap, 1.25em) * 15 / 16);
	}

	/* Apply width and min-width using the variable */
	.wp-block-post-template.is-layout-grid.qe:not([data-qe-has-responsive-slides="true"])[class*="qe-cols-"] .wp-block-post {
		width: var(--carousel-grid-item-width) !important;
		min-width: var(--carousel-grid-item-width) !important;
	}

	/* Gallery columns */
	.wp-block-gallery.qe.qe-cols-1:not([data-qe-has-responsive-slides="true"]) .wp-block-image {
		--carousel-grid-item-width: 100%;
	}

	.wp-block-gallery.qe.qe-cols-2:not([data-qe-has-responsive-slides="true"]) .wp-block-image {
		--carousel-grid-item-width: calc(50% - var(--wp--style--block-gap, 1rem) / 2);
	}

	.wp-block-gallery.qe.qe-cols-3:not([data-qe-has-responsive-slides="true"]) .wp-block-image {
		--carousel-grid-item-width: calc(33.33333% - var(--wp--style--block-gap, 1rem) * 2 / 3);
	}

	.wp-block-gallery.qe.qe-cols-4:not([data-qe-has-responsive-slides="true"]) .wp-block-image {
		--carousel-grid-item-width: calc(25% - var(--wp--style--block-gap, 1rem) * 3 / 4);
	}

	.wp-block-gallery.qe.qe-cols-5:not([data-qe-has-responsive-slides="true"]) .wp-block-image {
		--carousel-grid-item-width: calc(20% - var(--wp--style--block-gap, 1rem) * 4 / 5);
	}

	.wp-block-gallery.qe.qe-cols-6:not([data-qe-has-responsive-slides="true"]) .wp-block-image {
		--carousel-grid-item-width: calc(16.66667% - var(--wp--style--block-gap, 1rem) * 5 / 6);
	}

	.wp-block-gallery.qe.qe-cols-7:not([data-qe-has-responsive-slides="true"]) .wp-block-image {
		--carousel-grid-item-width: calc(14.285% - var(--wp--style--block-gap, 1rem) * 6 / 7);
	}

	.wp-block-gallery.qe.qe-cols-8:not([data-qe-has-responsive-slides="true"]) .wp-block-image {
		--carousel-grid-item-width: calc(12.5% - var(--wp--style--block-gap, 1rem) * 7 / 8);
	}

	.wp-block-gallery.qe:not([data-qe-has-responsive-slides="true"])[class*="qe-cols-"] .wp-block-image {
		width: var(--carousel-grid-item-width) !important;
		min-width: var(--carousel-grid-item-width) !important;
	}

	/* Group columns */
	.wp-block-group.is-layout-grid.qe.qe-cols-2:not([data-qe-has-responsive-slides="true"])>* {
		--carousel-grid-item-width: calc(50% - var(--wp--style--block-gap, 1rem) / 2);
	}

	.wp-block-group.is-layout-grid.qe.qe-cols-3:not([data-qe-has-responsive-slides="true"])>* {
		--carousel-grid-item-width: calc(33.33333% - var(--wp--style--block-gap, 1rem) * 2 / 3);
	}

	.wp-block-group.is-layout-grid.qe.qe-cols-4:not([data-qe-has-responsive-slides="true"])>* {
		--carousel-grid-item-width: calc(25% - var(--wp--style--block-gap, 1rem) * 3 / 4);
	}

	.wp-block-group.is-layout-grid.qe.qe-cols-5:not([data-qe-has-responsive-slides="true"])>* {
		--carousel-grid-item-width: calc(20% - var(--wp--style--block-gap, 1rem) * 4 / 5);
	}

	.wp-block-group.is-layout-grid.qe.qe-cols-6:not([data-qe-has-responsive-slides="true"])>* {
		--carousel-grid-item-width: calc(16.66667% - var(--wp--style--block-gap, 1rem) * 5 / 6);
	}

	.wp-block-group.is-layout-grid.qe.qe-cols-7:not([data-qe-has-responsive-slides="true"])>* {
		--carousel-grid-item-width: calc(14.285% - var(--wp--style--block-gap, 1rem) * 6 / 7);
	}

	.wp-block-group.is-layout-grid.qe.qe-cols-8:not([data-qe-has-responsive-slides="true"])>* {
		--carousel-grid-item-width: calc(12.5% - var(--wp--style--block-gap, 1rem) * 7 / 8);
	}

	.wp-block-group.is-layout-grid.qe.qe-cols-9:not([data-qe-has-responsive-slides="true"])>* {
		--carousel-grid-item-width: calc(11.111% - var(--wp--style--block-gap, 1rem) * 8 / 9);
	}

	.wp-block-group.is-layout-grid.qe.qe-cols-10:not([data-qe-has-responsive-slides="true"])>* {
		--carousel-grid-item-width: calc(10% - var(--wp--style--block-gap, 1rem) * 9 / 10);
	}

	.wp-block-group.is-layout-grid.qe.qe-cols-11:not([data-qe-has-responsive-slides="true"])>* {
		--carousel-grid-item-width: calc(9.090% - var(--wp--style--block-gap, 1rem) * 10 / 11);
	}

	.wp-block-group.is-layout-grid.qe.qe-cols-12:not([data-qe-has-responsive-slides="true"])>* {
		--carousel-grid-item-width: calc(8.333% - var(--wp--style--block-gap, 1rem) * 11 / 12);
	}

	.wp-block-group.is-layout-grid.qe.qe-cols-13:not([data-qe-has-responsive-slides="true"])>* {
		--carousel-grid-item-width: calc(7.692% - var(--wp--style--block-gap, 1rem) * 12 / 13);
	}

	.wp-block-group.is-layout-grid.qe.qe-cols-14:not([data-qe-has-responsive-slides="true"])>* {
		--carousel-grid-item-width: calc(7.142% - var(--wp--style--block-gap, 1rem) * 13 / 14);
	}

	.wp-block-group.is-layout-grid.qe.qe-cols-15:not([data-qe-has-responsive-slides="true"])>* {
		--carousel-grid-item-width: calc(6.666% - var(--wp--style--block-gap, 1rem) * 14 / 15);
	}

	.wp-block-group.is-layout-grid.qe.qe-cols-16:not([data-qe-has-responsive-slides="true"])>* {
		--carousel-grid-item-width: calc(6.25% - var(--wp--style--block-gap, 1rem) * 15 / 16);
	}

	.wp-block-group.is-layout-grid.qe:not([data-qe-has-responsive-slides="true"])[class*="qe-cols-"]>* {
		width: var(--carousel-grid-item-width) !important;
		min-width: var(--carousel-grid-item-width) !important;
	}
}

/* Tablet behavior: force 2 columns for Post Template and Group (3+ columns) */
@media (min-width: 600px) and (max-width: 1200px) {

	.wp-block-post-template.is-layout-grid.qe.qe-cols-3:not([data-qe-has-responsive-slides="true"]) .wp-block-post,
	.wp-block-post-template.is-layout-grid.qe.qe-cols-4:not([data-qe-has-responsive-slides="true"]) .wp-block-post,
	.wp-block-post-template.is-layout-grid.qe.qe-cols-5:not([data-qe-has-responsive-slides="true"]) .wp-block-post,
	.wp-block-post-template.is-layout-grid.qe.qe-cols-6:not([data-qe-has-responsive-slides="true"]) .wp-block-post,
	.wp-block-post-template.is-layout-grid.qe.qe-cols-7:not([data-qe-has-responsive-slides="true"]) .wp-block-post,
	.wp-block-post-template.is-layout-grid.qe.qe-cols-8:not([data-qe-has-responsive-slides="true"]) .wp-block-post,
	.wp-block-post-template.is-layout-grid.qe.qe-cols-9:not([data-qe-has-responsive-slides="true"]) .wp-block-post,
	.wp-block-post-template.is-layout-grid.qe.qe-cols-10:not([data-qe-has-responsive-slides="true"]) .wp-block-post,
	.wp-block-post-template.is-layout-grid.qe.qe-cols-11:not([data-qe-has-responsive-slides="true"]) .wp-block-post,
	.wp-block-post-template.is-layout-grid.qe.qe-cols-12:not([data-qe-has-responsive-slides="true"]) .wp-block-post,
	.wp-block-post-template.is-layout-grid.qe.qe-cols-13:not([data-qe-has-responsive-slides="true"]) .wp-block-post,
	.wp-block-post-template.is-layout-grid.qe.qe-cols-14:not([data-qe-has-responsive-slides="true"]) .wp-block-post,
	.wp-block-post-template.is-layout-grid.qe.qe-cols-15:not([data-qe-has-responsive-slides="true"]) .wp-block-post,
	.wp-block-post-template.is-layout-grid.qe.qe-cols-16:not([data-qe-has-responsive-slides="true"]) .wp-block-post {
		width: calc(50% - var(--wp--style--block-gap, 1.25em) / 2) !important;
		min-width: calc(50% - var(--wp--style--block-gap, 1.25em) / 2) !important;
	}

	.wp-block-group.is-layout-grid.qe.qe-cols-3:not([data-qe-has-responsive-slides="true"])>*,
	.wp-block-group.is-layout-grid.qe.qe-cols-4:not([data-qe-has-responsive-slides="true"])>*,
	.wp-block-group.is-layout-grid.qe.qe-cols-5:not([data-qe-has-responsive-slides="true"])>*,
	.wp-block-group.is-layout-grid.qe.qe-cols-6:not([data-qe-has-responsive-slides="true"])>*,
	.wp-block-group.is-layout-grid.qe.qe-cols-7:not([data-qe-has-responsive-slides="true"])>*,
	.wp-block-group.is-layout-grid.qe.qe-cols-8:not([data-qe-has-responsive-slides="true"])>*,
	.wp-block-group.is-layout-grid.qe.qe-cols-9:not([data-qe-has-responsive-slides="true"])>*,
	.wp-block-group.is-layout-grid.qe.qe-cols-10:not([data-qe-has-responsive-slides="true"])>*,
	.wp-block-group.is-layout-grid.qe.qe-cols-11:not([data-qe-has-responsive-slides="true"])>*,
	.wp-block-group.is-layout-grid.qe.qe-cols-12:not([data-qe-has-responsive-slides="true"])>*,
	.wp-block-group.is-layout-grid.qe.qe-cols-13:not([data-qe-has-responsive-slides="true"])>*,
	.wp-block-group.is-layout-grid.qe.qe-cols-14:not([data-qe-has-responsive-slides="true"])>*,
	.wp-block-group.is-layout-grid.qe.qe-cols-15:not([data-qe-has-responsive-slides="true"])>*,
	.wp-block-group.is-layout-grid.qe.qe-cols-16:not([data-qe-has-responsive-slides="true"])>* {
		width: calc(50% - var(--wp--style--block-gap, 1rem) / 2) !important;
		min-width: calc(50% - var(--wp--style--block-gap, 1rem) / 2) !important;
	}
}

/* ==========================================================================
   RESPONSIVE SLIDES PER VIEW
   ========================================================================== */

.qe[data-qe-has-responsive-slides="true"],
.block-editor-block-list__layout .qe[data-qe-has-responsive-slides="true"],
.editor-styles-wrapper .qe[data-qe-has-responsive-slides="true"] {
	--qe-slides-current: var(--qe-slides-mobile, var(--qe-slides-tablet, var(--qe-slides-desktop, 1)));
	--qe-responsive-grid-item-width: calc((100% - (var(--wp--style--block-gap, 1rem) * (var(--qe-slides-current) - 1))) / var(--qe-slides-current));
}

@media (min-width: 600px) and (max-width: 920px) {
	.qe[data-qe-has-responsive-slides="true"],
	.block-editor-block-list__layout .qe[data-qe-has-responsive-slides="true"],
	.editor-styles-wrapper .qe[data-qe-has-responsive-slides="true"] {
		--qe-slides-current: var(--qe-slides-tablet, var(--qe-slides-desktop, var(--qe-slides-mobile, 1)));
	}
}

@media (min-width: 921px) {
	.qe[data-qe-has-responsive-slides="true"],
	.block-editor-block-list__layout .qe[data-qe-has-responsive-slides="true"],
	.editor-styles-wrapper .qe[data-qe-has-responsive-slides="true"] {
		--qe-slides-current: var(--qe-slides-desktop, var(--qe-slides-tablet, var(--qe-slides-mobile, 1)));
	}
}

.is-layout-grid.qe[data-qe-has-responsive-slides="true"] > *,
.block-editor-block-list__layout .is-layout-grid.qe[data-qe-has-responsive-slides="true"] > *,
.editor-styles-wrapper .is-layout-grid.qe[data-qe-has-responsive-slides="true"] > *,
.wp-block-group.is-layout-grid.qe[data-qe-has-responsive-slides="true"] > *,
.block-editor-block-list__layout .wp-block-group.is-layout-grid.qe[data-qe-has-responsive-slides="true"] > *,
.editor-styles-wrapper .wp-block-group.is-layout-grid.qe[data-qe-has-responsive-slides="true"] > *,
.wp-block-post-template.is-layout-grid.qe[data-qe-has-responsive-slides="true"] .wp-block-post,
.block-editor-block-list__layout .wp-block-post-template.is-layout-grid.qe[data-qe-has-responsive-slides="true"] .wp-block-post,
.editor-styles-wrapper .wp-block-post-template.is-layout-grid.qe[data-qe-has-responsive-slides="true"] .wp-block-post,
.wp-block-gallery.qe[data-qe-has-responsive-slides="true"] > .wp-block-image,
.block-editor-block-list__layout .wp-block-gallery.qe[data-qe-has-responsive-slides="true"] > .wp-block-image,
.editor-styles-wrapper .wp-block-gallery.qe[data-qe-has-responsive-slides="true"] > .wp-block-image,
.wp-block-gallery.qe[data-qe-has-responsive-slides="true"][class*="qe-cols-"] > .wp-block-image,
.block-editor-block-list__layout .wp-block-gallery.qe[data-qe-has-responsive-slides="true"][class*="qe-cols-"] > .wp-block-image,
.editor-styles-wrapper .wp-block-gallery.qe[data-qe-has-responsive-slides="true"][class*="qe-cols-"] > .wp-block-image {
	--carousel-grid-item-width: var(--qe-responsive-grid-item-width);
	width: var(--carousel-grid-item-width) !important;
	min-width: var(--carousel-grid-item-width) !important;
	max-width: 100%;
}

/* ==========================================================================
   OPTIMISATIONS RESPONSIVE
   ========================================================================== */

@media (max-width: 920px) {
	:root {
		--carousel-button-size: 2.75rem;
		--carousel-button-offset: 0.5rem;
		--carousel-marker-size: 0.75rem;
	}
}

@media (max-width: 600px) {
	:root {
		--carousel-button-size: 2.5rem;
		--carousel-button-offset: 0.5rem;
		--carousel-marker-size: 0.75rem;
		--carousel-marker-gap: 0.75rem;
	}

	.qe.qe-min-width>*,
	.block-editor-block-list__layout .qe.qe-min-width>*,
	.editor-styles-wrapper .qe.qe-min-width>*,
	.wp-block-post-template.qe.qe-min-width .wp-block-post,
	.block-editor-block-list__layout .wp-block-post-template.qe.qe-min-width .wp-block-post,
	.editor-styles-wrapper .wp-block-post-template.qe.qe-min-width .wp-block-post,
	.wp-block-group.qe.qe-min-width>*,
	.block-editor-block-list__layout .wp-block-group.qe.qe-min-width>*,
	.editor-styles-wrapper .wp-block-group.qe.qe-min-width>*,
	.wp-block-gallery.qe.qe-min-width>.wp-block-image,
	.block-editor-block-list__layout .wp-block-gallery.qe.qe-min-width>.wp-block-image,
	.editor-styles-wrapper .wp-block-gallery.qe.qe-min-width>.wp-block-image {
		/* width: 100% !important; */
		/* min-width: 100% !important; */
		/* max-width: 100% !important; */
	}
}

@media (max-width: 480px) {
	:root {
		--carousel-button-size: 2rem;
		--carousel-button-offset: 0.25rem;
		--carousel-marker-size: 0.75rem;
		--carousel-marker-gap: 0.75rem;
		--carousel-marker-bottom-offset: -1.5rem;
	}

}

@media (max-width: 375px) {
	:root {
		--carousel-button-size: 1.75rem;
		--carousel-marker-size: 0.75rem;
	}
}

/* ==========================================================================
   GUTENBERG EDITOR STYLES
   ========================================================================== */

.cfg-qe-toggle-control {
	margin-bottom: 1rem;
}

.cfg-qe-toggle-control .components-base-control__label {
	font-weight: 600;
	color: #1e1e1e;
}

.cfg-qe-toggle-control .components-base-control__help {
	font-size: 12px;
	color: #757575;
	margin-top: 4px;
}

.cfg-qe-toggle-control .components-toggle-control__label[for*="carousel"] {
	color: #007cba;
	font-weight: 600;
}

.cfg-qe-panel .components-panel__body-title {
	font-weight: 600;
}

.cfg-qe-panel-first {
	order: -1000 !important;
}

.block-editor-block-inspector .cfg-qe-panel-first {
	order: -1000 !important;
	margin-bottom: 16px;
}

.block-editor-block-list__layout .qe>*:not(:first-child),
.editor-styles-wrapper .qe>*:not(:first-child) {
	pointer-events: none;
}

/* ==========================================================================
   PERFORMANCE ET OPTIMISATIONS
   ========================================================================== */

.qe,
.block-editor-block-list__layout .qe,
.editor-styles-wrapper .qe {
	will-change: scroll-position;
	contain: layout style;
}

.qe>*,
.block-editor-block-list__layout .qe>*,
.editor-styles-wrapper .qe>* {
	will-change: transform;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.qe,
	.block-editor-block-list__layout .qe,
	.editor-styles-wrapper .qe {
		scroll-behavior: auto;
	}

	.qe-nav-btn {
		transition: none;
	}

	.qe-marker {
		transition: none;
	}
}

@media (prefers-contrast: high) {

	.qe-nav-btn {
		border-width: 3px;
	}

	.qe-marker {
		border: 2px solid currentColor;
	}
}