/**
 * HTPLaw Timeline widget.
 *
 * Figma (1440): #f5f7f9 band, 309px tall. Heading ~30px (estimated). A 2px
 * #898989 line spans the container; 18px #24597f dots sit on it, the
 * highlighted one #b87333 (decorative, so Figma's copper is kept). Milestones
 * are 151px wide; Figma places the first four 232px apart and pins the last
 * to the right edge, generalised here as space-between. Year: Source Serif 4
 * 600 14px, 0.05em tracking, #24597f. Title: Inter 600 14px. Text: Source
 * Serif 4 400 14/17.
 *
 * Below 900px the line turns vertical with milestones stacked beside it
 * (not in Figma).
 */

.htplaw-timeline {
	--_bg: var(--htplaw-timeline-bg, var(--htplaw-color-muted));
	--_line: var(--htplaw-timeline-line, var(--htplaw-color-rule));
	--_dot: var(--htplaw-timeline-dot, var(--htplaw-color-blue));
	--_highlight: var(--htplaw-timeline-highlight, var(--htplaw-color-accent));
	--_pad-y: var(--htplaw-timeline-pad-y, 52px);
	--_dot-size: 18px;

	padding-block: var(--_pad-y) calc(var(--_pad-y) + 15px);
	background: var(--_bg);
}

.htplaw-timeline .htplaw-timeline__title {
	margin-bottom: 41px;
}

.htplaw-timeline__list {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The line runs through the dot centres. */
.htplaw-timeline__list::before {
	content: "";
	position: absolute;
	top: calc(var(--_dot-size) / 2 - 1px);
	left: 0;
	right: 0;
	height: 2px;
	border-radius: 1px;
	background: var(--_line);
}

.htplaw-timeline__item {
	position: relative;
	flex: 0 1 152px; /* 151 in Figma; 152 reproduces its line breaks in the browser */
	min-width: 0;
	padding-top: calc(var(--_dot-size) + 13px);
}

.htplaw-timeline__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: var(--_dot-size);
	height: var(--_dot-size);
	border-radius: 50%;
	background: var(--_dot);
}

.htplaw-timeline__item.is-highlight::before {
	background: var(--_highlight);
}

.htplaw-timeline__year,
.htplaw-timeline__place,
.htplaw-timeline__text {
	margin: 0;
	color: var(--htplaw-color-primary);
	font-size: 14px;
}

.htplaw-timeline__year {
	color: var(--_dot);
	font-family: var(--htplaw-font-heading);
	font-weight: 600;
	letter-spacing: .05em;
	line-height: 17px;
}

/* Labels such as "Intel legal department" run past the 151px item on one
   line in Figma (2026-10-23 wireframe); the vertical layout lets them wrap. */
@media (min-width: 901px) {
	.htplaw-timeline__year {
		white-space: nowrap;
	}
}

.htplaw-timeline__place {
	margin-top: 6px;
	font-family: var(--htplaw-font-body);
	font-weight: 600;
	line-height: 17px;
}

.htplaw-timeline__text {
	margin-top: 8px;
	font-family: var(--htplaw-font-heading);
	font-weight: 400;
	line-height: 17px;
}

@media (max-width: 900px) {
	.htplaw-timeline {
		--_pad-y: var(--htplaw-timeline-pad-y, 40px);
	}

	.htplaw-timeline .htplaw-timeline__title {
		margin-bottom: 28px;
	}

	.htplaw-timeline__list {
		flex-direction: column;
		gap: 24px;
	}

	/* Vertical: one segment per gap, so the line ends at the last dot. */
	.htplaw-timeline__list::before {
		content: none;
	}

	.htplaw-timeline__item:not(:last-child)::after {
		content: "";
		position: absolute;
		top: calc(var(--_dot-size) / 2);
		bottom: -24px;
		left: calc(var(--_dot-size) / 2 - 1px);
		width: 2px;
		background: var(--_line);
	}

	.htplaw-timeline__item::before {
		z-index: 1;
	}

	.htplaw-timeline__item {
		flex-basis: auto;
		padding-top: 0;
		padding-left: calc(var(--_dot-size) + 16px);
	}


	.htplaw-timeline__text {
		max-width: 32ch;
	}
}