/**
 * Kadence Advanced Query Loop → CSS infinite-loop marquee.
 *
 * Handles ONLY .wp-block-kadence-query.is-carousel.infinite-loop blocks.
 * Uses the same @keyframes loopLeft marquee as eleva/style.css, adapted for
 * the Kadence Query Loop DOM (ul.kb-query-grid-wrap as the scrolling track).
 *
 * ⚠️  CONFLICT WITH PARENT THEME
 * The parent theme's style.css applies marquee behaviour to
 * ".infinite-loop .kt-inside-inner-col". Because the query block carries the
 * class "infinite-loop", every .kt-inside-inner-col inside every card (image
 * containers, column wrappers…) would get `animation: loopLeft` applied —
 * causing titles and images to animate INSIDE each slide.
 * Section 0 below cancels those rules BEFORE [data-kil-init] is set.
 */


/* =========================================================================
 * 0. CANCEL PARENT THEME CONFLICTS  (NO [data-kil-init] gate)
 *
 * These rules take effect immediately on page load, before JS runs, to
 * prevent the parent theme's .infinite-loop CSS from breaking card layout.
 * Higher specificity (3 classes) beats the theme's 2-class rules.
 * ========================================================================= */

/* Cancel the parent theme's overflow:hidden + mask on .infinite-loop.
 * We add our own overflow to the wrapper and mask to the query-card div. */
.wp-block-kadence-query.is-carousel.infinite-loop {
	overflow: visible !important;
	mask-image: none !important;
	-webkit-mask-image: none !important;
}

/* Cancel .infinite-loop .kt-inside-inner-col — the rule that animates every
 * inner column div as a marquee track. Kadence cards contain many
 * .kt-inside-inner-col elements (image containers, text areas, etc.) and
 * every one of them would spin off as a separate loopLeft marquee without
 * this cancel rule. */
.wp-block-kadence-query.is-carousel.infinite-loop .kt-inside-inner-col {
	animation: none !important;
	width: auto !important;
	box-sizing: border-box !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
	will-change: auto !important;
	backface-visibility: visible !important;
}

/* Cancel .infinite-loop .kt-inside-inner-col > * — the rule that stamps
 * flex:0 0 auto on every direct child of a column inner div (including
 * figure elements containing the card images). */
.wp-block-kadence-query.is-carousel.infinite-loop .kt-inside-inner-col > * {
	flex: unset;
}

/* Cancel hover-pause rule from the theme, which targets the same selector. */
.wp-block-kadence-query.is-carousel.infinite-loop:hover .kt-inside-inner-col {
	animation-play-state: running !important;
}


/* =========================================================================
 * 1. @keyframes loopLeft
 * Same as eleva/style.css; redefined here as a safety fallback.
 * ========================================================================= */

@keyframes loopLeft {
	100% { transform: translateX( -50% ); }
}


/* =========================================================================
 * Everything below is gated by [data-kil-init="marquee"].
 * Until JS sets this attribute, Kadence's native grid is untouched.
 * ========================================================================= */


/* =========================================================================
 * 2. WRAPPER — clipping container
 * overflow:hidden clips the scrolling track; arrows (position:absolute
 * children) stay within the box so they are not clipped.
 * mask-image is applied to .wp-block-kadence-query-card (Section 3) so the
 * arrows are NOT inside the masked element and remain fully opaque.
 * ========================================================================= */

.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] {
	position: relative; /* containing block for arrows + play/pause button */
	overflow: hidden;
}


/* =========================================================================
 * 3. QUERY-CARD — edge-fade mask
 * Sits between the wrapper and the scrolling track. Applying the mask here
 * (instead of on the wrapper) keeps the arrows — which live on the wrapper —
 * outside the masked stacking context, so they remain fully visible.
 * ========================================================================= */

.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .wp-block-kadence-query-card {
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 3.5rem,
		#000 calc( 100% - 3.5rem ),
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 3.5rem,
		#000 calc( 100% - 3.5rem ),
		transparent 100%
	);
}


/* =========================================================================
 * 4. TRACK — the scrolling flex row  (.kb-query-grid-wrap = the <ul>)
 * ========================================================================= */

.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kb-query-grid-wrap {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	grid-template-columns: none !important;
	columns: auto !important;
	width: max-content !important;
	box-sizing: content-box !important;
	gap: var( --kil-gap, 2rem ) !important;
	will-change: transform;
	backface-visibility: hidden;

	/* Animation — duration injected by JS as --kil-speed on the wrapper. */
	animation-name: loopLeft;
	animation-duration: var( --kil-speed, 30s );
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
}

/* Hover: pause the marquee (mirrors the parent theme's column marquee). */
.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"]:hover .kb-query-grid-wrap {
	animation-play-state: paused;
}

/* JS play/pause: .kil-is-paused class toggled on the wrapper. */
.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"].kil-is-paused .kb-query-grid-wrap {
	animation-play-state: paused !important;
}


/* =========================================================================
 * 5. CARDS — fixed width, no shrink
 * Width is measured from the rendered Kadence grid by JS and stored as
 * --kil-card-width on the wrapper element (CSS custom property inheritance).
 * ========================================================================= */

.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kb-query-item {
	flex: 0 0 auto !important;
	width: var( --kil-card-width, 300px ) !important;
	position: static !important;
	margin: 0 !important;
}


/* =========================================================================
 * 6. ARROWS
 * ========================================================================= */

.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 20; /* above mask layer */
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	background: rgba( 0, 0, 0, 0.48 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	box-shadow: 0 4px 20px rgba( 0, 0, 0, 0.28 );
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: #fff;
	transition: background 0.2s ease, transform 0.2s ease;
}

.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-arrow svg {
	width: 1rem;
	height: 1rem;
	display: block;
	flex-shrink: 0;
}

.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-arrow--prev { left: 1.25rem; }
.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-arrow--next { right: 1.25rem; }

.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-arrow:hover {
	background: rgba( 0, 0, 0, 0.72 );
	transform: translateY( -50% ) scale( 1.08 );
}

.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media ( max-width: 600px ) {
	.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-arrow { width: 2.25rem; height: 2.25rem; }
	.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-arrow svg { width: 0.85rem; height: 0.85rem; }
	.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-arrow--prev { left: 0.5rem; }
	.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-arrow--next { right: 0.5rem; }
}


/* =========================================================================
 * 6b. RATIO IMAGES
 *
 * Kadence uses a padding-bottom trick on .kb-is-ratio-image so the absolutely
 * positioned <img> fills the box. In the marquee flex track the containing
 * block never gets an explicit height, so the absolute img collapses to 0.
 * Switch to aspect-ratio + position:relative so images are always visible.
 * ========================================================================= */

.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kb-is-ratio-image img {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 2;
	display: block;
}


/* =========================================================================
 * 7. PLAY / PAUSE BUTTON
 * ========================================================================= */

.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-play-pause {
	position: absolute;
	bottom: -2rem;
	left: 50%;
	transform: translateX( -50% );
	z-index: 20;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.2 );
	background: rgba( 0, 0, 0, 0.5 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.25 );
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.2s ease, transform 0.15s ease;
	line-height: 1;
}

.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-play-pause:hover {
	background: rgba( 0, 0, 0, 0.75 );
	transform: scale( 1.1 );
}

.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-play-pause:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-play-pause svg {
	width: 0.7rem;
	height: 0.7rem;
	fill: #fff;
	display: block;
	flex-shrink: 0;
}

/* Playing state: show pause icon. */
.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-icon-pause { display: block; }
.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-icon-play  { display: none;  }

/* Paused state: show play icon. */
.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"].kil-is-paused .kil-icon-pause { display: none;  }
.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"].kil-is-paused .kil-icon-play  { display: block; }

.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-play-pause .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}


/* =========================================================================
 * 8. REDUCED MOTION
 * ========================================================================= */

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kb-query-grid-wrap {
		animation: none !important;
		transition: none !important;
	}
	.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-arrow:hover {
		transform: translateY( -50% );
	}
	.wp-block-kadence-query.is-carousel.infinite-loop[data-kil-init="marquee"] .kil-play-pause:hover {
		transform: none;
	}
}