/* =========================================================================
   Custom Timeline — front-end styles
   Everything is namespaced under .ctl-timeline so it will not leak into,
   or be overridden by, the active theme. Typography inherits from the theme
   by default (see --ctl-font) so the timeline blends in naturally.

   The vertical line colour/thickness, node colour, number colour and item
   spacing are all driven by CSS variables that the admin dashboard
   (Timelines → Appearance) sets inline on the .ctl-timeline element.
   ========================================================================= */

.ctl-timeline {
	/* ---- Theming variables (overridden inline from the admin settings) ---- */
	--ctl-font: inherit;
	--ctl-accent-top: #9c5a3c;      /* line gradient start (darker copper) */
	--ctl-accent-bot: #d79a78;      /* line gradient end   (lighter copper) */
	--ctl-line-width: 3px;          /* line thickness (admin-controlled) */
	--ctl-track: rgba(0, 0, 0, 0.08); /* faint un-filled portion of the line */
	--ctl-progress: 1;              /* 0..1 scroll-fill amount (JS-controlled) */
	--ctl-node: #b56a45;            /* node dot fill */
	--ctl-ink: #2b2b2b;             /* titles & bold labels */
	--ctl-body: #555555;            /* paragraph text */
	--ctl-muted: #8a8a8a;           /* bullet descriptions */
	--ctl-ghost: #ededed;           /* huge faint number */
	--ctl-subtitle: #6a6a6a;

	/* Typography sizes (admin-controlled; default to responsive clamp() so
	   text scales smoothly between phone and desktop. Admins can override
	   with any CSS size or their own clamp() in the dashboard). */
	--ctl-number-size: clamp(48px, 8.5vw, 120px);
	--ctl-title-size: clamp(18px, 2.4vw, 26px);
	--ctl-subtitle-size: clamp(13px, 1.4vw, 15px);
	--ctl-body-size: clamp(14px, 1.1vw, 16px);

	/* Font families (admin-controlled; default to the theme font). */
	--ctl-title-font: inherit;
	--ctl-subtitle-font: inherit;
	--ctl-body-font: inherit;
	--ctl-number-font: inherit;

	/* Faded-number position offsets (admin-controlled, %). */
	--ctl-number-x: 0%;
	--ctl-number-y: -30%;

	--ctl-left-w: 30%;              /* width of the number/title column */
	--ctl-channel: 56px;           /* space between line and content (admin) */
	--ctl-item-gap: 84px;          /* vertical space between sections (admin) */

	position: relative;
	/* Own stacking context so the line's negative z-index stays behind the
	   cards/content but never slips behind the page background. */
	isolation: isolate;
	font-family: var(--ctl-font);
	max-width: 980px;
	margin: 0 auto;
	padding: 8px 0;
	box-sizing: border-box;
}

.ctl-timeline *,
.ctl-timeline *::before,
.ctl-timeline *::after {
	box-sizing: border-box;
}

/* ---- The continuous vertical line ----
   Two stacked layers on the same fixed, centred axis (translateX(-50%)), so
   changing the thickness never shifts the columns, dots, or alignment:
     ::before = faint full-height "track"
     ::after  = the smooth gradient that fills in top→down as you scroll
   The fill is revealed with clip-path so the gradient keeps its full scale
   (the colours stay consistent — they don't squash as the line grows). */
.ctl-timeline::before,
.ctl-timeline::after {
	content: "";
	position: absolute;
	top: 14px;
	bottom: 14px;
	left: calc(var(--ctl-left-w) + (var(--ctl-channel) / 2));
	width: var(--ctl-line-width);
	transform: translateX(-50%);
	border-radius: 999px;
	pointer-events: none;
	z-index: -1;   /* always behind the cards & content */
}

.ctl-timeline::before {
	background: var(--ctl-track);
}

.ctl-timeline::after {
	background: linear-gradient(to bottom, var(--ctl-accent-top), var(--ctl-accent-bot));
	clip-path: inset(0 0 calc((1 - var(--ctl-progress)) * 100%) 0);
}

/* Smooth, gentle fill animation only once JS has taken over (avoids a flash
   on load and keeps no-JS visitors on a fully-drawn gradient line). */
.ctl-timeline.ctl-fill-on::after {
	transition: clip-path 0.25s ease-out;
}

/* ---- One section ---- */
.ctl-item {
	position: relative;
	display: grid;
	grid-template-columns: var(--ctl-left-w) 1fr;
	column-gap: var(--ctl-channel);
	align-items: start;
}

.ctl-item + .ctl-item {
	margin-top: var(--ctl-item-gap);
}

/* ---- Per-bullet link ----
   Each bullet point can be its own separate link. The anchor fills the bullet
   so the whole line is one click target, while keeping the label/description
   colours intact. */
.ctl-point-link {
	display: block;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

/* Visible keyboard-focus ring around a focused bullet link. */
.ctl-point-link:focus-visible {
	outline: 2px solid var(--ctl-node);
	outline-offset: 4px;
	border-radius: 4px;
}

/* ---- Node dot sitting on the line ----
   Centred on the same axis as the line via translateX(-50%); its size is
   fixed and independent of the line thickness so the dots stay consistent. */
.ctl-node {
	position: absolute;
	top: 6px;
	left: calc(var(--ctl-left-w) + (var(--ctl-channel) / 2));
	width: 13px;
	height: 13px;
	transform: translateX(-50%);
	background: var(--ctl-node);
	border-radius: 50%;
	z-index: 1;
	transition: background-color 0.6s ease, box-shadow 0.6s ease;
}

/* When scroll animation is on, dots start muted and gently take on the
   accent colour as their section is revealed — a soft colour transition
   that tracks the scroll position. */
.ctl-timeline.ctl-anim-ready .ctl-node {
	background: #d8d3ce;
}

.ctl-timeline.ctl-anim-ready .ctl-item.ctl-in .ctl-node {
	background: var(--ctl-node);
}

/* ---- Left column: title with the big faded number BEHIND/UNDER it ---- */
.ctl-left {
	text-align: right;
	padding-top: 2px;
}

/* Anchor for the number-behind-title overlap */
.ctl-head {
	position: relative;
	display: inline-block;
}

/* Large faint number sits behind the title and peeks out underneath it */
.ctl-number {
	position: absolute;
	right: 0;
	top: 50%;
	/* Position is fully admin-controllable via the X / Y offset variables. */
	transform: translate(var(--ctl-number-x, 0%), var(--ctl-number-y, -30%));
	z-index: 0;
	font-family: var(--ctl-number-font, inherit);
	font-size: var(--ctl-number-size);
	font-weight: 700;
	line-height: 0.8;
	color: var(--ctl-ghost);
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

/* Title sits on top of the number */
.ctl-title {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: var(--ctl-title-font, inherit);
	font-size: var(--ctl-title-size);
	font-weight: 600;
	letter-spacing: 0.28em;
	color: var(--ctl-ink);
	text-transform: uppercase;
	line-height: 1.25;
}

.ctl-subtitle {
	position: relative;
	z-index: 1;
	margin: 46px 0 0 0;   /* clears the lower part of the big number */
	font-family: var(--ctl-subtitle-font, inherit);
	font-size: var(--ctl-subtitle-size);
	line-height: 1.55;
	color: var(--ctl-subtitle);
	font-weight: 400;
}

/* ---- Right column: content ---- */
.ctl-content {
	padding-top: 2px;
	max-width: 560px;
	font-family: var(--ctl-body-font, inherit);
}

.ctl-problem,
.ctl-solution {
	margin: 0 0 14px 0;
	font-size: var(--ctl-body-size);
	line-height: 1.7;
	color: var(--ctl-body);
}

.ctl-problem strong,
.ctl-solution strong {
	color: var(--ctl-ink);
	font-weight: 600;
}

.ctl-solution {
	margin-bottom: 18px;
}

/* ---- Bullet points ---- */
.ctl-points {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ctl-point {
	position: relative;
	margin: 0 0 12px 0;
	padding-left: 22px;
	font-size: var(--ctl-body-size);
	line-height: 1.6;
	/* Each bullet animates on its own — smooth, professional easing. */
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Hover (desktop) and focus-within (keyboard) nudge a single bullet right.
   The arrow is a ::before of .ctl-point, so it travels along with it. */
.ctl-point:hover,
.ctl-point:focus-within {
	transform: translateX(8px);
}

/* Touch devices: give the same nudge as tactile feedback on tap. */
@media (hover: none) {
	.ctl-point:active {
		transform: translateX(8px);
	}
}

.ctl-point::before {
	content: "\2192";              /* → arrow */
	position: absolute;
	left: 0;
	top: 0;
	color: var(--ctl-ink);
	font-weight: 600;
}

.ctl-point-label {
	color: var(--ctl-ink);
	font-weight: 600;
	transition: color 0.2s ease;
}

/* A linked bullet tints its label on hover/focus to signal it is clickable. */
.ctl-point--linked:hover .ctl-point-label,
.ctl-point--linked:focus-within .ctl-point-label {
	color: var(--ctl-node);
}

.ctl-point-sep,
.ctl-point-desc {
	color: var(--ctl-muted);
	font-weight: 400;
}

/* =========================================================================
   Scroll-reveal animation (progressive enhancement).
   The hidden start-state ONLY applies after the JS adds .ctl-anim-ready to
   the timeline — so if JS is disabled, content is always visible. The JS then
   adds .ctl-in (via IntersectionObserver) to fade-and-rise each item in, with
   a small per-item transition-delay for a gentle stagger.
   ========================================================================= */
.ctl-timeline.ctl-anim-ready .ctl-item {
	opacity: 0;
	transform: translateY(34px) scale(0.985);
	filter: blur(6px);
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
		filter 0.7s ease;
	will-change: opacity, transform, filter;
}

.ctl-timeline.ctl-anim-ready .ctl-item.ctl-in {
	opacity: 1;
	transform: none;
	filter: none;
}

/* Respect users who prefer reduced motion: show everything instantly. */
@media (prefers-reduced-motion: reduce) {
	.ctl-timeline.ctl-anim-ready .ctl-item {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
	/* Keep the gradient line fully drawn; no scroll-fill animation. */
	.ctl-timeline {
		--ctl-progress: 1 !important;
	}
	.ctl-timeline::after {
		transition: none !important;
	}
}

/* =========================================================================
   Responsive — tablet & mobile: line collapses to a left rail.
   ========================================================================= */
@media (max-width: 768px) {
	.ctl-timeline {
		--ctl-rail: 10px;
		padding: 4px 0;
	}

	.ctl-timeline::before,
	.ctl-timeline::after {
		left: var(--ctl-rail);
		top: 8px;
		bottom: 8px;
	}

	.ctl-item {
		display: block;
		padding-left: 38px;
	}

	.ctl-item + .ctl-item {
		margin-top: 48px;
	}

	.ctl-node {
		left: var(--ctl-rail);
		top: 4px;
	}

	.ctl-left {
		text-align: left;
		margin-bottom: 16px;
	}

	.ctl-head {
		display: block;
	}

	.ctl-number {
		right: auto;
		left: 0;
		/* Size comes from the admin --ctl-number-size (already responsive). */
	}

	.ctl-title {
		margin-top: 0;
		letter-spacing: 0.22em;
	}

	.ctl-subtitle {
		margin-top: 38px;
	}

	.ctl-content {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.ctl-timeline {
		--ctl-rail: 8px;
	}
	.ctl-item {
		padding-left: 28px;
	}
	.ctl-item + .ctl-item {
		margin-top: 36px;
	}
	.ctl-title {
		letter-spacing: 0.14em;
	}
	.ctl-subtitle {
		margin-top: 30px;
	}
	/* Slightly slimmer line on tiny screens for a cleaner look. */
	.ctl-timeline::before,
	.ctl-timeline::after {
		width: max(2px, calc(var(--ctl-line-width) - 1px));
	}
}

/* Respect users who prefer no animations / high contrast — nothing animates,
   but we keep the line visible in forced-colors mode. */
@media (forced-colors: active) {
	.ctl-timeline::before,
	.ctl-node {
		forced-color-adjust: none;
	}
}