/*
 * AH Journey: the career map (white card) with its routes, and the career: numbered station cards
 * across the section (stations layout, one under the other on phones) with the academic card beside
 * the map, or the older timeline beside the map. The SVG keeps its own LTR geometry in both
 * languages. Pings pulse only while the widget is on screen (.is-live from journey.js); phones get
 * larger map labels and thicker strokes.
 */
.ah-journey {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
	align-items: start;
	gap: 44px;
	font-family: var(--ah-f-body);
	font-size: 17px;
	line-height: 1.75;
	color: var(--ah-ink);
	--ah-journey-line: var(--ah-line);
	--ah-journey-accent: var(--ah-ink-gold);
	--ah-journey-muted: var(--ah-muted);
	--ah-journey-dot: var(--ah-ivory);
}
.ah-journey.ah-on-dark {
	color: var(--ah-on-navy);
	--ah-journey-line: var(--ah-line-navy);
	--ah-journey-accent: var(--ah-gold-hi);
	--ah-journey-muted: var(--ah-on-navy-muted);
	--ah-journey-dot: var(--ah-navy);
}
.ah-journey.ah-journey--timeline.ah-journey--map-end .ah-journey__map { order: 2; }
.ah-journey.ah-journey--timeline.ah-journey--map-end { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }

/* stations layout: the cards across the section, then the map beside the academic card */
.ah-journey.ah-journey--stations { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.ah-journey .ah-journey__stations {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.ah-journey .ah-journey__st {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 24px 22px 22px;
	border: 1px solid var(--ah-card-line);
	border-radius: var(--ah-r-card);
	background: var(--ah-card);
	box-shadow: var(--ah-shadow);
	color: var(--ah-ink);
	transition: transform .5s var(--ah-ease), box-shadow .5s var(--ah-ease);
}
.ah-journey .ah-journey__st::before {
	content: "";
	position: absolute;
	top: -1px;
	inset-inline: 22px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--ah-gold);
	transform: scaleX(.18);
	transform-origin: var(--ah-journey-from, left);
	transition: transform .6s var(--ah-ease);
}
[dir="rtl"] .ah-journey .ah-journey__st::before { --ah-journey-from: right; }
.ah-journey .ah-journey__st:hover { transform: translateY(-4px); box-shadow: var(--ah-shadow-hi); }
.ah-journey .ah-journey__st:hover::before,
.ah-journey .ah-journey__st.is-now::before { transform: scaleX(1); }
.ah-motion .ah-journey .ah-journey__st.ah-rv--up { transition-delay: calc(var(--i, 0) * 110ms); }
.ah-journey .ah-journey__no {
	font-family: var(--ah-f-mono);
	font-weight: 500;
	font-size: .9rem;
	line-height: 1;
	color: var(--ah-ink-gold);
}
.ah-journey .ah-journey__st-t {
	margin: 0;
	font-family: var(--ah-f-display);
	font-weight: 800;
	font-size: clamp(1.12rem, 1.5vw, 1.3rem);
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--ah-ink);
	text-wrap: balance;
}
.ah-journey .ah-journey__st-x { flex: 1 1 auto; margin: 0; font-size: 1rem; line-height: 1.85; color: #2E2E2E; }
.ah-journey .ah-journey__st-co {
	align-self: flex-start;
	unicode-bidi: isolate;
	padding-top: 12px;
	border-top: 1px solid var(--ah-card-line);
	width: 100%;
	font-family: var(--ah-f-en);
	font-weight: 600;
	font-size: .84rem;
	line-height: 1.5;
	color: var(--ah-soft);
}
.ah-journey .ah-journey__row {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr);
	align-items: stretch;
	gap: 18px;
}
.ah-journey .ah-journey__acad {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: 26px 24px;
	border-radius: var(--ah-r-card);
	background: var(--ah-navy);
	color: var(--ah-on-navy);
	box-shadow: var(--ah-shadow);
}
.ah-journey .ah-journey__acad-t {
	margin: 0;
	font-family: var(--ah-f-display);
	font-weight: 800;
	font-size: clamp(1.15rem, 1.5vw, 1.3rem);
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--ah-gold-hi);
}
.ah-journey .ah-journey__acad-l { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ah-journey .ah-journey__acad-l li {
	position: relative;
	padding-inline-start: 20px;
	font-size: .98rem;
	line-height: 1.8;
	color: #DADDE6;
	color: color-mix(in srgb, var(--ah-on-navy) 85%, var(--ah-on-navy-muted));
}
.ah-journey .ah-journey__acad-l li::before {
	content: "";
	position: absolute;
	top: .72em;
	inset-inline-start: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ah-gold);
}
.ah-journey .ah-journey__acad-l b { font-weight: 700; color: var(--ah-on-navy); }

/* map card */
.ah-journey .ah-journey__map {
	margin: 0;
	padding: 12px;
	border: 1px solid var(--ah-card-line);
	border-radius: var(--ah-r-card);
	background: var(--ah-card);
	box-shadow: var(--ah-shadow);
	color: var(--ah-ink);
}
.ah-journey .ah-journey__svg { display: block; width: 100%; height: auto; overflow: hidden; direction: ltr; }
.ah-journey .ah-journey__grat { fill: none; stroke: #E5E2D9; stroke: color-mix(in srgb, var(--ah-line) 75%, var(--ah-paper)); stroke-width: 1; }
.ah-journey .ah-journey__seaf { fill: rgba(15, 27, 60, .07); stroke: rgba(15, 27, 60, .22); stroke-width: 1; }
.ah-journey .ah-journey__sea {
	font-family: var(--ah-f-hand);
	font-weight: 700;
	font-size: 21px;
	fill: #BFB6A2;
	fill: color-mix(in srgb, var(--ah-ink-gold) 30%, var(--ah-line));
	text-anchor: middle;
}
.ah-journey .ah-journey__lab {
	font-family: var(--ah-f-display);
	font-weight: 600;
	font-size: 22px;
	fill: #C9C2B2;
	fill: color-mix(in srgb, var(--ah-ink-gold) 20%, var(--ah-line));
	text-anchor: middle;
}
.ah-journey .ah-journey__route { fill: none; stroke: var(--ah-gold); stroke-width: 2.6; stroke-linecap: round; }
.ah-motion .ah-journey .ah-journey__route.ah-draw { transition: stroke-dashoffset 2.4s var(--ah-ease) calc(.3s + var(--d, 0ms)); }
.ah-journey .ah-journey__dot { fill: var(--ah-navy); }
.ah-journey .ah-journey__ping {
	fill: none;
	stroke: var(--ah-gold);
	stroke-width: 1.5;
	transform-box: fill-box;
	transform-origin: center;
}
.ah-journey .ah-journey__cname {
	font-family: var(--ah-f-display);
	font-weight: 700;
	font-size: 18px;
	fill: var(--ah-ink);
	text-anchor: middle;
}
.ah-journey .ah-journey__cyear {
	font-family: var(--ah-f-mono);
	font-weight: 500;
	font-size: 12px;
	fill: var(--ah-ink-gold);
	text-anchor: middle;
}
.ah-journey .ah-journey__plane { fill: var(--ah-navy); pointer-events: none; }
.ah-journey .ah-journey__fn { display: block; margin: 0; padding: 6px 8px 2px; }
.ah-journey .ah-journey__map .ah-journey__fn { color: var(--ah-soft); }

@media (prefers-reduced-motion: no-preference) {
	.ah-journey.is-live .ah-journey__ping { animation: ah-journey-ping 2.6s ease-out infinite; }
	.ah-journey.is-live .ah-journey__ping { animation-delay: calc(var(--k, 0) * -.52s); }
}
@keyframes ah-journey-ping {
	0% { transform: scale(.6); opacity: 1; }
	100% { transform: scale(2.6); opacity: 0; }
}

/* timeline */
.ah-journey .ah-journey__side { display: grid; gap: 6px; min-width: 0; }
.ah-journey .ah-journey__tl {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-inline-start: 1px solid var(--ah-journey-line);
}
.ah-journey .ah-journey__role { position: relative; display: grid; gap: 2px; margin: 0; padding: 0 22px 24px; }
.ah-journey .ah-journey__role::before {
	content: "";
	position: absolute;
	top: 8px;
	inset-inline-start: -5px;
	width: 9px;
	height: 9px;
	border: 1.5px solid var(--ah-journey-accent);
	border-radius: 50%;
	background: var(--ah-journey-dot);
	box-sizing: border-box;
	transition: transform .4s var(--ah-spring), background-color .3s;
}
.ah-journey .ah-journey__role:hover::before { transform: scale(1.35); }
.ah-journey .ah-journey__role.is-now::before { border-color: var(--ah-gold); background: var(--ah-gold); box-shadow: 0 0 0 4px rgba(197, 165, 114, .22); }
.ah-journey .ah-journey__yr {
	justify-self: start;
	unicode-bidi: isolate;
	font-family: var(--ah-f-mono);
	font-weight: 400;
	font-size: .74rem;
	line-height: 1.6;
	color: var(--ah-journey-accent);
}
.ah-journey .ah-journey__yr.ah-journey__yr--ar { font-family: var(--ah-f-body); font-weight: 700; font-size: .8rem; }
.ah-journey .ah-journey__co {
	justify-self: start;
	unicode-bidi: isolate;
	font-family: var(--ah-f-en);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.5;
	color: inherit;
}
.ah-journey .ah-journey__co.ah-journey__co--ar { font-family: var(--ah-f-body); font-weight: 700; }
.ah-journey .ah-journey__txt { font-size: .9rem; line-height: 1.75; color: var(--ah-journey-muted); }
.ah-journey .ah-journey__edu {
	margin: 0;
	padding: 16px;
	border: 1px dashed var(--ah-journey-line);
	border-radius: 6px;
	font-size: .92rem;
	line-height: 1.75;
	color: var(--ah-journey-muted);
}
.ah-journey .ah-journey__edu b { font-weight: 700; color: var(--ah-ink); }
.ah-journey.ah-on-dark .ah-journey__edu b { color: var(--ah-on-navy); }

/* the roles rise one by one with the timeline */
.ah-motion .ah-journey .ah-journey__side.ah-rv .ah-journey__role { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ah-ease), transform .7s var(--ah-ease); transition-delay: calc(.15s + var(--i, 0) * 90ms); }
.ah-motion .ah-journey .ah-journey__side.ah-rv.seen .ah-journey__role { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.ah-journey .ah-journey__role::before,
	.ah-journey .ah-journey__st,
	.ah-journey .ah-journey__st::before { transition: none; }
	.ah-journey .ah-journey__st:hover { transform: none; }
	.ah-motion .ah-journey .ah-journey__side.ah-rv .ah-journey__role { opacity: 1; transform: none; transition: none; }
}

/* small laptops and tablets: the map is narrower, so its labels grow a little */
@media (max-width: 1200px) {
	.ah-journey .ah-journey__cname { font-size: 22px; }
	.ah-journey .ah-journey__cyear { font-size: 15px; }
	.ah-journey .ah-journey__lab { font-size: 26px; }
	.ah-journey .ah-journey__sea { font-size: 24px; }
	.ah-journey .ah-journey__route { stroke-width: 3.2; }
}
@media (max-width: 1200px) {
	.ah-journey .ah-journey__stations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
	.ah-journey,
	.ah-journey.ah-journey--timeline.ah-journey--map-end { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.ah-journey.ah-journey--timeline.ah-journey--map-end .ah-journey__map { order: 0; }
	.ah-journey .ah-journey__row { grid-template-columns: minmax(0, 1fr); }
}
/* phones: the map is a third of its desktop size, so labels and strokes grow inside the SVG */
@media (max-width: 767px) {
	.ah-journey { font-size: 16.5px; }
	.ah-journey .ah-journey__stations { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.ah-journey .ah-journey__st { padding: 20px 18px 18px; }
	.ah-journey .ah-journey__map { padding: 8px; }
	.ah-journey .ah-journey__cname { font-size: 34px; }
	.ah-journey .ah-journey__cyear { font-size: 22px; }
	.ah-journey .ah-journey__lab { font-size: 38px; }
	.ah-journey .ah-journey__sea { font-size: 30px; }
	.ah-journey .ah-journey__route { stroke-width: 5; }
	.ah-journey .ah-journey__seaf,
	.ah-journey .ah-journey__grat { stroke-width: 2; }
	.ah-journey .ah-journey__dot { r: 12px; }
	.ah-journey .ah-journey__ping { r: 15px; stroke-width: 3; }
}