/*
 * nsemm/timeline frontend (and shared editor) styles.
 *
 * A branded, vertical milestone timeline. A hairline spine runs down the
 * section; gold node dots mark each milestone. White milestone cards stagger
 * left and right of the centre spine on desktop and stack single-column (spine
 * on the left) on mobile. Each card carries a gold date, a title and a short
 * description. Matches the home-v6 brand card language (the white-on-sandy
 * .svc / .fp-card / .t-card look).
 *
 * Per-block CSS loads independently, so the local-var map that ties our names
 * to the WP presets lives at the top (Brand-Sync recolours everything through
 * the presets). No brand hex is hard-coded; alpha and shadows use color-mix.
 *
 * Dark-mode note: the card drop-shadow is computed here with
 * color-mix(in srgb, var(--midnight) N%, transparent). In light mode --midnight
 * is near-black (a correct dark shadow); in dark mode --midnight flips to a
 * sandy-white, which would glow as a white halo, so the theme's dark.css
 * re-pins the .nsemm-timeline card/spine shadow + border to a #000-based mix
 * (same fix applied to fp-card / svc / t-card). Do NOT switch this base rule to
 * #000 - it must use --midnight so light mode stays correct and dark.css owns
 * the override.
 *
 * Every selector is namespaced under .nsemm-timeline so nothing leaks onto
 * WordPress body or template-part elements.
 */
:root {
	--blue: var(--wp--preset--color--university-blue);
	--gold: var(--wp--preset--color--knowledge-gold);
	--teal: var(--wp--preset--color--discovery-teal);
	--brown: var(--wp--preset--color--foundational-brown);
	--sandy: var(--wp--preset--color--sandy-brown);
	--midnight: var(--wp--preset--color--midnight);
	--bg: var(--wp--preset--color--white);
	--r-pill: 9999px;
	--r-card: 16px;
	--body: var(--wp--preset--font-family--readex-pro);
	--head: var(--wp--preset--font-family--sora);

	/* Geometry. --tl-rail is the spine offset on mobile / stacked layout. */
	--tl-rail: 28px;
	--tl-dot: 18px;
	--tl-line: 2px;
}

/* Page container: ~90vw, mirrors the wireframe .page (max-width 1320px, gutters). */
.nsemm-timeline {
	padding: 0 40px;
	max-width: 1320px;
	margin: 0 auto;
}

/* Section header (eyebrow + heading + intro). */
.nsemm-timeline .tl-header {
	margin: 0 0 48px;
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}
.nsemm-timeline .tl-eyebrow {
	font-family: var(--head);
	font-size: 12px;
	font-weight: 700;
	color: var(--blue);
	text-transform: uppercase;
	letter-spacing: .14em;
	margin: 0 0 10px;
}
.nsemm-timeline .tl-heading {
	font-family: var(--head);
	font-size: 32px;
	font-weight: 700;
	color: var(--blue);
	line-height: 1.2;
	margin: 0 0 16px;
}
.nsemm-timeline .tl-intro {
	font-family: var(--body);
	font-size: 17px;
	color: var(--midnight);
	opacity: .82;
	line-height: 1.7;
	margin: 0;
}

/* ── The timeline list ────────────────────────────────────────────────────
   The <ol> is the spine container. A pseudo-element draws the vertical line.
   On desktop the line is centred; cards alternate left/right of it. On mobile
   the line sits on the left rail and all cards align to its right. */
.nsemm-timeline .tl-list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The spine. Hairline gradient that fades in/out at the ends so it does not
   collide hard with the first/last node. */
.nsemm-timeline .tl-list::before {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: var(--tl-line);
	background: linear-gradient(
		to bottom,
		transparent 0,
		color-mix(in srgb, var(--gold) 55%, transparent) 6%,
		color-mix(in srgb, var(--gold) 55%, transparent) 94%,
		transparent 100%
	);
	border-radius: var(--r-pill);
}

/* Each milestone row. position:relative for its node dot; min-height keeps the
   alternating rhythm even for short cards. */
.nsemm-timeline .tl-item {
	position: relative;
	margin: 0;
	padding: 0;
	min-height: 40px;
}
.nsemm-timeline .tl-item + .tl-item {
	margin-top: 36px;
}

/* The gold node dot, centred on the spine. A soft ring lifts it off the line. */
.nsemm-timeline .tl-node {
	position: absolute;
	top: 22px;
	left: 50%;
	width: var(--tl-dot);
	height: var(--tl-dot);
	transform: translateX(-50%);
	border-radius: var(--r-pill);
	background: var(--gold);
	box-shadow: 0 0 0 4px var(--bg),
		0 0 0 6px color-mix(in srgb, var(--gold) 30%, transparent);
	z-index: 1;
}

/* The milestone card: white on the sandy ground, 16px radius, soft shadow
   (mirrors .t-card / .fp-card / .svc). */
.nsemm-timeline .tl-card {
	position: relative;
	background: var(--bg);
	border: 1px solid color-mix(in srgb, var(--midnight) 6%, transparent);
	border-radius: var(--r-card);
	box-shadow: 0 10px 36px color-mix(in srgb, var(--midnight) 8%, transparent);
	padding: 22px 26px;
	transition: box-shadow .3s ease, transform .3s ease;
}
.nsemm-timeline .tl-card:hover {
	box-shadow: 0 16px 44px color-mix(in srgb, var(--midnight) 12%, transparent);
	transform: translateY(-3px);
}

/* A small connector "beak" linking each card to the spine, tinted like the
   card so it reads as one piece. Drawn per-side in the desktop media query. */
.nsemm-timeline .tl-card::before {
	content: "";
	position: absolute;
	top: 24px;
	width: 12px;
	height: 12px;
	background: var(--bg);
	border: 1px solid color-mix(in srgb, var(--midnight) 6%, transparent);
	transform: rotate(45deg);
	display: none;
}

.nsemm-timeline .tl-date {
	font-family: var(--head);
	font-size: 13px;
	font-weight: 700;
	color: var(--blue);
	text-transform: uppercase;
	letter-spacing: .08em;
	margin: 0 0 6px;
}
.nsemm-timeline .tl-title {
	font-family: var(--head);
	font-size: 19px;
	font-weight: 700;
	color: var(--blue);
	line-height: 1.3;
	margin: 0 0 10px;
}
.nsemm-timeline .tl-body {
	font-family: var(--body);
	font-size: 15px;
	color: var(--midnight);
	opacity: .82;
	line-height: 1.65;
	margin: 0;
}

/* Closing line beneath the spine, centred, lightly emphasised. */
.nsemm-timeline .tl-outro {
	font-family: var(--body);
	font-size: 17px;
	color: var(--midnight);
	opacity: .82;
	line-height: 1.7;
	text-align: center;
	max-width: 760px;
	margin: 48px auto 0;
}

/* Scroll-reveal initial state (theme global JS adds .visible). Scoped here. */
.nsemm-timeline .reveal {
	opacity: 0.08;
	transform: translateY(28px);
	transition: opacity .65s ease, transform .65s ease;
}
.nsemm-timeline .reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

/* ── Editor-only repeater chrome ───────────────────────────────────────────
   Per-card controls (move / remove) and the add row only appear in the editor
   (the front end never emits them). Keep them quiet so the editing surface
   still reads like the rendered card. */
.nsemm-timeline .tl-card-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
	padding-top: 10px;
	border-top: 1px solid color-mix(in srgb, var(--midnight) 8%, transparent);
}
.nsemm-timeline .tl-add-row {
	margin-top: 24px;
	display: flex;
	justify-content: center;
}

/* ── Desktop: alternating two-column timeline (centre spine) ──────────────── */
@media (min-width: 781px) {
	/* Each row is a 2-column grid split by the centre spine; the card lands in
	   one half and the other half is empty. Default (even rows) = card on the
	   right; odd rows flip the card to the left. The node stays centred. */
	.nsemm-timeline .tl-item {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 56px;
	}

	/* nth-child(odd) = 1st, 3rd, 5th … milestone -> card on the LEFT. */
	.nsemm-timeline .tl-item:nth-child(odd) .tl-card {
		grid-column: 1;
		text-align: right;
	}
	.nsemm-timeline .tl-item:nth-child(odd) .tl-card::before {
		right: -7px;
		border-left: 0;
		border-bottom: 0;
		display: block;
	}

	/* nth-child(even) = 2nd, 4th … milestone -> card on the RIGHT. */
	.nsemm-timeline .tl-item:nth-child(even) .tl-card {
		grid-column: 2;
		text-align: left;
	}
	.nsemm-timeline .tl-item:nth-child(even) .tl-card::before {
		left: -7px;
		border-right: 0;
		border-top: 0;
		display: block;
	}
}

/* ── Mobile / stacked: single column, spine on the left rail ──────────────── */
@media (max-width: 780px) {
	.nsemm-timeline {
		padding: 0 20px;
	}
	.nsemm-timeline .tl-heading {
		font-size: 26px;
	}

	/* Spine moves from the centre to the left rail. */
	.nsemm-timeline .tl-list::before {
		left: var(--tl-rail);
		transform: none;
	}
	.nsemm-timeline .tl-node {
		left: var(--tl-rail);
	}

	/* Cards clear the rail and sit to its right, full width. */
	.nsemm-timeline .tl-item {
		padding-left: calc(var(--tl-rail) + 28px);
	}
	.nsemm-timeline .tl-card {
		text-align: left;
		padding: 18px 20px;
	}
	.nsemm-timeline .tl-card::before {
		left: -7px;
		border-right: 0;
		border-top: 0;
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nsemm-timeline .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.nsemm-timeline .tl-card {
		transition: none;
	}
}

/* Editor carve-out (2026-06-21): the scroll-reveal `.visible` class is added by
   the theme’s FRONTEND JS, which does not run in the block editor — so `.reveal`
   would sit at its hidden initial opacity and the block looks "disappeared"
   while editing (e.g. when adding a button link). Force it fully visible inside
   the editor canvas only; the frontend animation is unchanged. */
.editor-styles-wrapper .reveal { opacity: 1 !important; transform: none !important; }