/* ==========================================================================
   SUDAIR PHARMA — OUR JOURNEY (year selector + alternating milestones)

   Scoped entirely to .sud-tj. These class names exist nowhere else on the site,
   so nothing here can reach the header, the footer, the existing journey
   section, or any other block on Company Overview.
   ========================================================================== */

.sud-tj {
	--tj-green: var(--sud-green-700, #006344);
	--tj-line: #E3EAE6;                /* the year strip's hairline — unchanged */
	--tj-curve-line: #B8C2BE;          /* the milestone connector, a step darker
	                                      so it reads against white. Kept separate
	                                      from --tj-line so darkening the curve
	                                      does not also darken the year rule. */
	/*
	 * The column gap, named so the connector can be derived from it rather than
	 * guessed alongside it. Same value as before — spacing is unchanged.
	 */
	--tj-gap: clamp(1.5rem, 4vw, 4rem);

	/*
	 * Curve width, solved so NOTHING in the connector can reach the content.
	 *
	 * The bracket straddles the centre line, so it extends --tj-curve/2 either
	 * side, and the node dot sticks out a further 5.5px beyond that. Content
	 * starts at --tj-gap/2 from the centre. The binding constraint is therefore
	 *
	 *     curve/2 + 5.5 + safety  <=  gap/2      ->  curve <= gap - 20
	 *
	 * Sizing the curve at gap - 20 satisfies it at every width by construction.
	 * The previous value was tuned to the stroke alone and ignored the dot, which
	 * is why the dots — not the line — were the part landing on the text.
	 */
	--tj-curve: max(18px, calc(var(--tj-gap) - 20px));
	--tj-w: 1.5px;
	--tj-ease: cubic-bezier(.22, 1, .36, 1);
	--tj-speed: .5s;                   /* 500ms — the brief's 400-600ms */

	/*
	 * Sticky offset: clears the site header (the same variable the subnav uses)
	 * and then some, so the rail sits comfortably down the viewport rather than
	 * jammed against the header.
	 */
	--tj-stick: calc(var(--sud-hd-h, 86px) + 4.5rem);

	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: clamp(1.25rem, 3vw, 3.5rem);
}

/* --------------------------------------------------------------------------
   YEAR SELECTOR
   -------------------------------------------------------------------------- */

/*
 * THE STICKY YEAR RAIL
 *
 * Runs down the left of the milestones and stays with the reader for the whole
 * section, so any year is one click away without scrolling back to the top.
 *
 * `align-self: start` is what makes sticky work here. A grid item stretches to
 * the row's full height by default, and an element that is already as tall as
 * its container has nothing to travel within — sticky silently does nothing.
 * Shrinking it to its content gives it room to move.
 *
 * The section itself is the containing block, so the rail releases naturally at
 * the end of Our Journey. Nothing else on the page is pinned.
 */
.sud-tj__years {
	position: sticky;
	inset-block-start: var(--tj-stick);
	align-self: start;
	z-index: 2;

	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: clamp(.15rem, .6vw, .5rem);
	padding-inline-start: 2px;

	/*
	 * No internal scrolling, and therefore no scrollbar.
	 *
	 * This previously capped the rail's height with overflow-y:auto as a guard
	 * for very short viewports. The guard was not worth its cost: it put a grey
	 * scrollbar beside the years, and the page is meant to be the only thing that
	 * scrolls. The eleven years measure 542px against roughly 740px of space
	 * below the header at a normal desktop height, so the cap was doing nothing
	 * except drawing a scrollbar.
	 */
	overflow: visible;
}

/* The rail itself: a vertical hairline the year dots sit on. */
.sud-tj__years::before {
	content: '';
	position: absolute;
	inset-block: 10px;
	inset-inline-start: 6px;
	inline-size: 1px;
	background: var(--tj-line);
}

.sud-tj__cap {
	position: absolute;
	inset-inline-start: 2px;
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background: var(--sud-green-500, #43B649);
}

.sud-tj__cap--start { inset-block-start: 6px; }
.sud-tj__cap--end   { inset-block-end: 6px; }

.sud-tj .sud-tj__year {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;

	/* Row, not column: the dot sits on the rail and the year reads beside it. */
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: .7rem;

	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: start;
	font-family: var(--sud-font-display);
	font-size: clamp(.85rem, 1.05vw, 1rem);
	font-weight: 700;
	color: var(--sud-muted, #5C6E66);        /* 5.9:1 — inactive but readable */

	transition: color var(--tj-speed) var(--tj-ease);
}

/*
 * The year sits inside a pill that only becomes visible when active, so the
 * label never moves between states — no reflow on selection.
 *
 * A 46px circle was too tight: a four-digit year in the display face at this
 * size runs to roughly 36px, leaving 5px a side and looking cramped against the
 * curve of the disc. A pill sized from the text — padding plus a minimum — holds
 * any year comfortably and still reads as a rounded highlight.
 */
.sud-tj__year > span {
	display: grid;
	place-items: center;
	min-inline-size: 64px;
	block-size: 42px;
	padding-inline: .8rem;
	border-radius: 999px;
	background: transparent;
	transition:
		background var(--tj-speed) var(--tj-ease),
		color var(--tj-speed) var(--tj-ease),
		box-shadow var(--tj-speed) var(--tj-ease);
}

/*
 * The dot on the rail. `order: -1` puts it before the year without needing the
 * markup reordered, so the same HTML serves the horizontal mobile strip too.
 */
.sud-tj__year::after {
	content: '';
	order: -1;
	flex: 0 0 auto;
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background: #C6CFCA;
	transition:
		inline-size var(--tj-speed) var(--tj-ease),
		block-size var(--tj-speed) var(--tj-ease),
		background var(--tj-speed) var(--tj-ease),
		box-shadow var(--tj-speed) var(--tj-ease);
}

/* Active: a larger green node on the rail, ringed so it reads as the current
   position rather than just a bigger dot. */
.sud-tj__year[aria-current="true"]::after {
	inline-size: 13px;
	block-size: 13px;
	margin-inline: -2px;
	background: var(--tj-green);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--tj-green) 16%, transparent);
}

/*
 * White on the green pill, stated on the span itself as well as the button.
 *
 * Colour was previously set only on the button and inherited down. Elementor's
 * kit emits colour rules for text inside widgets, and any of those landing on
 * the span left dark green text on the dark green pill — unreadable. Setting it
 * where the text actually is removes the dependency on inheritance.
 */
.sud-tj .sud-tj__year[aria-current="true"],
.sud-tj .sud-tj__year[aria-current="true"] > span {
	color: #fff;                              /* 8.6:1 on --sud-green-700 */
}

.sud-tj .sud-tj__year[aria-current="true"] > span {
	background: var(--tj-green);
	box-shadow: 0 6px 18px rgba(0, 99, 68, .28);
}

/* (The old horizontal underline lived here. In the vertical rail the active
   marker is the enlarged node above, so this would only have overridden it.) */

@media (hover: hover) {
	.sud-tj__year:not([aria-current="true"]):hover { color: var(--sud-ink); }
	.sud-tj__year:not([aria-current="true"]):hover > span { background: var(--sud-surface-2, #F4F8F6); }
}

.sud-tj .sud-tj__year:focus-visible {
	outline: 3px solid var(--sud-green-500, #43B649);
	outline-offset: 4px;
	border-radius: 26px;
}

/*
 * Ancestors unclipped so the rail can stick — see unclip() in
 * journey-timeline.js, which adds this class only to this timeline's own
 * ancestors. `.sud-field` sets overflow:hidden across many sections to clip
 * decorative bleed, and that is exactly what confines a sticky element to a
 * container that never scrolls. !important because the rule it overrides is a
 * one-line utility that would otherwise win on source order.
 */
.sud-tj-unclip {
	overflow: visible !important;
}

/* --------------------------------------------------------------------------
   MILESTONES
   -------------------------------------------------------------------------- */

.sud-tj__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sud-tj__item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--tj-gap);
	padding-block: clamp(1rem, 2vw, 1.75rem);

	/*
	 * ALWAYS FULL STRENGTH.
	 *
	 * Every milestone stays completely readable whether or not a year is
	 * selected. Muting the rest made the section look disabled, so selection is
	 * now signalled only by the year pill and that milestone's node — emphasis
	 * added to one item rather than taken away from ten.
	 *
	 * .is-selecting is still set on the root by the script; nothing keys off it
	 * visually any more, and it is left in place so the state is available if a
	 * subtler treatment is ever wanted.
	 */
	opacity: 1;
}

/* Odd rows: image left, copy right. Even rows swap, which is what makes the
   connector below read as a continuous wave rather than a zigzag. */
.sud-tj__item:nth-child(even) .sud-tj__media { grid-column: 2; grid-row: 1; }
.sud-tj__item:nth-child(even) .sud-tj__body  { grid-column: 1; grid-row: 1; }

/*
 * THE CONNECTOR
 *
 * Each milestone draws half a bracket in the centre gutter — ")" on odd rows,
 * "(" on even — anchored to the same x. Consecutive brackets meet at the row
 * boundary, so the separate pieces join into one continuous S-curve running the
 * length of the section. No SVG, no per-item measurement, and it re-flows by
 * itself when a milestone's height changes.
 */
.sud-tj__item::after {
	content: '';
	position: absolute;
	inset-block: 0;
	inline-size: var(--tj-curve);
	border: var(--tj-w) solid var(--tj-curve-line);
	pointer-events: none;

	/*
	 * The connector is the bottom layer.
	 *
	 * z-index alone was not enough. A positioned element paints ABOVE in-flow,
	 * non-positioned content whatever its z-index, and the media and copy are
	 * plain grid items — so the curve was drawn over the photographs and the
	 * text. Putting those two on their own layer (see MEDIA AND COPY below) is
	 * what actually pushes the line behind them; this only pins the order.
	 */
	z-index: 0;
}

/*
 * Each bracket straddles the centre line rather than starting at it, so the
 * whole curve lives inside the column gap. Anchored at 50% it extended a full
 * --tj-curve outward and its vertical stroke landed 43px inside the copy,
 * running between the lines of text — measured, not assumed. Centring it halves
 * that reach to --tj-curve/2, which the sizing above keeps inside the gutter.
 */
.sud-tj__item:nth-child(odd)::after {
	inset-inline-start: calc(50% - var(--tj-curve) / 2);
	border-inline-start: 0;
	border-start-end-radius: var(--tj-curve);
	border-end-end-radius: var(--tj-curve);
}

.sud-tj__item:nth-child(even)::after {
	inset-inline-end: calc(50% - var(--tj-curve) / 2);
	border-inline-end: 0;
	border-start-start-radius: var(--tj-curve);
	border-end-start-radius: var(--tj-curve);
}

/* The curve has nothing to join above the first row or below the last, so those
   halves are trimmed rather than left hanging in space. */
.sud-tj__item:first-child::after { inset-block-start: 50%; }
.sud-tj__item:last-child::after  { inset-block-end: 50%; }

/* The node where the connector meets the copy. */
.sud-tj__item::before {
	content: '';
	position: absolute;
	inset-block-start: 50%;
	inline-size: 11px;
	block-size: 11px;
	margin-block-start: -5.5px;
	border-radius: 50%;
	background: var(--tj-curve-line);
	z-index: 3;                        /* nodes sit above everything */
	transition: background var(--tj-speed) var(--tj-ease), transform var(--tj-speed) var(--tj-ease);
}

/* The node sits on the bracket's outer edge, which is now half a curve from the
   centre line rather than a whole one. */
.sud-tj__item:nth-child(odd)::before  { inset-inline-start: calc(50% + var(--tj-curve) / 2 - 5.5px); }
.sud-tj__item:nth-child(even)::before { inset-inline-end:  calc(50% + var(--tj-curve) / 2 - 5.5px); }

.sud-tj__item.is-active::before {
	background: var(--tj-green);
	transform: scale(1.25);
}

/* --------------------------------------------------------------------------
   MEDIA AND COPY
   -------------------------------------------------------------------------- */

/*
 * Deliberately small: the photographs support the copy rather than dominating
 * the row. 260-320px wide at desktop, and the aspect ratio puts the height at
 * 152-187px across that range.
 *
 * The media sits toward the centre of its row — right-aligned in the left
 * column, left-aligned in the right — so it stays beside the connector and the
 * text keeps a straight outer edge, instead of leaving a ragged gap wherever a
 * milestone's copy is short.
 */
/*
 * LAYERING
 *
 * Both the photograph and the copy are given a position and a z-index so they
 * form their own layer above the connector. Without a position they are in-flow
 * boxes, which CSS paints BEFORE any positioned element — so the absolutely
 * positioned curve landed on top of them no matter what z-index it carried.
 *
 * Order, lowest first: connector (0) -> media and copy (2) -> nodes (3).
 */
.sud-tj__media,
.sud-tj__body {
	position: relative;
	z-index: 2;
}

.sud-tj__media {
	margin: 0;
	inline-size: clamp(260px, 26vw, 320px);
	max-inline-size: 100%;
	border-radius: var(--sud-radius-lg, 24px);
	overflow: hidden;
	background: var(--sud-surface-2, #F4F8F6);
	box-shadow: 0 10px 30px rgba(11, 31, 23, .08);
}

.sud-tj__item:nth-child(odd)  .sud-tj__media { justify-self: end; }
.sud-tj__item:nth-child(even) .sud-tj__media { justify-self: start; }

.sud-tj .sud-tj__img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 300 / 175;
	object-fit: cover;
}

.sud-tj__body { min-inline-size: 0; }

.sud-tj .sud-tj__badge {
	display: inline-grid;
	place-items: center;
	min-inline-size: 62px;
	padding: .3rem .9rem;
	margin-block-end: .8rem;

	font-family: var(--sud-font-display);
	font-size: var(--sud-text-sm);
	font-weight: 700;
	color: #fff;                              /* 8.6:1 on --sud-green-700 */
	background: var(--tj-green);
	border-radius: 999px;
}

.sud-tj .sud-tj__title {
	font-family: var(--sud-font-display);
	font-size: clamp(1.1rem, 1.5vw, 1.4rem);
	font-weight: 800;
	line-height: 1.25;
	color: var(--sud-ink);
	margin: 0 0 .7rem;
}

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

.sud-tj .sud-tj__point {
	position: relative;
	padding-inline-start: 1.15rem;
	margin-block-end: .5rem;

	font-family: var(--sud-font-body);
	font-size: clamp(.85rem, .95vw, .95rem);
	line-height: 1.65;
	color: var(--sud-body, #46574F);          /* 7.4:1 */
}

.sud-tj__point:last-child { margin-block-end: 0; }

.sud-tj__point::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .62em;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--sud-green-500, #43B649);
}

/* --------------------------------------------------------------------------
   RESPONSIVE

   Tablet and below: one column, image over copy, and the centre connector is
   replaced by a single rail down the left — the wave depends on two columns.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	/*
	 * Below tablet the rail becomes a horizontal, scrollable strip pinned under
	 * the header. A vertical rail here would eat a third of the width and leave
	 * the milestones unreadable, which is the usability problem the brief warns
	 * about — so the years stay reachable, just along the top instead.
	 */
	.sud-tj {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.sud-tj__years {
		position: sticky;
		inset-block-start: var(--sud-hd-h, 86px);
		z-index: 3;

		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: clamp(.75rem, 3vw, 1.5rem);

		max-block-size: none;
		overflow-y: visible;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x proximity;
		padding: .6rem .25rem;
		margin-block-end: clamp(1.5rem, 4vw, 2.5rem);
		-webkit-overflow-scrolling: touch;

		background: var(--sud-surface, #fff);
		border-block-end: 1px solid var(--tj-line);
	}

	/* The dot returns to sitting under its year rather than beside it. */
	.sud-tj__year { flex-direction: column; gap: 8px; }
	.sud-tj__year::after { order: 0; margin-inline: 0; }
	.sud-tj__year[aria-current="true"]::after { box-shadow: none; }

	.sud-tj__year { scroll-snap-align: center; }

	/* The rule and its end caps are sized to the viewport, not the scrollable
	   track, so they would float free once it overflows. */
	.sud-tj__years::before,
	.sud-tj__cap { display: none; }

	.sud-tj__item {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
		padding-block: clamp(1.25rem, 4vw, 2rem);
		padding-inline-start: 1.75rem;
	}

	/*
	 * Image first, then year, title and copy.
	 *
	 * The :nth-child(n) is doing real work — it is not decoration. The desktop
	 * swap above is `.sud-tj__item:nth-child(even) .sud-tj__media`, three
	 * selectors, and a plain `.sud-tj__item .sud-tj__media` is only two, so on
	 * EVEN milestones the desktop rule kept winning: the picture stayed in
	 * column 2 and the copy landed in column 1, which at this width computes to
	 * `0px 260px`. A zero-width column meant each bullet wrapped to roughly one
	 * character per line, and one 2013px milestone was left in a list whose
	 * other items measure 350-660px.
	 *
	 * Matching the specificity at three selectors, later in the file, settles
	 * it. justify-self already carried !important, which is why the alignment
	 * looked right while the placement was wrong.
	 */
	.sud-tj__item:nth-child(n) .sud-tj__media { grid-column: 1; grid-row: 1; justify-self: start !important; }
	.sud-tj__item:nth-child(n) .sud-tj__body  { grid-column: 1; grid-row: 2; }

	.sud-tj__item::after {
		inset-inline: 0 auto;
		inset-block: 0;
		inline-size: 0;
		border: 0;
		border-inline-start: var(--tj-w) solid var(--tj-line);
		border-radius: 0;
	}

	.sud-tj__item:first-child::after { inset-block-start: 0; }
	.sud-tj__item:last-child::after  { inset-block-end: 0; }

	.sud-tj__item::before {
		inset-inline: -5.5px auto;
		inset-block-start: 1.75rem;
		margin-block-start: 0;
	}
}

@media (max-width: 560px) {
	.sud-tj .sud-tj__img { aspect-ratio: 3 / 2; }
}

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

@media (prefers-reduced-motion: reduce) {
	.sud-tj__item,
	.sud-tj__item::before,
	.sud-tj .sud-tj__year,
	.sud-tj__year > span,
	.sud-tj__year::after { transition: none !important; }
	.sud-tj__item.is-active::before { transform: none; }
}

/* Every milestone at full strength on paper — the muting is an on-screen
   focusing device, not a statement about the content. */
@media print {
	.sud-tj__item { opacity: 1 !important; }
	.sud-tj__years { display: none; }
}