/* Cora Query Carousel — front-end layout, slide fix, and arrow positioning. */

/* --- Bug fix --------------------------------------------------------------
 * WP's block-gap adds `margin-block-start` to flow children; once the list is
 * a Swiper flex row that becomes a stray top margin on slides 2+ (misalignment).
 * Zero ONLY the vertical (block) margin — Swiper sets margin-right (inline) for
 * spaceBetween, so a blanket `margin:0` would kill the gaps AND make the next
 * slide peek. */
.cora-query-carousel .swiper-slide {
	margin-block: 0 !important;
}
.cora-query-carousel .swiper-slide > :last-child {
	margin-bottom: 0;
}

/* The wrapper is the positioning context for the arrows. */
.cora-query-carousel {
	position: relative;
}

/* Clip overflow ourselves (synchronously). cora-swiper's overflow:hidden ships
 * in an async-loaded CSS chunk, so without this the next slide can peek past the
 * set slidesPerView until that chunk loads. */
.cora-query-carousel .swiper {
	overflow: hidden;
}

/* --- Pagination: flows BELOW the slides with a controllable gap ----------- */
.cora-query-carousel > .swiper-pagination {
	position: static;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	width: auto;
	margin: var( --cora-pagination-gap, 16px ) 0 0;
}

/* --- Arrow buttons: base look (they live OUTSIDE .swiper) -----------------
 * All visual properties come from CSS variables set sitewide in
 * Settings → Cora Carousel (with fallbacks here). */
.cora-query-carousel > .swiper-button-prev,
.cora-query-carousel > .swiper-button-next {
	position: absolute;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --cora-arrow-size, 40px );
	height: var( --cora-arrow-size, 40px );
	margin: 0;
	padding: 0;
	border: var( --cora-arrow-border-width, 1px ) solid var( --cora-arrow-border, #1e1e1e );
	border-radius: var( --cora-arrow-radius, 50% );
	background: var( --cora-arrow-bg, #fff );
	cursor: pointer;
	/* clear Swiper's default centering so our layout rules win cleanly */
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
}
/* The icon is an SVG mask, tinted by --cora-arrow-icon. Default art points
 * right; the prev arrow is flipped. */
.cora-query-carousel > .swiper-button-prev::after,
.cora-query-carousel > .swiper-button-next::after {
	content: "";
	display: block;
	width: 45%;
	height: 45%;
	background-color: var( --cora-arrow-icon, #1e1e1e );
	-webkit-mask: var( --cora-arrow-icon-img ) center / contain no-repeat;
	mask: var( --cora-arrow-icon-img ) center / contain no-repeat;
}
.cora-query-carousel > .swiper-button-disabled { opacity: 0.35; cursor: default; }

/* cora-swiper rotates the whole BUTTON (prev 90deg / next -90deg) for its own
 * icon scheme. Neutralize that on our buttons (high specificity — two root
 * classes — to beat its `.wp-block-vital-swiper .swiper-button-*` rule); we
 * orient via the ::after icon instead. */
.wp-block-vital-swiper.cora-query-carousel > .swiper-button-prev,
.wp-block-vital-swiper.cora-query-carousel > .swiper-button-next {
	transform: none;
}
/* Icon art points right: next stays as-is, prev flips to point left. */
.cora-query-carousel > .swiper-button-next::after { transform: rotate( 0deg ); }
.cora-query-carousel > .swiper-button-prev::after { transform: rotate( 180deg ); }

/* --- WINGS: arrows split into the side gutters, outside the slides -------- */
.cora-query-carousel.cora-arrows-wings {
	padding-left: 56px;
	padding-right: 56px;
}
.cora-arrows-wings > .swiper-button-prev { left: 0; }
.cora-arrows-wings > .swiper-button-next { right: 0; }

.cora-arrows-wings.cora-arrows-wing-top > .swiper-button-prev,
.cora-arrows-wings.cora-arrows-wing-top > .swiper-button-next { top: 0; }
.cora-arrows-wings.cora-arrows-wing-center > .swiper-button-prev,
.cora-arrows-wings.cora-arrows-wing-center > .swiper-button-next { top: 50%; transform: translateY( -50% ); }
.cora-arrows-wings.cora-arrows-wing-bottom > .swiper-button-prev,
.cora-arrows-wings.cora-arrows-wing-bottom > .swiper-button-next { bottom: 0; }

/* --- BOOKENDS: arrow pair stacked together at a corner, outside slides ---- */
.cora-arrows-bookend.cora-arrows-bookend-top-left,
.cora-arrows-bookend.cora-arrows-bookend-top-right { padding-top: 56px; }
.cora-arrows-bookend.cora-arrows-bookend-bottom-left,
.cora-arrows-bookend.cora-arrows-bookend-bottom-right { padding-bottom: 56px; }

/* vertical edge of the pair */
.cora-arrows-bookend-top-left > .swiper-button-prev,
.cora-arrows-bookend-top-left > .swiper-button-next,
.cora-arrows-bookend-top-right > .swiper-button-prev,
.cora-arrows-bookend-top-right > .swiper-button-next { top: 0; }
.cora-arrows-bookend-bottom-left > .swiper-button-prev,
.cora-arrows-bookend-bottom-left > .swiper-button-next,
.cora-arrows-bookend-bottom-right > .swiper-button-prev,
.cora-arrows-bookend-bottom-right > .swiper-button-next { bottom: 0; }

/* horizontal: two buttons side by side, aligned left or right */
.cora-arrows-bookend-top-left > .swiper-button-prev,
.cora-arrows-bookend-bottom-left > .swiper-button-prev { left: 0; }
.cora-arrows-bookend-top-left > .swiper-button-next,
.cora-arrows-bookend-bottom-left > .swiper-button-next { left: 48px; }
.cora-arrows-bookend-top-right > .swiper-button-next,
.cora-arrows-bookend-bottom-right > .swiper-button-next { right: 0; }
.cora-arrows-bookend-top-right > .swiper-button-prev,
.cora-arrows-bookend-bottom-right > .swiper-button-prev { right: 48px; }

/* --- Staggered entrance animations ---------------------------------------
 * Layered on top of the normal multi-slide layout. Each transition (and the
 * initial load) re-triggers `.cora-animate` on the visible slides, staggered
 * via --cora-delay set in view.js. `.cora-anim-on` is added by JS so slides are
 * never left hidden if the script doesn't run. */
.cora-anim-on.cora-anim-fade .swiper-slide.cora-animate {
	animation: cora-fade 380ms ease both;
	animation-delay: var( --cora-delay, 0ms );
}
.cora-anim-on.cora-anim-dissolve .swiper-slide.cora-animate {
	animation: cora-dissolve 520ms ease both;
	animation-delay: var( --cora-delay, 0ms );
}
.cora-anim-on.cora-anim-slideup .swiper-slide.cora-animate {
	animation: cora-slideup 420ms cubic-bezier( 0.2, 0.7, 0.3, 1 ) both;
	animation-delay: var( --cora-delay, 0ms );
}

@keyframes cora-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes cora-dissolve {
	from { opacity: 0; filter: blur( 6px ); }
	to   { opacity: 1; filter: blur( 0 ); }
}
@keyframes cora-slideup {
	from { opacity: 0; transform: translateY( 28px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

/* Respect reduced-motion preferences. */
@media ( prefers-reduced-motion: reduce ) {
	.cora-query-carousel .swiper-slide.cora-animate {
		animation: none !important;
	}
}