/**
 * Module: Related Articles Section (slide-by-one card slider).
 * Enqueued on single posts (see functions.php). Card styles shared in
 * style.css §9. JS: assets/js/related-articles.js.
 * Section bg colour/image come from ACF (inline styles).
 */
.related-articles-section {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.related-articles-section .related-articles-head {
	margin-bottom: 2.5rem;
}
.related-articles-section .related-articles-desc {
	font-size: 1rem;
	color: var(--fuchs-dark-blue, #0F1F41);
}

/* Slider track: up to 3 cards per view, advances one card at a time. */
.ra-carousel {
	position: relative;
}
.ra-track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 0.5rem;
	scrollbar-width: none; /* Firefox */
}
.ra-track::-webkit-scrollbar {
	display: none; /* WebKit */
}
.ra-item {
	flex: 0 0 calc((100% - 3rem) / 3); /* 3 per view (two 1.5rem gaps) */
	scroll-snap-align: start;
}
.ra-item .news-card {
	height: 100%;
}

/* Dot navigation (built by JS). */
.ra-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.75rem;
}
.ra-dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(15, 31, 65, 0.35);
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.ra-dots button.active {
	background-color: var(--fuchs-dark-blue, #0F1F41);
	transform: scale(1.15);
}

/* Tablet: 2 per view. */
@media (max-width: 991.98px) {
	.ra-item {
		flex-basis: calc((100% - 1.5rem) / 2);
	}
}

/* Mobile: 1 per view. */
@media (max-width: 575.98px) {
	.ra-item {
		flex-basis: 100%;
	}
}