/* ── Query Loop Swiper carousel — query-specific shims ──────────────────────
 *
 * FRONTEND: PHP (render_block filter) transforms ul.wp-block-post-template into
 * div.swiper-wrapper > div.swiper-slide > li.wp-block-post before the page is served.
 * Swiper sees the correct DOM structure automatically — no JS shim needed.
 *
 * EDITOR: The HOC wraps BlockEdit in div.le-query-swiper-wrapper.le-swiper.swiper and
 * initialises Swiper with wrapperClass='wp-block-post-template'/slideClass='wp-block-post'
 * so Swiper treats the native ul/li as slides. The editor-only !important rules at the
 * bottom of this file enforce the flex layout and slide sizing via CSS custom properties
 * (--le-swiper-preview-slides, --le-swiper-preview-gap) set by the editor JS.
 *
 * Rules targeting .wp-block-post-template only match in the editor; that element
 * is replaced on the frontend by the PHP transformation described above.
 *
 * Generic rules (nav arrow colour, pagination tokens, 3D-effect overflow,
 * pagination padding) live in /extensions/_swiper-shared/style.css and are
 * scoped to .le-swiper so they apply to this consumer too.
 */

/* Editor: enforce the flex layout Swiper needs on the native ul wrapper.
 * Only matches in the editor — frontend has div.swiper-wrapper instead. */
.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 <li class="wp-block-post"> behave as a Swiper slide.
 * Swiper sets width via inline style; !important on 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;
}

/* Frontend: li.wp-block-post rendered inside a div.swiper-slide after PHP restructuring.
 * box-sizing:border-box is REQUIRED, not cosmetic: the render_block filter transfers the
 * post-template's frame styles (padding/border) onto this .swiper-slide, and Swiper sets the
 * slide width inline. Without border-box the padding/border add OUTSIDE that width, so each
 * slide renders wider than container/slidesPerView and the track overflows — at slidesPerView:3
 * the outer slides bleed past the edges. The editor masks this (it sizes slides via a forced
 * flex-basis), so the bug is front-end-only. 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 ─────────────────────────────────────────────────
 * The HOC wraps BlockEdit in a div.le-query-swiper-wrapper inside the editor
 * canvas. These rules keep the editor container sized correctly.
 */
.block-editor-block-list__layout .le-query-swiper-wrapper {
	display: block;
	/* Auto width (not 100%) so the carousel behaves like core/query: a horizontal or linked
	   margin insets it instead of overflowing, and centering is preserved. */
	width: auto;
	overflow: hidden;
	box-sizing: border-box;
}

/* Editor — override gap on the UL with the CSS custom property set by JS on the
 * container div.  This beats any React reconciliation that does
 * element.style.gap = value (no !important), because a stylesheet !important
 * rule always wins over an inline style without !important. */
.block-editor-block-list__layout .le-query-swiper-wrapper .wp-block-post-template {
	gap: var( --le-swiper-preview-gap, 0px ) !important;
	/* Frame suppressions — all with !important so React re-renders cannot undo them. */
	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 CSS custom properties so React reconciliation cannot
 * overwrite the values (CSS !important beats inline style without !important). */
.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 — when the user has set Height (swiperHeight > 0), the wrapper gets a
 * data-le-swiper-has-height marker plus a --le-swiper-height variable from the
 * React render. Stretch slides to that exact pixel height so the block-editor
 * focus outline matches the visible swiper box instead of the slide's natural
 * content height. Using the pixel value (not 100%) avoids depending on the
 * .wp-block-post-template ul having an explicit 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 border/shadow/spacing on the outer query block wrapper.
 * Uses :has() so this only matches while our container div exists (Swiper active). */
.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 ────────────────────────────────────────────────
 * Swiper's bundle CSS targets .swiper-slide for effect-specific rules
 * (visibility, backface, transform-origin, etc.). In the editor, slideClass is
 * 'wp-block-post' so those bundle rules don't match. Mirror them here with
 * .wp-block-post as the slide selector — Swiper's state classes
 * (.swiper-slide-active/-prev/-next) are added to slides regardless of
 * slideClass, so they work as-is. The frontend already gets the bundle rules
 * for free via PHP wrapping each post in a div.swiper-slide.
 *
 * For single-slide effects (fade, cube, flip, cards, creative), the editor
 * preview is forced to slidesPerView:1 in editor.js so the existing
 * --le-swiper-preview-slides calc resolves slide width to 100%. Cube/flip/cards
 * also need height:100%, which requires the user to set Height in inspector
 * controls — same as the frontend.
 */

/* 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;
}