/*
 * Blog Post Slider — the cards are the theme's related-posts cards
 * (.ns-blog-grid--related in themes/north-shore/style.css), one per slide, and
 * the slider and its .ns-slider-progress scrollbar are built by the theme's
 * js/app.js on the frontend (3 cards per view, 2 at ≤980px, 1 at ≤767px).
 */

.et_pb_module.nscs-post-slider {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}

/* Same as the Related Articles heading. */
.nscs-post-slider__title {
	margin: 0;
	padding-bottom: 0;
	font-size: var(--gvid-ofdswtlbap, clamp(2.4rem, 2.05vw + 1.32rem, 3.059rem));
	text-align: center;
}

/*
 * Each slide holds a one-card related-posts row. Drop the row's 3-column grid
 * and stretch the card to the slide's height, so the Read More buttons line up.
 */
.nscs-post-slider__slide {
	padding: 0;
}

.nscs-post-slider .splide__slide {
	height: auto;
}

.nscs-post-slider__slide > .ns-blog-grid {
	display: block;
	height: 100%;
	margin: 0;
}

.nscs-post-slider__slide .ns-blog-grid__card {
	grid-template-rows: auto 1fr;
	height: 100%;
}

/* Visual Builder preview: a static row sized like the frontend slider. */
.nscs-post-slider__preview {
	display: flex;
	gap: 2rem;
	margin: 0;
	overflow: hidden;
	padding: 0;
	list-style: none;
}

.nscs-post-slider__preview > li {
	flex: 0 0 calc((100% - 4rem) / 3);
	min-width: 0;
}

@media (max-width: 980px) {
	.nscs-post-slider__preview {
		gap: 1.5rem;
	}

	.nscs-post-slider__preview > li {
		flex-basis: calc((100% - 1.5rem) / 2);
	}
}

@media (max-width: 767px) {
	.nscs-post-slider__preview {
		gap: 1rem;
	}

	.nscs-post-slider__preview > li {
		flex-basis: 100%;
	}
}

.nscs-post-slider__empty {
	text-align: center;
}