/*=========================
	CARDS SLIDER BLOCK
	Mirrors the live "Related Articles" carousel: eyebrow header, a scroll-snap
	track of article cards (image + accent bar + linked title with arrow), and
	circular prev/next controls. Card chrome mirrors the pages "cards-3-columns".
=========================*/

.block-cards-slider .cards-slider__header {
	margin-bottom: var(--space-5);
}
.block-cards-slider .cards-slider__header .top-title {
	display: block;
	margin-bottom: 0;
}
.block-cards-slider .cards-slider__header .title {
	margin: var(--space-2) 0 0;
}
.block-cards-slider .cards-slider__copy {
	margin-top: var(--space-3);
	max-width: 60ch;
}

/* ---------- Slider shell + track ---------- */
.block-cards-slider .cards-slider {
	position: relative;
}
.block-cards-slider .cards-slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--space-5)) / 3);
	gap: var(--space-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: var(--space-2);
	width: 95%;
}
.block-cards-slider .cards-slider__track::-webkit-scrollbar {
	display: none;
}
.block-cards-slider .cards-slider__slide {
	scroll-snap-align: start;
}

/* ---------- Card chrome (image + accent bar + title-as-link-with-arrow) ---------- */
.block-cards-slider .c-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: var(--color-n-black);
	background: transparent;
	border: none;
	border-radius: 0;
}
.block-cards-slider .c-card__media {
	display: block;
}
.block-cards-slider .c-card__image.o-ratio {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	background: var(--accent-grey, #f1f1f3);
	aspect-ratio: 3 / 2;
}
.block-cards-slider .c-card__image.o-ratio img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.block-cards-slider .c-card__highlight {
	display: block;
	height: 8px;
	width: 60%;
	margin: 0;
	background: currentColor;
	transition: width .35s ease;
}
.block-cards-slider .c-card:hover .c-card__highlight,
.block-cards-slider .c-card:focus-within .c-card__highlight {
	width: 100%;
}
.block-cards-slider .c-card__content {
	padding-top: var(--space-3);
}
.block-cards-slider .c-card__title {
	margin: 0;
	color: var(--color-n-black);
	font-weight: 500 !important;
}
.block-cards-slider .c-card__link {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	color: var(--color-n-black);
	text-decoration: none;
}
/* Mobile: smaller card link text */
@media only screen and (max-width: 767.98px) {
	.block-cards-slider .c-card__link {
		font-size: 22px !important;
		line-height: 1.3;
		font-weight: 600 !important;
	}
}
.block-cards-slider .c-card__arrow {
	display: inline-flex;
	flex: 0 0 auto;
	align-self: flex-start;
}
.block-cards-slider .c-card__arrow svg {
	width: 2.2rem;
	height: auto;
	display: block;
}

/* Accent bar colour (bar uses currentColor; class sets the colour) */
.block-cards-slider .c-card.accent-grey       { color: var(--accent-grey); }
.block-cards-slider .c-card.accent-green      { color: var(--accent-green); }
.block-cards-slider .c-card.accent-pink       { color: var(--accent-pink); }
.block-cards-slider .c-card.accent-peach      { color: var(--accent-peach); }
.block-cards-slider .c-card.accent-light-blue { color: var(--accent-light-blue); }

/* ---------- Circular prev/next controls (aligned to the image row) ---------- */
.block-cards-slider .cards-slider__nav {
	position: absolute;
	top: 33%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px solid var(--color-n-black);
	background: transparent;
	color: var(--color-n-black);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 3;
	transition: background .25s ease, color .25s ease;
}
.block-cards-slider .cards-slider__nav:hover {
	background: var(--color-n-black);
	color: var(--color-n-white, #fff);
}
.block-cards-slider .cards-slider__nav[hidden] {
	display: none;
}
.block-cards-slider .cards-slider__nav svg {
	width: 12px;
	height: auto;
	display: block;
}
.block-cards-slider .cards-slider__nav--prev { left: -28px; }
.block-cards-slider .cards-slider__nav--next { right: -28px; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 991.98px) {
	.block-cards-slider .cards-slider__track {
		grid-auto-columns: calc((100% - var(--space-5)) / 2);
	}
	.block-cards-slider .cards-slider__nav--prev { left: 8px; }
	.block-cards-slider .cards-slider__nav--next { right: 8px; }
}
@media only screen and (max-width: 575.98px) {
	.block-cards-slider .cards-slider__track {
		grid-auto-columns: 82%;
	}
}

/* ---------- Title accent bar (moved from top-title; retains the coloured line) ---------- */
.block-cards-slider .cards-slider__header .cards-slider__title::after {
	content: "";
	display: block;
	height: .5rem;
	width: 8.3rem;
	margin: var(--space-3) 0 0;
	background-color: var(--accent-light-blue);
}
.block-cards-slider .cards-slider__header .cards-slider__title--accent-peach::after      { background-color: var(--accent-peach); }
.block-cards-slider .cards-slider__header .cards-slider__title--accent-green::after      { background-color: var(--accent-green); }
.block-cards-slider .cards-slider__header .cards-slider__title--accent-pink::after       { background-color: var(--accent-pink); }
.block-cards-slider .cards-slider__header .cards-slider__title--accent-light-blue::after { background-color: var(--accent-light-blue); }
.block-cards-slider .cards-slider__header .cards-slider__title--color-p::after           { background-color: var(--color-p); }
.block-cards-slider .cards-slider__header .cards-slider__title--color-n-black::after      { background-color: #282829; }

/* Orange accent (live "bg-color--orange" → matches site --color-p) */
.block-cards-slider .c-card.accent-orange { color: var(--color-p); }