/* ---- Wrapper ------------------------------------------------------------ */
.wp-block-query.post-slider {
	/* Easy to override per block or in Additional CSS. */
	--qps-gutter: 56px;                                        /* space reserved for the arrows */
	--qps-fade: 5%;                                            /* width of the right-edge fade */
	--qps-btn-bg: var(--wp--preset--color--accent-1, #111);    /* arrow background */
	--qps-btn-color: var(--wp--preset--color--base, #fff);     /* arrow icon color */

	position: relative;
	box-sizing: border-box;
	/* Prevent shrink-to-fit inside flex parents. */
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding-inline: var(--qps-gutter);
}

/* ---- Viewport: Swiper container + right-edge fade ------------------------- */
.wp-block-query.post-slider .qps-viewport {
	margin-left: 0;
	/* Extend into the right gutter so the next slide peeks in and fades out. */
	margin-right: calc(var(--qps-gutter) * -1);
	padding: 0 var(--qps-gutter) 0 0;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--qps-fade)), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - var(--qps-fade)), transparent 100%);
}

/* On the last slide there is no next slide, so no fade. */
.wp-block-query.post-slider.qps-at-end .qps-viewport {
	-webkit-mask-image: none;
	mask-image: none;
}

/* ---- Track: override the theme's flow/grid/flex layout ------------------ */
.wp-block-query.post-slider .wp-block-post-template.swiper-wrapper {
	display: flex !important;
	flex-wrap: nowrap;
	grid-template-columns: none;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0; /* spacing comes from Swiper's spaceBetween */
	width: 100%;
	max-width: none;
}

.wp-block-query.post-slider .wp-block-post-template > .swiper-slide {
	height: auto;
	margin-block: 0;
	box-sizing: border-box;
	min-width: 0;
}

/* Pagination makes no sense inside a slider. */
.wp-block-query.post-slider .wp-block-query-pagination {
	display: none;
}

/* ---- Arrows ------------------------------------------------------------- */
.wp-block-query.post-slider .qps-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--qps-btn-bg);
	border-radius: 50%;
	background: var(--qps-btn-bg);
	color: var(--qps-btn-color);
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

.wp-block-query.post-slider .qps-prev { left: 8px; }
.wp-block-query.post-slider .qps-next { right: 8px; }

.wp-block-query.post-slider .qps-nav:hover,
.wp-block-query.post-slider .qps-nav:focus-visible {
	opacity: 0.85;
}

.wp-block-query.post-slider .qps-nav svg {
	display: block;
	width: 24px;
	height: 24px;
	pointer-events: none;
}

.wp-block-query.post-slider .qps-disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

.wp-block-query.post-slider .qps-lock {
	display: none;
}

/* ---- Slide content (image left / text right) ----------------------------- */

/* Keep images inside their column even if the block has a fixed inline width. */
.wp-block-query.post-slider .wp-block-post-featured-image {
	margin: 0;
	max-width: 100%;
}
.wp-block-query.post-slider .wp-block-post-featured-image img {
	max-width: 100%;
	height: auto;
}

/* Columns inside a slide should fill the slide. */
.wp-block-query.post-slider .swiper-slide .wp-block-columns {
	margin: 0;
	max-width: 100%;
	gap: var(--wp--preset--spacing--50, 2rem);
}

/* "Learn More" link styled as a button. */
.wp-block-query.post-slider .wp-block-post-excerpt__more-link {
	display: inline-block;
	padding: 0.6em 1.2em;
	border-radius: 999px;
	border: 1px solid var(--qps-btn-bg);
	background: var(--qps-btn-bg);
	color: var(--qps-btn-color);
	text-decoration: none;
	font-weight: 600;
}
.wp-block-query.post-slider .wp-block-post-excerpt__more-link:hover,
.wp-block-query.post-slider .wp-block-post-excerpt__more-link:focus-visible {
	opacity: 0.85;
}