/**
 * News Element — Thumbsync Slider block (from news-element's
 * slider-thumbsync-b, on Splide). Structure only; sizes, colours, overlay
 * and spacing come from the block's controls. Splide's own core CSS is
 * loaded with the slider script on the front end.
 */

.ne-ts-main .ft-thumbwrap,
.ne-ts-thumbs .ft-thumbwrap {
	display: block;
}

/* Caption over the main image; clicks fall through to the image link
   except on the caption's own links. */
.ne-ts-caption {
	position: absolute;
	right: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
}

.ne-ts-caption a {
	pointer-events: auto;
}

/* Thumbnails: clickable, with a bar along the top of the active one. */
.ne-ts-thumbs .splide__slide {
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.ne-ts-thumbs .splide__slide.is-active {
	opacity: 1;
}

.ne-ts-thumbs .splide__slide.is-active .ft-thumbwrap::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
}

/* Splide marks the active thumbnail with a border; the bar replaces it. */
.ne-ts-thumbs .splide__slide.is-active,
.ne-ts-thumbs .splide__track--nav > .splide__list > .splide__slide.is-active {
	border: 0;
}

/* Arrows: Splide's buttons, coloured and sized by the Arrows controls. */
.ne-ts-main .splide__arrow {
	opacity: 1;
	z-index: 2;
}

.ne-ts-main .splide__arrow svg {
	fill: currentColor;
}

/* Splide's core CSS doesn't flip the shared arrow icon for "previous". */
.ne-ts-main .splide__arrow--prev svg {
	transform: scaleX(-1);
}

/* Strip over the bottom of the main slide; the strip padding is the inset. */
.has-strip-over {
	position: relative;
}

.has-strip-over .ne-ts-strip {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	box-sizing: border-box;
}

/* Before Splide mounts (editor preview, or no JavaScript): first slide and
   a single row of thumbnails, instead of every slide stacked. */
.ne-ts-main:not(.is-initialized) .splide__slide:not(:first-child) {
	display: none;
}

.ne-ts-thumbs:not(.is-initialized) .splide__list {
	display: flex;
	overflow: hidden;
}

.ne-ts-thumbs:not(.is-initialized) .splide__slide {
	flex: 0 0 33.333%;
}

@media (prefers-reduced-motion: reduce) {
	.ne-ts-thumbs .splide__slide {
		transition: none;
	}
}