/**
 * News Element — Slider Centered block (news-element-pro's
 * slider-centered). Structure only; slide height, text position, shade and
 * colours come from the block's controls. Runs inside the Splide slider
 * (.ne-carousel.slider-centered).
 */

/* Each slide: the image fills it; the shade and the text sit on top. */
.slider-centered .sc-slide {
	width: 100%;
}

.slider-centered .sc-bg,
.slider-centered .sc-bg .ft-thumbwrap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.slider-centered .sc-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slider-centered .sc-shade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}

/* Type only (text_only): no image; a colour field with the title's first letter,
   large and faint, centred behind the text. Style → Type only sets the
   background, the letter's font, colour and position. */
:where(.slider-centered.is-type) .sc-slide {
	background: var(--ne-color-primary, #222);
}

:where(.slider-centered) .sc-letter {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 400px;
	font-weight: 700;
	line-height: 1;
	color: rgba(0, 0, 0, 0.08);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

/* The text is centred horizontally and sits at the vertical position from the
   Layout control (top % with a half-height shift). */
.slider-centered .sc-overlay {
	position: absolute;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.5s ease;
}

/* Every slide in view shows its text (several items per view), not just the active one. */
.slider-centered .is-active .sc-overlay,
.slider-centered .is-entering .sc-overlay {
	opacity: 1;
}

/* :where(): on subsites this stylesheet loads after the post CSS, and Text position (margins + text-align) must win. */
:where(.slider-centered) .sc-content {
	margin: 0 auto;
	box-sizing: border-box;
	text-align: center;
	transform: translateX(30px);
	transition: transform 0.3s ease 0.2s;
}

.slider-centered .is-active .sc-content,
.slider-centered .is-entering .sc-content {
	transform: translateX(0);
}

/* Title defaults (Post title controls override). */
:where(.sc-content) .ne-title {
	margin: 0 0 12px;
	font-size: 34px;
	line-height: 1.2;
}

.slider-centered .ne-title a {
	color: inherit;
	text-decoration: none;
}

/* Arrows: prev at the left edge, next at the right edge, both vertically
   centred. The container spans the slider and lets clicks through; only the
   buttons take them. :where() keeps the specificity low so the Slider
   controls' arrow styles still win. */
:where(.slider-centered) .splide__arrows {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	pointer-events: none;
}

:where(.slider-centered) .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-centered) .splide__arrow--prev {
	left: 12px;
}

:where(.slider-centered) .splide__arrow--next {
	right: 12px;
}

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

:where(.slider-centered) .splide__arrow:disabled {
	opacity: 0.4;
}

/* Dots: plain round buttons (no default padding or border); size and colours come from the Dots controls. */
:where(.slider-centered) .splide__pagination__page {
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}