/**
 * Module: Our Journey Section (milestone timeline slider).
 * Loaded only when an `our_journey_section` layout is present.
 * JS (arrow scrolling) lives in assets/js/modules/our_journey_section.js.
 */
.journey-section .journey-head {
	margin-bottom: 3rem;
}
.journey-section .journey-desc {
	font-size: var(--fuchs-fs-lead, 20px);
	font-weight: var(--fuchs-fw-regular, 400);
}

/* Slider shell: prev/next arrows flank the scrollable track. */
.journey-slider {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.journey-nav {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	margin-top: 0.9rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--fuchs-border, #BDBCBC);
	border-radius: 50%;
	background: #fff;
	color: var(--fuchs-primary, #1260A9);
	font-size: 1.15rem;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, opacity 0.15s;
	z-index: 2;
}
.journey-nav:hover:not(:disabled),
.journey-nav:focus:not(:disabled) {
	background: var(--fuchs-primary, #1260A9);
	color: #fff;
}
.journey-nav:disabled {
	opacity: 0.35;
	cursor: default;
}

/* When everything fits, hide the arrows (set by JS). */
.journey-slider--static .journey-nav {
	display: none;
}

/* Scrollable track with the connecting timeline line. */
.journey-track {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 0.5rem;
	scrollbar-width: none; /* Firefox */
}
.journey-track::-webkit-scrollbar {
	display: none; /* WebKit */
}

/* The horizontal line runs through the year nodes. */
.journey-track::before {
	content: "";
	position: absolute;
	top: 2.25rem;
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--fuchs-border, #BDBCBC);
	z-index: 0;
}

.journey-item {
	position: relative;
	flex: 0 0 clamp(220px, 24%, 280px);
	padding-top: 2.75rem;
	scroll-snap-align: start;
	z-index: 1;
}

.journey-year {
	font-size: 1.75rem;
	font-weight: var(--fuchs-fw-semibold, 600);
	color: var(--fuchs-primary, #1260A9);
	line-height: 1;
	margin-bottom: 1.1rem;
}
.journey-node {
	position: absolute;
	top: 1.9rem;
	left: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: var(--fuchs-primary, #1260A9);
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--fuchs-primary, #1260A9);
}
.journey-title {
	font-size: 1.1rem;
	font-weight: var(--fuchs-fw-semibold, 600);
	color: var(--fuchs-text, #231F20);
	margin-bottom: 0.5rem;
}
.journey-card-desc {
	font-size: 0.95rem;
	font-weight: var(--fuchs-fw-light, 300);
	color: var(--fuchs-700, #656263);
	margin: 0;
}

@media (max-width: 575.98px) {
	.journey-item {
		flex-basis: 78%;
	}
}