/**
 * Kadence Advanced Query Loop → Splide carousel.
 *
 * Every rule is gated behind [data-kc-init] (set by the JS only when Splide
 * mounts). Before that, Kadence's native responsive grid is left untouched, so
 * layout is correct on first paint and degrades gracefully if Splide is absent.
 *
 * Base Splide visuals come from the self-hosted inc/css/splide.min.css.
 */

/* Flatten Kadence's grid/masonry into Splide's single-row flex track. */
.wp-block-kadence-query.is-carousel[data-kc-init] {
	position: relative;
}

.wp-block-kadence-query.is-carousel[data-kc-init] .kb-query-grid-wrap {
	display: flex !important;
	grid-template-columns: none !important;
	columns: auto !important;
	width: auto !important;
	/* Kill Kadence's own grid gap — Splide manages spacing via the `gap`
	   option (slide margins). Leaving Kadence's column-gap on top pushes the
	   slides ~1 gap past the track, clipping the last/next cards. */
	gap: 0 !important;
	column-gap: 0 !important;
	row-gap: 0 !important;
}

/* Track clips horizontally for the carousel; vertical padding keeps the card
   drop-shadows from being cut off (the "cutoff" you saw). */
.wp-block-kadence-query.is-carousel[data-kc-init] .splide__track {
	overflow: hidden;
	padding-top: 10px;
	padding-bottom: 16px;
}

/* Equal-height cards: stretch each slide and its inner query item to fill. */
.wp-block-kadence-query.is-carousel[data-kc-init] .splide__slide {
	height: auto;
	display: flex;
}

.wp-block-kadence-query.is-carousel[data-kc-init] .splide__slide.kb-query-item,
.wp-block-kadence-query.is-carousel[data-kc-init] .splide__slide > .kb-query-item {
	width: 100%;
	height: 100%;
	flex-direction: column;
}

/* ---------------------------------------------------------------------------
 * Hide navigation when there is nothing to scroll.
 * `kc-nav` is set by the JS (slide count > perPage at the current breakpoint).
 * We use our own class instead of Splide's `.is-overflow`, which false-positives
 * by a subpixel when slides use %-based widths + gap (it would show arrows even
 * when all posts fit). So this reliably covers "fewer posts than columns".
 * ------------------------------------------------------------------------- */
.wp-block-kadence-query.is-carousel[data-kc-init]:not(.kc-nav) .splide__arrows,
.wp-block-kadence-query.is-carousel[data-kc-init]:not(.kc-nav) .splide__pagination {
	display: none !important;
}

/* Arrow gutter only when nav is shown, else cards use the full width. */
.wp-block-kadence-query.is-carousel[data-kc-init]:not(.kc-nav) {
	padding-left: 0;
	padding-right: 0;
}

/* ---------------------------------------------------------------------------
 * Arrows — DESKTOP/TABLET: outside the track, on-brand circles.
 * ------------------------------------------------------------------------- */
.wp-block-kadence-query.is-carousel[data-kc-init].kc-nav {
	padding-left: 3.25rem;
	padding-right: 3.25rem;
}

.wp-block-kadence-query.is-carousel[data-kc-init] .splide__arrow {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	opacity: 1;
	background: var( --global-palette1, #1f6feb );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.18 );
	transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.wp-block-kadence-query.is-carousel[data-kc-init] .splide__arrow svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: #fff;
}

.wp-block-kadence-query.is-carousel[data-kc-init] .splide__arrow:hover:not(:disabled) {
	background: var( --global-palette2, #163d8a );
	transform: translateY( -50% ) scale( 1.06 );
}

.wp-block-kadence-query.is-carousel[data-kc-init] .splide__arrow:focus-visible {
	outline: 3px solid var( --global-palette2, #163d8a );
	outline-offset: 2px;
}

.wp-block-kadence-query.is-carousel[data-kc-init] .splide__arrow:disabled {
	opacity: 0.35;
}

.wp-block-kadence-query.is-carousel[data-kc-init] .splide__arrow--prev {
	left: 0;
}

.wp-block-kadence-query.is-carousel[data-kc-init] .splide__arrow--next {
	right: 0;
}

/* ---------------------------------------------------------------------------
 * Arrows — MOBILE: inside the carousel, overlaid on the card image.
 * ------------------------------------------------------------------------- */
@media ( max-width: 600px ) {
	.wp-block-kadence-query.is-carousel[data-kc-init].kc-nav {
		padding-left: 0;
		padding-right: 0;
	}

	.wp-block-kadence-query.is-carousel[data-kc-init] .splide__arrow {
		z-index: 10; /* above the card image */
		top: unset;
		bottom: -3rem;/* sit over the image, not the text below it */
		width: 2.25rem;
		height: 2.25rem;
		backdrop-filter: blur( 2px );
		box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.35 );
	}

	.wp-block-kadence-query.is-carousel[data-kc-init] .splide__arrow svg {
		fill: #fff;
	}

	.wp-block-kadence-query.is-carousel[data-kc-init] .splide__arrow--prev {
		left: 35%;
	}

	.wp-block-kadence-query.is-carousel[data-kc-init] .splide__arrow--next {
		right: 35%;
	}
}