/* ==========================================================================
   SUDAIR PHARMA — "OUR JOURNEY" TIMELINE
   Horizontal on desktop, vertical on mobile. The connecting line is an SVG path
   drawn progressively as the track scrolls.

   Structure is an <ol>: the sequence is real to assistive tech and readable with
   styles off. Everything below is presentation over that document.
   ========================================================================== */

.sud-jr {
	position: relative;
	--jr-card-w: 300px;
	--jr-gap: 44px;
}

/* --------------------------------------------------------------------------
   DESKTOP — horizontal
   -------------------------------------------------------------------------- */

.sud-jr__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	padding-block: clamp(1rem, 2vw, 2rem);
	/* Fade the edges so the track reads as continuing rather than clipped */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}

/* Slim, on-brand scrollbar rather than the OS default */
.sud-jr__viewport::-webkit-scrollbar { block-size: 6px; }
.sud-jr__viewport::-webkit-scrollbar-track { background: var(--sud-line); border-radius: 100px; }
.sud-jr__viewport::-webkit-scrollbar-thumb { background: var(--sud-green-700); border-radius: 100px; }
.sud-jr__viewport { scrollbar-width: thin; scrollbar-color: var(--sud-green-700) var(--sud-line); }

.sud-jr__track {
	position: relative;
	min-inline-size: max-content;
	padding-inline: clamp(1rem, 3vw, 3rem);
	padding-block: 0;
}

/* The drawn line sits behind the cards, centred on the node row */
.sud-jr__line {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 200px;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 0;
	overflow: visible;
}

/* Resting state is a FULLY DRAWN line.
   `--jr-len` unset resolves to 0, which disables dashing entirely, so the path
   is solid if journey.js never runs. The offset likewise falls back to 0.
   The line can therefore never render invisible. */
.sud-jr__path {
	stroke-dasharray: var(--jr-len, 0);
	stroke-dashoffset: 0;
}

.sud-motion .sud-jr__path {
	stroke-dashoffset: var(--jr-offset, 0);
	transition: stroke-dashoffset .18s linear;
}

.sud-jr__list {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--jr-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	/* Two card heights plus the node row */
	min-block-size: 620px;
}

.sud-jr__item {
	position: relative;
	inline-size: var(--jr-card-w);
	flex: 0 0 var(--jr-card-w);
	scroll-snap-align: center;
	display: flex;
	align-items: center;
	block-size: 100%;
}

/* Alternate above and below the line */
.sud-jr__item--above { align-items: flex-start; }
.sud-jr__item--below { align-items: flex-end; }

/* The node on the line */
.sud-jr__node {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 15px;
	block-size: 15px;
	margin-inline-start: -7.5px;
	margin-block-start: -7.5px;
	border-radius: 50%;
	background: var(--sud-surface);
	border: 3px solid var(--sud-green-700);
	box-shadow: 0 0 0 5px rgba(0, 99, 68, .10);
	z-index: 2;
	transition:
		transform .45s var(--sud-ease-out, cubic-bezier(.16,1,.3,1)),
		border-color .45s ease,
		box-shadow .45s ease;
}

/* A stem joining card to node, so the connection is explicit */
.sud-jr__item::before {
	content: '';
	position: absolute;
	inset-inline-start: 50%;
	inline-size: 1px;
	background: linear-gradient(var(--sud-green-700), rgba(0, 99, 68, .15));
	z-index: 1;
}

.sud-jr__item--above::before { inset-block-start: 50%; block-size: 0; }
.sud-jr__item--below::before { inset-block-end: 50%; block-size: 0; }

/* --------------------------------------------------------------------------
   CARD
   -------------------------------------------------------------------------- */

.sud-jr__card {
	background: var(--sud-surface);
	border: 1px solid var(--sud-line);
	border-radius: var(--sud-radius-lg);
	overflow: hidden;
	inline-size: 100%;
	box-shadow: var(--sud-shadow-sm);
	transition:
		transform .5s var(--sud-ease-soft, cubic-bezier(.22,1,.36,1)),
		box-shadow .5s var(--sud-ease-soft, cubic-bezier(.22,1,.36,1)),
		border-color .5s ease;
}

.sud-jr__figure { margin: 0; overflow: hidden; }

.sud-jr__figure img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 1.1s var(--sud-ease-soft, cubic-bezier(.22,1,.36,1));
}

.sud-jr__body { padding: clamp(1rem, 1.6vw, 1.35rem); }

.sud-jr__year {
	display: inline-block;
	font-family: var(--sud-font-display);
	font-size: 1.45rem;
	font-weight: 900;
	line-height: 1;
	color: var(--sud-green-700);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	margin-bottom: .5rem;
}

.sud-jr__title {
	font-size: 1rem !important;
	line-height: 1.35;
	margin: 0 0 .5rem;
	color: var(--sud-ink);
	text-transform: none;   /* never uppercase — these carry proper nouns */
	letter-spacing: -0.01em;
}

.sud-jr__points {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sud-jr__points li {
	position: relative;
	padding-inline-start: 1rem;
	margin-bottom: .4rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--sud-body);
}

.sud-jr__points li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .62em;
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background: var(--sud-green-500);
}

.sud-jr__points li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   HOVER
   -------------------------------------------------------------------------- */

@media (hover: hover) {
	.sud-jr__item:hover .sud-jr__card {
		transform: translateY(-6px);
		box-shadow: var(--sud-shadow-lg);
		border-color: transparent;
	}

	.sud-jr__item:hover .sud-jr__figure img { transform: scale(1.06); }

	.sud-jr__item:hover .sud-jr__node {
		transform: scale(1.45);
		border-color: var(--sud-green-500);
		box-shadow: 0 0 0 8px rgba(67, 182, 73, .16);
	}
}

.sud-jr__item:focus-within .sud-jr__node {
	transform: scale(1.45);
	border-color: var(--sud-green-500);
}

/* --------------------------------------------------------------------------
   REVEAL
   Nested under .sud-motion so the finished state is the default.
   -------------------------------------------------------------------------- */

.sud-motion .sud-jr__item:not(.is-visible) .sud-jr__card {
	opacity: 0;
	transform: translateY(26px);
}

.sud-motion .sud-jr__item--below:not(.is-visible) .sud-jr__card {
	transform: translateY(-26px);
}

.sud-motion .sud-jr__card {
	transition:
		opacity .7s var(--sud-ease-out, cubic-bezier(.16,1,.3,1)),
		transform .7s var(--sud-ease-out, cubic-bezier(.16,1,.3,1)),
		box-shadow .5s ease,
		border-color .5s ease;
}

.sud-motion .sud-jr__item.is-visible .sud-jr__card { opacity: 1; transform: none; }

.sud-motion .sud-jr__item:not(.is-visible) .sud-jr__node { transform: scale(0); }
.sud-motion .sud-jr__item.is-visible .sud-jr__node { transform: scale(1); transition-delay: .12s; }

/* The stem grows once the card has arrived */
.sud-motion .sud-jr__item::before { transition: block-size .55s var(--sud-ease-out, cubic-bezier(.16,1,.3,1)) .2s; }
.sud-motion .sud-jr__item--above.is-visible::before { block-size: 46px; }
.sud-motion .sud-jr__item--below.is-visible::before { block-size: 46px; }

/* Without motion the stems are simply present */
.sud-jr__item--above::before { block-size: 46px; }
.sud-jr__item--below::before { block-size: 46px; }
.sud-motion .sud-jr__item--above:not(.is-visible)::before,
.sud-motion .sud-jr__item--below:not(.is-visible)::before { block-size: 0; }

.sud-jr__hint {
	margin: var(--sud-4) 0 0;
	text-align: center;
	font-size: var(--sud-text-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sud-muted);
}

.sud-jr__hint::after { content: ' →'; }
[dir="rtl"] .sud-jr__hint::after { content: ' ←'; }

/* --------------------------------------------------------------------------
   TABLET — narrower cards, tighter rhythm
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.sud-jr { --jr-card-w: 260px; --jr-gap: 32px; }
	.sud-jr__list { min-block-size: 560px; }
}

/* --------------------------------------------------------------------------
   MOBILE — vertical
   The same content and the same visual language, re-flowed. Not a degraded
   fallback: the line, nodes, cards and reveal all persist.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.sud-jr { --jr-card-w: 100%; }

	.sud-jr__viewport {
		overflow: visible;
		scroll-snap-type: none;
		-webkit-mask-image: none;
		        mask-image: none;
		padding-block: 0;
	}

	.sud-jr__track { min-inline-size: 0; padding-inline: 0; }

	/* The SVG wave is a horizontal device; vertical gets a straight rail */
	.sud-jr__line { display: none; }

	.sud-jr__list {
		display: block;
		min-block-size: 0;
		position: relative;
		padding-inline-start: 30px;
	}

	/* Vertical rail, drawn top-to-bottom by the same scroll progress */
	.sud-jr__list::before {
		content: '';
		position: absolute;
		inset-block: 6px 0;
		inset-inline-start: 7px;
		inline-size: 2px;
		background: linear-gradient(var(--sud-green-700), var(--sud-blue-600) 55%, var(--sud-green-500));
		transform-origin: top;
		transform: scaleY(var(--jr-progress, 1));
	}

	.sud-jr__item,
	.sud-jr__item--above,
	.sud-jr__item--below {
		display: block;
		inline-size: 100%;
		flex: none;
		block-size: auto;
		margin-bottom: var(--sud-5);
		align-items: stretch;
	}

	.sud-jr__node {
		inset-block-start: 14px;
		inset-inline-start: -30px;
		margin: 0;
		inline-size: 13px;
		block-size: 13px;
	}

	.sud-jr__item::before { display: none; }

	/* Both sides slide in from the same direction when stacked */
	.sud-motion .sud-jr__item--below:not(.is-visible) .sud-jr__card { transform: translateY(26px); }

	.sud-jr__figure img { aspect-ratio: 16 / 9; }
	.sud-jr__hint { display: none; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sud-jr__viewport { scroll-behavior: auto; }

	.sud-motion .sud-jr__item .sud-jr__card,
	.sud-motion .sud-jr__item:not(.is-visible) .sud-jr__card {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.sud-motion .sud-jr__item .sud-jr__node,
	.sud-motion .sud-jr__item:not(.is-visible) .sud-jr__node {
		transform: scale(1) !important;
		transition: none !important;
	}

	.sud-motion .sud-jr__path { stroke-dashoffset: 0 !important; transition: none !important; }
	.sud-jr__item::before { block-size: 46px !important; transition: none !important; }
	.sud-jr__list::before { transform: none !important; }

	.sud-jr__item:hover .sud-jr__card,
	.sud-jr__item:hover .sud-jr__figure img { transform: none; }
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */

@media print {
	.sud-jr__viewport { overflow: visible; mask-image: none; }
	.sud-jr__list { display: block; min-block-size: 0; }
	.sud-jr__item { inline-size: 100%; margin-bottom: 1rem; break-inside: avoid; }
	.sud-jr__line, .sud-jr__hint, .sud-jr__node { display: none; }
	.sud-jr__card { opacity: 1 !important; transform: none !important; box-shadow: none; }
}