/**
 * News Element — Slider VSync block (news-element-pro's slider-vsync).
 * Structure only; slider height, strip width, colours and the strip item look
 * come from the block's controls. Runs inside the thumbsync view
 * (.ne-thumbsync.slider-vsync) with assets/js/thumbsync.js in vertical mode.
 */

.slider-vsync {
	position: relative;
	overflow: hidden;
}

/* The full-bleed main slider fills the block. */
.slider-vsync .ne-ts-main {
	width: 100%;
}

.slider-vsync .ne-ts-main .ft-thumbwrap {
	display: block;
	width: 100%;
}

/* The caption, strip and strip items sit in :where() so the Slide caption,
   Strip and Strip item controls (per-post CSS, loaded before this file) win:
   without it the caption was always centred at 760px and ran under the strip. */

/* Shade over the image; the caption sits over the shade, centred. */
.slider-vsync .ne-ts-main .ft-thumbwrap.has-overlay::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}

/* Default shade in :where() (2026-11-03): at full specificity it loaded after the per-post CSS and hid the Image overlay control. */
:where(.slider-vsync .ne-ts-main .ft-thumbwrap.has-overlay)::after {
	background: rgba(0, 0, 0, 0.45);
}

:where(.slider-vsync .ne-ts-caption) {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	z-index: 2;
	padding: 0 6%;
	color: #fff;
	pointer-events: none;
}

/* The caption row places the text box left / centre / right (Slide caption controls). */
:where(.slider-vsync .ne-ts-caption) {
	display: flex;
	justify-content: center;
}

:where(.slider-vsync .ne-ts-caption .excerpt-wrap) {
	width: 100%;
	max-width: 760px;
	margin: 0;
	text-align: center;
}

/* The vertical strip sits on the right, above the slider. */
:where(.slider-vsync .ne-ts-strip) {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	padding: 0 4%;
	box-sizing: border-box;
}

.slider-vsync .ne-ts-thumbs {
	width: 100%;
}

:where(.slider-vsync .ne-ts-thumbs .splide__slide) {
	box-sizing: border-box;
	padding: 14px 16px;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.3s ease;
}

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

/* Numbered strip: a round number in front of the text (Strip numbers controls). */
.slider-vsync .ne-ts-thumbs .splide__slide.has-num {
	display: flex;
	align-items: center;
	gap: 16px;
}

.slider-vsync .ne-ts-thumbs .has-num .excerpt-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

:where(.slider-vsync) .ne-ts-num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	transition: background 0.3s ease, color 0.3s ease;
}

.slider-vsync .ne-ts-thumbs .ne-title a {
	color: inherit;
	text-decoration: none;
}

/* Title defaults (Post title controls override). */
:where(.ne-ts-main) .ne-title {
	margin: 0 0 10px;
	font-size: 32px;
	line-height: 1.2;
}

:where(.ne-ts-thumbs) .ne-title {
	margin: 0;
	font-size: 16px;
	line-height: 1.35;
}

@media (max-width: 767px) {
	:where(.slider-vsync .ne-ts-strip) {
		position: static;
		padding: 12px 0 0;
	}

	:where(.slider-vsync .ne-ts-caption) {
		padding: 0 16px;
	}
}

/* Arrows sit over the main slider, vertically centred: prev on the left edge,
   next just left of the strip so it does not cover the titles. :where() keeps
   the specificity low so the Slider controls' arrow styles still win. */
:where(.slider-vsync) .ne-ts-main .splide__arrows {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4;
	pointer-events: none;
}

:where(.slider-vsync) .ne-ts-main .splide__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: #111;
	cursor: pointer;
	pointer-events: auto;
}

:where(.slider-vsync) .ne-ts-main .splide__arrow--prev {
	left: 12px;
}

:where(.slider-vsync) .ne-ts-main .splide__arrow--next {
	right: 40%;
}

:where(.slider-vsync) .splide__arrow svg {
	width: 50%;
	height: 50%;
	fill: currentColor;
}

/* Dots (Slider → Show dots): a centred row over the bottom of the main slide. Plain round
   buttons; spacing, size and colours come from the Dots controls. */
:where(.slider-vsync) .ne-ts-main .splide__pagination {
	position: absolute;
	right: 0;
	bottom: 16px;
	left: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

:where(.slider-vsync) .ne-ts-main .splide__pagination__page {
	display: block;
	width: 8px;
	height: 8px;
	margin: 0 4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	pointer-events: auto;
}

:where(.slider-vsync) .ne-ts-main .splide__pagination__page.is-active {
	background: #fff;
}