/* ── Query Loop Swiper carousel — query-specific shims ──────────────────────
 *
 * FRONTEND: PHP transforms ul.wp-block-post-template into swiper-wrapper/slide DOM.
 * EDITOR: HOC inits Swiper with wrapperClass/slideClass on ul/li;
 * .wp-block-post-template rules below match the editor only.
 */

/* Editor: enforce the flex layout Swiper needs on the native ul (editor-only). */
.le-query-swiper-wrapper.swiper .wp-block-post-template {
	position: relative !important;
	width: 100% !important;
	z-index: 1;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	transition-property: transform;
	box-sizing: border-box !important;
	margin: 0;
	padding: 0 ;
	list-style: none !important;
	gap: 0 !important;
}

/* Make each .wp-block-post a Swiper slide; !important flex-shrink prevents WP flex collapse. */
.le-query-swiper-wrapper.swiper .wp-block-post {
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	position: relative;
	transition-property: transform;
	list-style: none;
	box-sizing: border-box;
	height: auto;
}

/* box-sizing:border-box REQUIRED: Swiper sets slide width inline + PHP adds padding/border;
 * without it slides overflow (front-end-only bug). Do not remove. */
.le-query-swiper-wrapper .swiper-slide {
	display: flex;
	flex-direction: column;
	height:auto;
	box-sizing: border-box;
}

.le-query-swiper-wrapper .swiper-slide > .wp-block-post {
	list-style: none;
	height: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/* Loop-mode duplicates Swiper appends to the wrapper */
.le-query-swiper-wrapper.swiper .swiper-slide-duplicate {
	flex-shrink: 0;
	list-style: none;
	box-sizing: border-box;
}

/* ── Editor-only adjustments ─────────────────────────────────────────────────
 * Keep the editor container sized correctly. Auto width (not 100%) so margins
 * inset/center like core/query instead of overflowing. */
.block-editor-block-list__layout .le-query-swiper-wrapper {
	display: block;
	width: auto;
	overflow: hidden;
	box-sizing: border-box;
}

/* Editor — gap via JS-set custom property; stylesheet !important beats React's inline gap. */
.block-editor-block-list__layout .le-query-swiper-wrapper .wp-block-post-template {
	gap: var( --le-swiper-preview-gap, 0px ) !important;
	background-color: transparent !important;
	background: none !important;
	color: inherit !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}

/* Editor — slide sizing via custom properties; !important beats React's inline styles. */
.block-editor-block-list__layout .le-query-swiper-wrapper .wp-block-post-template > .wp-block-post {
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	list-style: none !important;
	box-sizing: border-box !important;
	height: auto !important;
	flex-basis: calc( ( 100% - ( var( --le-swiper-preview-slides, 1 ) - 1 ) * var( --le-swiper-preview-gap, 0px ) ) / var( --le-swiper-preview-slides, 1 ) ) !important;
	max-width: calc( ( 100% - ( var( --le-swiper-preview-slides, 1 ) - 1 ) * var( --le-swiper-preview-gap, 0px ) ) / var( --le-swiper-preview-slides, 1 ) ) !important;
}

/* Editor — stretch slides to the swiperHeight pixel value so the focus outline matches
 * the box; pixel (not 100%) avoids depending on the ul's height. */
.block-editor-block-list__layout .le-query-swiper-wrapper[data-le-swiper-has-height] .wp-block-post-template > .wp-block-post {
	height: var( --le-swiper-height ) !important;
	overflow: hidden !important;
}


/* Editor — suppress margin/padding on the inner wp-block-query div. */
.block-editor-block-list__layout .le-query-swiper-wrapper .wp-block-query {
	margin: 0 !important;
	padding: 0 !important;
}

/* Editor — neutralize the outer query wrapper; :has() matches only while our container exists. */
.block-editor-block-list__layout .wp-block-query:has( > .le-query-swiper-wrapper ) {
	border: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ── Editor-only effect rules ────────────────────────────────────────────────
 * Editor slideClass is 'wp-block-post', so Swiper's bundle .swiper-slide effect rules
 * don't match — mirror them here. Single-slide effects force slidesPerView:1;
 * cube/flip/cards need Height set.
 */

/* Fade — slides remain in flex flow; Swiper handles stacking via transforms. */
.block-editor-block-list__layout .le-query-swiper-wrapper.swiper-fade .wp-block-post-template > .wp-block-post {
	pointer-events: none;
	transition-property: opacity;
}
.block-editor-block-list__layout .le-query-swiper-wrapper.swiper-fade .wp-block-post.swiper-slide-active {
	pointer-events: auto;
}

/* Cube — three visible faces (active, prev, next). Requires container height. */
.block-editor-block-list__layout .le-query-swiper-wrapper.swiper-cube .wp-block-post-template > .wp-block-post {
	pointer-events: none;
	backface-visibility: hidden;
	z-index: 1;
	visibility: hidden;
	transform-origin: 0 0;
	height: 100% !important;
}
.block-editor-block-list__layout .le-query-swiper-wrapper.swiper-cube .wp-block-post.swiper-slide-active,
.block-editor-block-list__layout .le-query-swiper-wrapper.swiper-cube .wp-block-post.swiper-slide-next,
.block-editor-block-list__layout .le-query-swiper-wrapper.swiper-cube .wp-block-post.swiper-slide-prev {
	pointer-events: auto;
	visibility: visible;
}

/* Flip — single slide flips in 3D. Slides keep their natural height. */
.block-editor-block-list__layout .le-query-swiper-wrapper.swiper-flip .wp-block-post-template > .wp-block-post {
	pointer-events: none;
	backface-visibility: hidden;
	z-index: 1;
}
.block-editor-block-list__layout .le-query-swiper-wrapper.swiper-flip .wp-block-post.swiper-slide-active {
	pointer-events: auto;
}

/* Cards — stacked card deck. Slides keep their natural height. */
.block-editor-block-list__layout .le-query-swiper-wrapper.swiper-cards .wp-block-post-template > .wp-block-post {
	transform-origin: center bottom;
	backface-visibility: hidden;
	overflow: hidden;
}

/* Creative — Swiper applies user-defined 3D transforms via JS. */
.block-editor-block-list__layout .le-query-swiper-wrapper.swiper-creative .wp-block-post-template > .wp-block-post {
	backface-visibility: hidden;
	overflow: hidden;
	transition-property: transform, opacity, height;
}