/* == START List Reset == */
/* Splide's own core CSS handles this too, this is a safety net in case that file is ever missing or fails to load. */
.tsc-contentslider .splide__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tsc-contentslider .splide__slide {
	list-style: none;
}
/* == END List Reset == */

/* == START Slider Wrapper == */
/* Side padding reserves space for the nav arrows so they sit in the margins, not over the card content. */
.tsc-contentslider {
	position: relative;
	padding: 0 50px;
}
/* == END Slider Wrapper == */

/* == START Splide Container == */
.tsc-contentslider .splide {
	position: relative;
}
/* == END Splide Container == */

/* == START Card Styling == */
.tsc-contentslider__card {
	text-align: center;
	padding: 20px;
}

.tsc-contentslider__title {
	margin-bottom: 10px;
}
/* == END Card Styling == */

/* == START Nav Arrows == */
/* Arrows sit inside the wrapper's side padding, outside the track itself, so they never overlap card content. */
.tsc-contentslider__arrows {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	pointer-events: none;
}

.tsc-contentslider__arrow {
	pointer-events: auto;
	width: 40px;
	height: 40px;
	border: none;
	cursor: pointer;
	color: var(--tsc-nav-colour, #223064);
	background-color: var(--tsc-nav-bg-colour, #ffffff);
	border-radius: var(--tsc-nav-bg-radius, 50px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tsc-contentslider__arrow:hover {
	color: var(--tsc-nav-colour-hover, var(--tsc-nav-colour, #223064));
	background-color: var(--tsc-nav-bg-colour-hover, var(--tsc-nav-bg-colour, #ffffff));
}

.tsc-contentslider__arrow--prev {
	left: 0;
}

.tsc-contentslider__arrow--next {
	right: 0;
}

.tsc-contentslider__arrow--prev svg {
	transform: scaleX(-1);
}
/* == END Nav Arrows == */