/*
 * BLVNK Timeline
 * Vertical timeline for WordPress FSE markup, built from core blocks only.
 *
 * Markup (see patterns/timeline.php):
 *   .blvnk-timeline             group — the effect root
 *     .blvnk-timeline__line     empty group — the track, colored by its own
 *                               background color
 *     .blvnk-timeline__marker   empty group — the travelling rectangle, colored
 *                               by its own background color and shaped by its
 *                               own border radius / min-height
 *     …                         every other direct child is an entry, no class
 *                               needed: duplicate one or drop in any block
 *
 * Because the line and the marker are real blocks, their color and shape are
 * changed with the standard editor controls; this file only positions them and
 * gives them a default size.
 *
 * Desktop (>= 782px): the track runs down the middle and entries alternate
 * left/right. Below that the track sits at the left edge and entries are
 * stacked full width beside it. The breakpoint mirrors the one in
 * timeline.js — keep both in sync.
 */

.blvnk-timeline {
	/* Tunable knobs (overridable per-instance via inline style). */
	--blvnk-tl-line-w: 2px;
	--blvnk-tl-marker-w: 10px;
	--blvnk-tl-marker-h: 36px;
	--blvnk-tl-anchor: 50%;                        /* viewport height the marker rides at (read by JS) */
	--blvnk-tl-gap: clamp(1.5rem, 4vw, 3rem);      /* desktop: space between track and content */
	--blvnk-tl-inset: clamp(1.5rem, 8vw, 2.5rem);  /* mobile: content offset from the track */
	--blvnk-tl-stagger: clamp(3rem, 10vw, 9rem);   /* desktop pull-up, only with .is-stagger */

	/* Travelled distance, overwritten by JS. The default parks the marker at
	   the very top of the track, which is also what the editor shows. */
	--blvnk-tl-progress: calc(var(--blvnk-tl-marker-h) / 2);

	/* Mobile default: track hugging the left edge. */
	--blvnk-tl-line-x: calc(var(--blvnk-tl-line-w) / 2);

	position: relative;
}

.blvnk-timeline > .blvnk-timeline__line,
.blvnk-timeline > .blvnk-timeline__marker {
	position: absolute;
	left: var(--blvnk-tl-line-x);
	margin-block: 0;
}

/*
 * core/group adds `padding: 1.25em 2.375em` as soon as a background color is
 * set — which is exactly how the line and the marker get their color here, so
 * that padding has to go. The block class is only in the selector to outweigh
 * the core rule.
 */
.blvnk-timeline > .wp-block-group.blvnk-timeline__line,
.blvnk-timeline > .wp-block-group.blvnk-timeline__marker {
	padding: 0;
}

.blvnk-timeline > .blvnk-timeline__line {
	top: 0;
	bottom: 0;
	width: var(--blvnk-tl-line-w);
	transform: translateX(-50%);
}

/*
 * `height` is only the default: a min-height set on the block wins, so the
 * marker can be resized with the standard Dimensions control.
 */
.blvnk-timeline > .blvnk-timeline__marker {
	top: var(--blvnk-tl-progress);
	width: var(--blvnk-tl-marker-w);
	height: var(--blvnk-tl-marker-h);
	transform: translate(-50%, -50%);
}

/*
 * The part of the track already passed. `inherit` picks up the marker's own
 * background color, so recoloring the marker recolors this too.
 */
.blvnk-timeline__marker::before {
	content: "";
	position: absolute;
	bottom: 50%;
	left: 50%;
	width: var(--blvnk-tl-line-w);
	height: var(--blvnk-tl-progress);
	transform: translateX(-50%);
	background-color: inherit;
}

/* The line and the marker are empty on purpose — hide the editor appender. */
.blvnk-timeline__line .block-list-appender,
.blvnk-timeline__marker .block-list-appender {
	display: none;
}

/* Mobile: every entry sits to the right of the track. */
.blvnk-timeline > :not(.blvnk-timeline__line, .blvnk-timeline__marker, .block-list-appender) {
	margin-inline-start: var(--blvnk-tl-inset);
}

/*
 * The line and the marker take part in the group's block gap, so an entry
 * placed after them picks up a top margin that collapses out of the group and
 * pushes the whole timeline down. The pattern keeps both at the end for that
 * reason; this rule covers any other order (the class is set by timeline.js).
 */
.blvnk-timeline > .blvnk-timeline__item:not(.blvnk-timeline__item ~ .blvnk-timeline__item) {
	margin-block-start: 0;
}

@media (min-width: 782px) {

	.blvnk-timeline {
		--blvnk-tl-line-x: 50%;
	}

	.blvnk-timeline > :not(.blvnk-timeline__line, .blvnk-timeline__marker, .block-list-appender) {
		width: calc(50% - var(--blvnk-tl-gap));
		margin-inline: 0 auto;
	}

	/*
	 * No-JS fallback alternation. `of` keeps the decorative children and the
	 * rows out of the count; browsers without support simply drop these two
	 * rules and rely on the classes timeline.js assigns.
	 */
	.blvnk-timeline > :nth-child(odd of :not(.blvnk-timeline__line, .blvnk-timeline__marker, .blvnk-timeline__row)) {
		margin-inline: 0 auto;
	}

	.blvnk-timeline > :nth-child(even of :not(.blvnk-timeline__line, .blvnk-timeline__marker, .blvnk-timeline__row)) {
		margin-inline: auto 0;
	}

	/*
	 * Resolved side: set by timeline.js, or by hand in the editor together with
	 * the `blvnk-timeline__item` class. Must stay below the :nth-child() rules,
	 * which carry the same specificity.
	 */
	.blvnk-timeline > .blvnk-timeline__item.is-left {
		margin-inline: 0 auto;
	}

	.blvnk-timeline > .blvnk-timeline__item.is-right {
		margin-inline: auto 0;
	}

	/* Opt-in: pull every entry after the first up so both columns interlock. */
	.blvnk-timeline.is-stagger > :not(.blvnk-timeline__line, .blvnk-timeline__marker, .block-list-appender) ~ :not(.blvnk-timeline__line, .blvnk-timeline__marker, .block-list-appender) {
		margin-block-start: calc(-1 * var(--blvnk-tl-stagger));
	}

	/*
	 * A row holds one entry per side at the same height, so it spans the full
	 * width instead of taking a side. Doubling the content gap between its two
	 * columns keeps both of them the same distance from the track. Stays last:
	 * it has to outweigh the single-entry rules above.
	 */
	.blvnk-timeline > .blvnk-timeline__row {
		width: auto;
		margin-inline: 0;
		column-gap: calc(var(--blvnk-tl-gap) * 2);
	}
}