/**
 * IW Timeline
 *
 * Every tunable is a custom property set by the widget's Elementor controls,
 * so the layout can be restyled without touching this file.
 *
 * Structure:
 *   .iw-timeline
 *     .iw-timeline-line        the rail (track + progress fill)
 *     .iw-timeline-items
 *       .iw-timeline-item      one row: marker + card
 *         .iw-timeline-marker  the icon sitting on the rail
 *         .iw-timeline-card    the content block
 */

.iw-timeline {
	--iw-tl-gap: 64px;
	--iw-tl-card-width: 42%;
	--iw-tl-line-width: 3px;
	--iw-tl-line-color: rgba(0, 0, 0, 0.12);
	--iw-tl-line-progress: currentColor;
	--iw-tl-marker-size: 80px;
	--iw-tl-marker-icon-size: 45px;
	--iw-tl-cap-size: var(--iw-tl-marker-size);
	--iw-tl-marker-bg: transparent;
	--iw-tl-rail-gap: 48px;
	--iw-tl-cap-offset: 0px;
	--iw-tl-cap-gap: var(--iw-tl-gap);

	position: relative;
	width: 100%;
}

/* ---------- rail ---------- */

/* The rail spans from the first marker to the LAST one. Letting it run to
 * the bottom of the widget leaves a dangling line below the final card,
 * which reads as part of whatever section follows. --iw-tl-line-end is set
 * by timeline.js from the last marker's centre. */
.iw-timeline-line {
	position: absolute;
	top: 0;
	bottom: var(--iw-tl-line-end, 0px);
	width: var(--iw-tl-line-width);
	background-color: var(--iw-tl-line-color);
}

.iw-timeline--center .iw-timeline-line {
	left: 50%;
	transform: translateX(-50%);
}

.iw-timeline--left .iw-timeline-line {
	left: calc(var(--iw-tl-marker-size) / 2 - var(--iw-tl-line-width) / 2);
}

.iw-timeline-line-progress {
	width: 100%;
	height: 0;
	background-color: var(--iw-tl-line-progress);
}

/* With animation off, the rail simply reads as "complete". */
.iw-timeline:not(.iw-timeline--animate) .iw-timeline-line-progress {
	height: 100%;
}

.iw-timeline--animate .iw-timeline-line-progress {
	transition: height 120ms linear;
	will-change: height;
}

/* ---------- items ---------- */

.iw-timeline-items {
	display: flex;
	flex-direction: column;
	gap: var(--iw-tl-gap);
}

.iw-timeline-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	min-height: var(--iw-tl-marker-size);
}

/* Centre layout: the marker sits on the rail, the card to one side. */
.iw-timeline--center .iw-timeline-item {
	justify-content: center;
}

/* The marker is centred on the FULL height of the card -- eyebrow, heading
 * and body together -- not parked at a fixed offset. A fixed value lands on
 * the paragraph and drifts as soon as a heading wraps to another line.
 * The item is a flex row, so `align-self: center` does the centring and the
 * marker is lifted out of the flow horizontally with a negative margin. */
.iw-timeline--center .iw-timeline-marker {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	/* Above the rail, and above page decorations that sit at z-index 2
	 * (e.g. the .vertical-connector graphic on the Find Your Path pages). */
	z-index: 3;
}

.iw-timeline--center .iw-timeline-card {
	width: var(--iw-tl-card-width);
}

/* Cards are positioned FROM THE RAIL outwards, not pinned to the container
 * edge. `margin: auto` would push them to the outside and make the rail gap
 * purely cosmetic padding inside the card, which is not what it should mean. */
.iw-timeline--center .iw-timeline-item--right .iw-timeline-card {
	margin-left: calc(50% + var(--iw-tl-rail-gap));
	margin-right: 0;
}

.iw-timeline--center .iw-timeline-item--left .iw-timeline-card {
	margin-right: calc(50% + var(--iw-tl-rail-gap));
	margin-left: 0;
	text-align: right;
}

/* A marker with no card still needs to occupy the row. */
/* The cap sits below the section's intro copy, not flush with the top of
 * the widget. Both halves are set from the Start Cap controls. */
.iw-timeline-item--marker-only {
	justify-content: center;
	min-height: var(--iw-tl-cap-size);
	padding-top: var(--iw-tl-cap-offset);
	padding-bottom: var(--iw-tl-cap-gap);
}

/* The rail must start AT the cap, not above it: the cap's top padding is
 * part of the widget, so an un-inset line would be drawn through the intro
 * copy sitting above the timeline. */
.iw-timeline--center:has(> .iw-timeline-items > .iw-timeline-item--marker-only:first-child) .iw-timeline-line {
	top: calc(var(--iw-tl-cap-offset) + var(--iw-tl-cap-size) / 2);
}

.iw-timeline--center .iw-timeline-item--marker-only .iw-timeline-marker {
	position: relative;
	left: auto;
	top: auto;
	transform: none;
}

/* ---------- marker ---------- */

.iw-timeline-marker {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--iw-tl-marker-size);
	height: var(--iw-tl-marker-size);
	border-radius: 999px;
	background-color: var(--iw-tl-marker-bg);
	overflow: hidden;
}

.iw-timeline-marker svg,
.iw-timeline-marker img {
	width: var(--iw-tl-marker-icon-size);
	height: var(--iw-tl-marker-icon-size);
	display: block;
}

/* A marker-only cap is the full marker size with no inner padding — it is
 * the artwork itself (the green map pin) rather than an icon in a circle. */
.iw-timeline-item--marker-only .iw-timeline-marker {
	width: var(--iw-tl-cap-size);
	height: var(--iw-tl-cap-size);
	background-color: transparent;
}

.iw-timeline-item--marker-only .iw-timeline-marker svg,
.iw-timeline-item--marker-only .iw-timeline-marker img {
	width: 100%;
	height: 100%;
}

.iw-timeline-marker i {
	font-size: calc(var(--iw-tl-marker-size) / 2.5);
	line-height: 1;
}

/* ---------- card ---------- */

.iw-timeline-card {
	position: relative;
	min-width: 0;
}

.iw-timeline-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* A left-side card is right-aligned as a block, but its text reads
 * left-aligned — matching the original. */
.iw-timeline--center .iw-timeline-item--left .iw-timeline-eyebrow,
.iw-timeline--center .iw-timeline-item--left .iw-timeline-heading,
.iw-timeline--center .iw-timeline-item--left .iw-timeline-content {
	text-align: left;
}

.iw-timeline-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
}

.iw-timeline-heading {
	margin: 0.2em 0 0.4em;
}

.iw-timeline-content > *:last-child {
	margin-bottom: 0;
}

/* ---------- scroll reveal ---------- */

.iw-timeline--animate .iw-timeline-item {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 500ms ease, transform 500ms ease;
}

.iw-timeline--animate .iw-timeline-item.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.iw-timeline--animate .iw-timeline-item {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.iw-timeline--animate .iw-timeline-line-progress {
		transition: none;
	}
}

/* ---------- stacked (narrow) ---------- */

.iw-timeline.is-stacked .iw-timeline-line {
	left: calc(var(--iw-tl-marker-size) / 2 - var(--iw-tl-line-width) / 2);
	transform: none;
}

.iw-timeline.is-stacked .iw-timeline-item,
.iw-timeline--left .iw-timeline-item {
	justify-content: flex-start;
	gap: 24px;
}

.iw-timeline.is-stacked .iw-timeline-marker,
.iw-timeline--left .iw-timeline-marker {
	position: relative;
	left: auto;
	top: auto;
	transform: none;
}

/* In the stacked layouts the rail runs down the centre of a normal (80px)
 * marker. The start cap may be larger, so left-aligning it would push
 * its centre off the rail by half the size difference — centre it on the
 * rail explicitly instead. */
.iw-timeline.is-stacked .iw-timeline-item--marker-only,
.iw-timeline--left .iw-timeline-item--marker-only {
	justify-content: flex-start;
}

.iw-timeline.is-stacked .iw-timeline-item--marker-only .iw-timeline-marker,
.iw-timeline--left .iw-timeline-item--marker-only .iw-timeline-marker {
	margin-left: calc( ( var(--iw-tl-marker-size) - var(--iw-tl-cap-size) ) / 2 );
}

.iw-timeline.is-stacked .iw-timeline-card,
.iw-timeline--left .iw-timeline-card {
	width: auto;
	flex: 1 1 auto;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
	text-align: left;
}

/* ---------- phone ----------
 *
 * Marker sizing is handled by the widget's responsive Marker Size / Icon
 * Size controls (80/45 desktop, 50/30 mobile), because Elementor's
 * per-element CSS outranks anything set here. Only spacing is left to CSS. */
@media (max-width: 767px) {
	.iw-timeline {
		--iw-tl-gap: 40px;
	}

	.iw-timeline.is-stacked .iw-timeline-item,
	.iw-timeline--left .iw-timeline-item {
		gap: 16px;
	}
}