/* ============================================
   Timeline block ("Important Dates")
   ============================================ */

:root .timeline {
	--timeline-dot-size: 9px;
	--timeline-line-width: 2px;
	--timeline-gutter: 1.5rem;
	--timeline-dot-offset: 0.35em;

	list-style: none;
	margin: 0;
	padding: 0;
}

:root .timeline__entry {
	position: relative;
	list-style: none;
	margin: 0;
	padding-inline-start: var(--timeline-gutter);
	padding-block-end: 2rem;
}

:root .timeline__entry:last-child {
	padding-block-end: 0;
}

/* Red bullet */
.timeline__entry::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: var(--timeline-dot-offset);
	width: var(--timeline-dot-size);
	height: var(--timeline-dot-size);
	border-radius: 50%;
	background-color: var(--wp--preset--color--bulldog-red);
}

/* Grey connector running down to the next entry */
.timeline__entry::after {
	content: "";
	position: absolute;
	inset-inline-start: calc((var(--timeline-dot-size) - var(--timeline-line-width)) / 2);
	top: calc(var(--timeline-dot-offset) + var(--timeline-dot-size));
	bottom: 1rem;
	width: var(--timeline-line-width);
	background-color: var(--wp--preset--color--stegeman);
}

/* The last entry never trails a line. */
.timeline__entry:last-child::after {
	display: none;
}

:root .timeline__date {
	display: block;
	margin: 0;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sanford);
}

:root .timeline__title {
	margin: 0.5rem 0 0;
	font-family: var(--wp--preset--font-family--merriweather);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--arch-black);
}

:root .timeline__description {
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--merriweather-sans);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	max-width: 46ch;
	color: var(--wp--preset--color--arch-black);
}

/* Description now holds real blocks (paragraph/list/buttons); avoid the
   wrapper's own margin stacking with the first/last child's margin. */
:root .timeline__description > :first-child {
	margin-top: 0;
}

:root .timeline__description > :last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	:root .timeline {
		--timeline-gutter: 2rem;
	}

	:root .timeline__description {
		margin-inline-start: 0;
	}
}

/* ============================================
   Editor only
   ============================================ */

/* The block appender is a plain div inside the <ul>; keep it off the timeline rail. */
:root .timeline > :not(.timeline__entry) {
	list-style: none;
	padding-inline-start: var(--timeline-gutter);
}

.timeline__date--empty {
	color: var(--wp--preset--color--sanford);
	font-style: italic;
	text-transform: none;
}